X-Git-Url: https://git.heureux-cyclage.org/?a=blobdiff_plain;f=resources%2Fsrc%2Fmediawiki%2Fpage%2Fgallery-slideshow.js;h=6e9ff0e7cdcfd75859f9db1d2b0c2dfb7f150b33;hb=1c7f71cefab6a2b3163312bccaa3c46bc61b063d;hp=094c4df3603f4fdc91228ee20bcb69efb9a7772a;hpb=24344400bb218ac621792be95f4ac83bdfc2879c;p=lhc%2Fweb%2Fwiklou.git

diff --git a/resources/src/mediawiki/page/gallery-slideshow.js b/resources/src/mediawiki/page/gallery-slideshow.js
index 094c4df360..6e9ff0e7cd 100644
--- a/resources/src/mediawiki/page/gallery-slideshow.js
+++ b/resources/src/mediawiki/page/gallery-slideshow.js
@@ -26,7 +26,7 @@
 		// Initialize
 		this.drawCarousel();
 		this.setSizeRequirement();
-		this.toggleThumbnails( false );
+		this.toggleThumbnails( !!this.$gallery.attr( 'data-showthumbnails' ) );
 		this.showCurrentImage();
 
 		// Events
@@ -89,7 +89,7 @@
 
 	/**
 	 * @property {jQuery} $container If the gallery contained in an element that is
-	 * 	not the main content element, then it stores that element.
+	 *   not the main content element, then it stores that element.
 	 */
 
 	/**
@@ -102,7 +102,7 @@
 
 	/**
 	 * @property {number} imageHeight Height of the image based on viewport size
-	 * 	the URLs in the required size.
+	 *   the URLs in the required size.
 	 */
 
 	/* Setup */
@@ -232,11 +232,7 @@
 			.removeAttr( 'height' );
 
 		// Stretch image to take up the required size
-		if ( this.$thumbnail.width() > this.$thumbnail.height() ) {
-			this.$img.attr( 'width', this.imageWidth + 'px' );
-		} else {
-			this.$img.attr( 'height', this.imageHeight + 'px' );
-		}
+		this.$img.attr( 'height', ( this.imageHeight - this.$imgCaption.outerHeight() ) + 'px' );
 
 		// Make the image smaller in case the current image
 		// size is larger than the original file size.
@@ -262,25 +258,28 @@
 		var imageLi = this.getCurrentImage(),
 			caption = imageLi.find( '.gallerytext' );
 
-		// Highlight current thumbnail
+		// The order of the following is important for size calculations
+		// 1. Highlight current thumbnail
 		this.$gallery
 			.find( '.gallerybox.slideshow-current' )
 			.removeClass( 'slideshow-current' );
 		imageLi.addClass( 'slideshow-current' );
 
-		// Show thumbnail stretched to the right size while the image loads
+		// 2. Show thumbnail
 		this.$thumbnail = imageLi.find( 'img' );
 		this.$img.attr( 'src', this.$thumbnail.attr( 'src' ) );
 		this.$img.attr( 'alt', this.$thumbnail.attr( 'alt' ) );
 		this.$imgLink.attr( 'href', imageLi.find( 'a' ).eq( 0 ).attr( 'href' ) );
-		this.setImageSize();
 
-		// Copy caption
+		// 3. Copy caption
 		this.$imgCaption
 			.empty()
 			.append( caption.clone() );
 
-		// Load image at the required size
+		// 4. Stretch thumbnail to correct size
+		this.setImageSize();
+
+		// 5. Load image at the required size
 		this.loadImage( this.$thumbnail ).done( function ( info, $img ) {
 			// Show this image to the user only if its still the current one
 			if ( this.$thumbnail.attr( 'src' ) === $img.attr( 'src' ) ) {