diff --git a/MultimediaViewer.php b/MultimediaViewer.php index 998f07b78..93fe8be8b 100644 --- a/MultimediaViewer.php +++ b/MultimediaViewer.php @@ -68,6 +68,7 @@ $wgResourceModules['ext.multimediaViewer'] = array_merge( array( 'multilightbox.image', 'mediawiki.Title', 'jquery.ui.dialog', + 'jquery.spinner', ), 'messages' => array( diff --git a/css/ext.multimediaViewer.css b/css/ext.multimediaViewer.css index 13f68da53..b5dd2ab7c 100644 --- a/css/ext.multimediaViewer.css +++ b/css/ext.multimediaViewer.css @@ -211,3 +211,16 @@ padding-top: 20px; width: 50%; } + +.mlb-image .mw-spinner { + margin-left: auto; + margin-right: auto; +} + +.mlb-image.empty .mw-spinner { + display: block; +} + +.mlb-image.empty img { + display: none; +} diff --git a/js/ext.multimediaViewer.js b/js/ext.multimediaViewer.js index 8444a55e9..36c35df42 100755 --- a/js/ext.multimediaViewer.js +++ b/js/ext.multimediaViewer.js @@ -90,15 +90,24 @@ viewer.lightbox.currentIndex = index; - // Open with a basic thumbnail and no information - fill in async - viewer.lightbox.images[index].src = mw.config.get( 'wgScriptPath', '' ) + '/resources/jquery/images/spinner-large.gif'; + // Open with the already-loaded thumbnail + // Avoids trying to load /wiki/Undefined and doesn't + // cost any network time - the library currently needs + // some src attribute to work. Will fix. + viewer.lightbox.images[index].src = $this.closest( '.thumb' ).find( '.image img' ).prop( 'src' ); viewer.lightbox.open(); + viewer.lightbox.iface.$imageDiv.append( $.createSpinner( { + id: 'mw-mlb-loading-spinner', + size: 'large' + } ) ); viewer.fetchImageInfo( fileTitle, function ( imageInfo ) { var imageEle = new Image(); imageEle.onload = function () { viewer.lightbox.iface.replaceImageWith( imageEle ); + viewer.lightbox.iface.$imageDiv.removeClass( 'empty' ); + $.removeSpinner( 'mw-mlb-loading-spinner' ); viewer.setImageInfo( fileTitle, imageInfo ); }; @@ -148,18 +157,12 @@ return false; } ); - lightboxHooks.register( 'imageLoaded', function () { - // Add link wrapper to the image div, put image inside it - this.$imageLink = $( '' ) - .addClass( 'mw-mlb-image-link' ) - .html( this.$image.detach() ); - - this.$imageDiv.append( this.$imageLink ); - } ); - lightboxHooks.register( 'modifyInterface', function () { var ui = this; + this.$imageDiv + .addClass( 'empty' ); + this.$imageDesc = $( '

' ) .addClass( 'mw-mlb-image-desc' ); @@ -434,6 +437,8 @@ this.$useFile.data( 'src', null ); this.$useFileLi.addClass( 'empty' ); + + this.$imageDiv.addClass( 'empty' ); } ); } diff --git a/js/multilightbox/lightboxinterface.js b/js/multilightbox/lightboxinterface.js index fab6b19cd..3812fccb4 100644 --- a/js/multilightbox/lightboxinterface.js +++ b/js/multilightbox/lightboxinterface.js @@ -141,7 +141,7 @@ LIP.load = function ( image ) { var ele = image.getImageElement( function () { iface.$image = $( ele ); - iface.$imageDiv.html( ele ); + iface.$imageDiv.append( iface.$image ); image.globalMaxWidth = iface.$image.width(); image.globalMaxHeight = iface.$image.height(); image.autoResize( ele, iface.isFullScreen ? 0.9 : 0.5 );