this.drawCarousel();
this.setSizeRequirement();
this.toggleThumbnails( !!this.$gallery.attr( 'data-showthumbnails' ) );
- this.showCurrentImage();
+ this.showCurrentImage( true );
// Events
$( window ).on(
// Make the image smaller in case the current image
// size is larger than the original file size.
- this.getImageInfo( this.$thumbnail ).done( function ( info ) {
+ this.getImageInfo( this.$thumbnail ).then( function ( info ) {
// NOTE: There will be a jump when resizing the window
// because the cache is cleared and this a new network request.
if (
/**
* Displays the image set as {@link #$currentImage} in the carousel.
+ *
+ * @param {boolean} init Image being show during gallery init (i.e. first image)
*/
- mw.GallerySlideshow.prototype.showCurrentImage = function () {
+ mw.GallerySlideshow.prototype.showCurrentImage = function ( init ) {
var $thumbnail, $imgLink,
$imageLi = this.getCurrentImage(),
$caption = $imageLi.find( '.gallerytext' );
.removeClass( 'slideshow-current' );
$imageLi.addClass( 'slideshow-current' );
- // 2. Create and show thumbnail
this.$thumbnail = $imageLi.find( 'img' );
- this.$img = $( '<img>' ).attr( {
- src: this.$thumbnail.attr( 'src' ),
- alt: this.$thumbnail.attr( 'alt' )
- } );
- // 'image' class required for detection by MultimediaViewer
- $imgLink = $( '<a>' ).addClass( 'image' )
- .attr( 'href', $imageLi.find( 'a' ).eq( 0 ).attr( 'href' ) )
- .append( this.$img );
+ if ( this.$thumbnail.length ) {
+ // 2. Create and show thumbnail
+ this.$img = $( '<img>' ).attr( {
+ src: this.$thumbnail.attr( 'src' ),
+ alt: this.$thumbnail.attr( 'alt' )
+ } );
+ // 'image' class required for detection by MultimediaViewer
+ $imgLink = $( '<a>' ).addClass( 'image' )
+ .attr( 'href', $imageLi.find( 'a' ).eq( 0 ).attr( 'href' ) )
+ .append( this.$img );
- this.$imgContainer.empty().append( $imgLink );
+ this.$imgContainer.empty().append( $imgLink );
+ } else {
+ // 2b. No image found (e.g. file doesn't exist)
+ this.$imgContainer.text( $imageLi.find( '.thumb' ).text() );
+ }
// 3. Copy caption
this.$imgCaption
.empty()
.append( $caption.clone() );
+ if ( !this.$thumbnail.length ) {
+ return;
+ }
+
// 4. Stretch thumbnail to correct size
this.setImageSize();
if ( this.$thumbnail.attr( 'src' ) === $thumbnail.attr( 'src' ) ) {
this.$img.attr( 'src', info.thumburl );
this.setImageSize();
- mw.hook( 'wikipage.content' ).fire( this.$imgContainer );
+ // Don't fire hook twice during init
+ if ( !init ) {
+ mw.hook( 'wikipage.content' ).fire( this.$imgContainer );
+ }
// Pre-fetch the next image
this.loadImage( this.getNextImage().find( 'img' ) );
}
+ }.bind( this ) ).fail( function () {
+ // Image didn't load
+ var title = mw.Title.newFromImg( this.$img );
+ this.$imgContainer.text( title ? title.getMainText() : '' );
}.bind( this ) );
};
* element once the image has loaded.
*/
mw.GallerySlideshow.prototype.loadImage = function ( $img ) {
- var img, d = $.Deferred();
-
- this.getImageInfo( $img ).done( function ( info ) {
+ return this.getImageInfo( $img ).then( function ( info ) {
+ var img, d = $.Deferred();
img = new Image();
img.src = info.thumburl;
img.onload = function () {
img.onerror = function () {
d.reject();
};
- } ).fail( function () {
- d.reject();
+ return d.promise();
} );
-
- return d.promise();
};
/**