Fix #921: Enhance zoom preview slide-show to show loading indicator during image change

CHANGE.md

@@ -11,6 +11,7 @@ Change Log: `bootstrap-fileinput`
 4. (enh #917): Better default styling for zoom preview for object (corrects #915).
 5. (bug #919): Fix resize validation.
 6. (enh #920): Cancel ajax abort action more correctly.
+7. (enh #921): Enhance zoom preview slide-show to show loading indicator during image change.
 
 ## version 4.3.9
 

css/fileinput.css

@@ -433,17 +433,17 @@
     right: 1px;
 }
 
-.file-zoom-content.krajee-default {
+.file-zoom-content {
     height: 480px;
     text-align: center;
 }
 
-.file-zoom-content.krajee-default .file-preview-image,
-.file-zoom-content.krajee-default .file-preview-video {
+.file-zoom-content .file-preview-image,
+.file-zoom-content .file-preview-video {
     max-height: 100%
 }
 
-.file-zoom-content.krajee-default > .file-object.type-image {
+.file-zoom-content > .file-object.type-image {
     width: auto;
     height: auto;
     min-height: inherit;
@@ -451,23 +451,23 @@
     max-height: 100%;
 }
 
-.file-zoom-content.krajee-default > .file-object.type-video,
-.file-zoom-content.krajee-default > .file-object.type-flash {
+.file-zoom-content > .file-object.type-video,
+.file-zoom-content > .file-object.type-flash {
     width: auto;
     height: 100%;
     max-width: 100%;
     max-height: 100%;
 }
 
-.file-zoom-content.krajee-default > .file-object.type-audio {
+.file-zoom-content > .file-object.type-audio {
     width: auto;
     height: 30px;
 }
 
-.file-zoom-content.krajee-default > .file-object.type-pdf,
-.file-zoom-content.krajee-default > .file-object.type-html,
-.file-zoom-content.krajee-default > .file-object.type-text,
-.file-zoom-content.krajee-default > .file-object.type-default {
+.file-zoom-content > .file-object.type-pdf,
+.file-zoom-content > .file-object.type-html,
+.file-zoom-content > .file-object.type-text,
+.file-zoom-content > .file-object.type-default {
     width: 100%;
 }
 

examples/index.html

@@ -139,13 +139,13 @@
         initialPreview: [
             "http://lorempixel.com/1920/1080/transport/1",
             "http://lorempixel.com/1920/1080/transport/2",
-            "http://lorempixel.com/1920/1080/transport/3",
+            "http://lorempixel.com/1920/1080/transport/3"
         ],
         initialPreviewConfig: [
             {caption: "transport-1.jpg", size: 329892, width: "120px", url: "{$url}", key: 1},
             {caption: "transport-2.jpg", size: 872378, width: "120px", url: "{$url}", key: 2},
-            {caption: "transport-3.jpg", size: 632762, width: "120px", url: "{$url}", key: 3},
-        ],
+            {caption: "transport-3.jpg", size: 632762, width: "120px", url: "{$url}", key: 3}
+        ]
     });
     $("#file-4").fileinput({
         uploadExtraData: {kvId: '10'}
@@ -183,12 +183,12 @@
             initialPreview: [
                 "http://lorempixel.com/1920/1080/nature/1",
                 "http://lorempixel.com/1920/1080/nature/2",
-                "http://lorempixel.com/1920/1080/nature/3",
+                "http://lorempixel.com/1920/1080/nature/3"
             ],
             initialPreviewConfig: [
                 {caption: "nature-1.jpg", size: 329892, width: "120px", url: "{$url}", key: 1},
                 {caption: "nature-2.jpg", size: 872378, width: "120px", url: "{$url}", key: 2},
-                {caption: "nature-3.jpg", size: 632762, width: "120px", url: "{$url}", key: 3},
+                {caption: "nature-3.jpg", size: 632762, width: "120px", url: "{$url}", key: 3}
             ]
         });
         /*

js/fileinput.js

@@ -1350,10 +1350,12 @@
             $body = $modal.find('.kv-zoom-body');
             $modal.removeClass('kv-single-content');
             if (animate) {
-                $tmp = $body.clone().insertAfter($body);
+                $tmp = $body.addClass('file-thumb-loading').clone().insertAfter($body);
                 $body.html(body).hide();
                 $tmp.fadeOut('fast', function () {
-                    $body.fadeIn('fast');
+                    $body.fadeIn('fast', function() {
+                        $body.removeClass('file-thumb-loading');
+                    });
                     $tmp.remove();
                 });
             } else {
@@ -3671,4 +3673,4 @@
             $input.fileinput();
         }
     });
-}));
+}));