viewerjs 1.12.0 → 1.14.0

package/src/js/methods.js

@@ -17,6 +17,7 @@ import {
   EVENT_MOVE,
   EVENT_MOVED,
   EVENT_PLAY,
+  EVENT_PLAYING,
   EVENT_ROTATE,
   EVENT_ROTATED,
   EVENT_SCALE,
@@ -41,9 +42,11 @@ import {
   getOffset,
   getPointersCenter,
   hasClass,
+  inheritAttributes,
   isFunction,
   isNumber,
   isPlainObject,
+  isTransitionEnabled,
   isUndefined,
   removeClass,
   removeListener,
@@ -73,13 +76,23 @@ export default {
       return this;
     }
 
+    const originalEvent = this.actionEvent
+      || this.showOriginalEvent
+      || this.viewOriginalEvent
+      || null;
+
+    this.actionEvent = null;
+    this.showOriginalEvent = originalEvent;
+
     if (isFunction(options.show)) {
       addListener(element, EVENT_SHOW, options.show, {
         once: true,
       });
     }
 
-    if (dispatchEvent(element, EVENT_SHOW) === false || !this.ready) {
+    if (dispatchEvent(element, EVENT_SHOW, {
+      originalEvent,
+    }) === false || !this.ready) {
       return this;
     }
 
@@ -98,7 +111,7 @@ export default {
     viewer.setAttribute('aria-modal', true);
     viewer.removeAttribute('aria-hidden');
 
-    if (options.transition && !immediate) {
+    if (isTransitionEnabled(options, 'show') && !immediate) {
       const shown = this.shown.bind(this);
 
       this.transitioning = {
@@ -136,13 +149,20 @@ export default {
       return this;
     }
 
+    const originalEvent = this.actionEvent || this.hideOriginalEvent || null;
+
+    this.actionEvent = null;
+    this.hideOriginalEvent = originalEvent;
+
     if (isFunction(options.hide)) {
       addListener(element, EVENT_HIDE, options.hide, {
         once: true,
       });
     }
 
-    if (dispatchEvent(element, EVENT_HIDE) === false) {
+    if (dispatchEvent(element, EVENT_HIDE, {
+      originalEvent,
+    }) === false || this.destroyed) {
       return this;
     }
 
@@ -164,7 +184,7 @@ export default {
       this.hidden();
     };
 
-    if (options.transition && !immediate) {
+    if (isTransitionEnabled(options, 'hide') && !immediate) {
       const onViewerTransitionEnd = (event) => {
         // Ignore all propagating `transitionend` events (#275).
         if (event && event.target === viewer) {
@@ -198,7 +218,7 @@ export default {
         addListener(image, EVENT_TRANSITION_END, onImageTransitionEnd, {
           once: true,
         });
-        this.zoomTo(0, false, null, null, true);
+        this.zoomTo(0, false, null, true);
       } else {
         onImageTransitionEnd();
       }
@@ -215,13 +235,20 @@ export default {
    * @returns {Viewer} this
    */
   view(index = this.options.initialViewIndex) {
+    const previousIndex = this.index;
+
     index = Number(index) || 0;
 
     if (this.hiding || this.played || index < 0 || index >= this.length
-      || (this.viewed && index === this.index)) {
+      || (this.viewed && index === previousIndex)) {
       return this;
     }
 
+    const originalEvent = this.actionEvent || this.viewOriginalEvent || null;
+
+    this.actionEvent = null;
+    this.viewOriginalEvent = originalEvent;
+
     if (!this.isShown) {
       this.index = index;
       return this.show();
@@ -237,20 +264,19 @@ export default {
       title,
       canvas,
     } = this;
-    const item = this.items[index];
+    let item = this.getItem(index);
+
+    if (!item) {
+      this.initList(index);
+      item = this.getItem(index);
+    }
+
     const img = item.querySelector('img');
     const url = getData(img, 'originalUrl');
     const alt = img.getAttribute('alt');
     const image = document.createElement('img');
 
-    forEach(options.inheritedAttributes, (name) => {
-      const value = img.getAttribute(name);
-
-      if (value !== null) {
-        image.setAttribute(name, value);
-      }
-    });
-
+    inheritAttributes(image, img, options.inheritedAttributes);
     image.src = url;
     image.alt = alt;
 
@@ -264,11 +290,14 @@ export default {
       originalImage: this.images[index],
       index,
       image,
+      originalEvent,
     }) === false || !this.isShown || this.hiding || this.played) {
       return this;
     }
 
-    const activeItem = this.items[this.index];
+    this.hideMagnifier();
+
+    const activeItem = this.getItem(previousIndex);
 
     if (activeItem) {
       removeClass(activeItem, CLASS_ACTIVE);
@@ -309,72 +338,110 @@ export default {
       title.innerHTML = escapeHTMLEntities(isFunction(render)
         ? render.call(this, image, imageData)
         : `${alt} (${imageData.naturalWidth} × ${imageData.naturalHeight})`);
-    };
-    let onLoad;
-    let onError;
 
-    addListener(element, EVENT_VIEWED, onViewed, {
-      once: true,
-    });
-
-    this.viewing = {
-      abort: () => {
-        removeListener(element, EVENT_VIEWED, onViewed);
+      // Preload the image in the direction of navigation
+      if (options.preload) {
+        const direction = index < previousIndex ? -1 : 1;
+        let nextIndex = index + direction;
 
-        if (image.complete) {
-          if (this.imageRendering) {
-            this.imageRendering.abort();
-          } else if (this.imageInitializing) {
-            this.imageInitializing.abort();
+        if (nextIndex < 0 || nextIndex >= this.length) {
+          if (options.loop) {
+            nextIndex = direction > 0 ? 0 : this.length - 1;
+          } else {
+            nextIndex = -1;
           }
-        } else {
-          // Cancel download to save bandwidth.
-          image.src = '';
-          removeListener(image, EVENT_LOAD, onLoad);
+        }
 
-          if (this.timeout) {
-            clearTimeout(this.timeout);
-          }
+        if (nextIndex !== index) {
+          const nextImage = this.images[nextIndex];
+          const preloadedImage = document.createElement('img');
+
+          inheritAttributes(preloadedImage, nextImage, options.inheritedAttributes);
+          preloadedImage.src = this.getImageURL(nextImage) || nextImage.src;
         }
-      },
+      }
     };
 
-    if (image.complete) {
-      this.load();
-    } else {
-      addListener(image, EVENT_LOAD, onLoad = () => {
-        removeListener(image, EVENT_ERROR, onError);
-        this.load();
-      }, {
-        once: true,
-      });
-      addListener(image, EVENT_ERROR, onError = () => {
+    addListener(element, EVENT_VIEWED, onViewed, {
+      once: true,
+    });
+
+    const loadImage = (isFallback = false) => {
+      let onLoad;
+      let onError;
+
+      const clean = () => {
         removeListener(image, EVENT_LOAD, onLoad);
+        removeListener(image, EVENT_ERROR, onError);
 
         if (this.timeout) {
           clearTimeout(this.timeout);
           this.timeout = false;
         }
+      };
+
+      this.viewing = {
+        abort: () => {
+          removeListener(element, EVENT_VIEWED, onViewed);
+
+          if (image.complete) {
+            if (this.imageRendering) {
+              this.imageRendering.abort();
+            } else if (this.imageInitializing) {
+              this.imageInitializing.abort();
+            }
+          } else {
+            // Cancel download to save bandwidth.
+            image.src = '';
+            clean();
+          }
+        },
+      };
+
+      if (image.complete) {
+        this.load();
+      } else {
+        addListener(image, EVENT_LOAD, onLoad = () => {
+          clean();
+          this.load();
+        }, {
+          once: true,
+        });
+        addListener(image, EVENT_ERROR, onError = () => {
+          clean();
 
-        removeClass(image, CLASS_INVISIBLE);
+          if (!isFallback) {
+            const fallbackSrc = img.src;
 
-        if (options.loading) {
-          removeClass(this.canvas, CLASS_LOADING);
+            if (fallbackSrc && fallbackSrc !== image.src) {
+              image.src = fallbackSrc;
+              loadImage(true);
+              return;
+            }
+          }
+
+          removeClass(image, CLASS_INVISIBLE);
+
+          if (options.loading) {
+            removeClass(this.canvas, CLASS_LOADING);
+          }
+        }, {
+          once: true,
+        });
+
+        if (this.timeout) {
+          clearTimeout(this.timeout);
         }
-      }, {
-        once: true,
-      });
 
-      if (this.timeout) {
-        clearTimeout(this.timeout);
+        // Make the image visible if it fails to load within 1s
+        this.timeout = setTimeout(() => {
+          removeClass(image, CLASS_INVISIBLE);
+          this.timeout = false;
+        }, 1000);
       }
+    };
 
-      // Make the image visible if it fails to load within 1s
-      this.timeout = setTimeout(() => {
-        removeClass(image, CLASS_INVISIBLE);
-        this.timeout = false;
-      }, 1000);
-    }
+    loadImage();
 
     return this;
   },
@@ -435,10 +502,9 @@ export default {
    * Move the image to an absolute point.
    * @param {number} x - The new position in the horizontal direction.
    * @param {number} [y=x] - The new position in the vertical direction.
-   * @param {Event} [_originalEvent=null] - The original event if any.
    * @returns {Viewer} this
    */
-  moveTo(x, y = x, _originalEvent = null) {
+  moveTo(x, y = x) {
     const { element, options, imageData } = this;
 
     x = Number(x);
@@ -462,6 +528,10 @@ export default {
       }
 
       if (changed) {
+        const originalEvent = this.actionEvent || null;
+
+        this.actionEvent = null;
+
         if (isFunction(options.move)) {
           addListener(element, EVENT_MOVE, options.move, {
             once: true,
@@ -473,7 +543,7 @@ export default {
           y,
           oldX,
           oldY,
-          originalEvent: _originalEvent,
+          originalEvent,
         }) === false) {
           return this;
         }
@@ -482,6 +552,7 @@ export default {
         imageData.y = y;
         imageData.left = x;
         imageData.top = y;
+        toggleClass(this.image, CLASS_TRANSITION, isTransitionEnabled(options, 'move'));
         this.moving = true;
         this.renderImage(() => {
           this.moving = false;
@@ -497,7 +568,7 @@ export default {
             y,
             oldX,
             oldY,
-            originalEvent: _originalEvent,
+            originalEvent,
           }, {
             cancelable: false,
           });
@@ -531,6 +602,9 @@ export default {
 
     if (isNumber(degree) && this.viewed && !this.played && options.rotatable) {
       const oldDegree = imageData.rotate;
+      const originalEvent = this.actionEvent || null;
+
+      this.actionEvent = null;
 
       if (isFunction(options.rotate)) {
         addListener(element, EVENT_ROTATE, options.rotate, {
@@ -541,11 +615,13 @@ export default {
       if (dispatchEvent(element, EVENT_ROTATE, {
         degree,
         oldDegree,
+        originalEvent,
       }) === false) {
         return this;
       }
 
       imageData.rotate = degree;
+      toggleClass(this.image, CLASS_TRANSITION, isTransitionEnabled(options, 'rotate'));
       this.rotating = true;
       this.renderImage(() => {
         this.rotating = false;
@@ -559,6 +635,7 @@ export default {
         dispatchEvent(element, EVENT_ROTATED, {
           degree,
           oldDegree,
+          originalEvent,
         }, {
           cancelable: false,
         });
@@ -620,6 +697,10 @@ export default {
       }
 
       if (changed) {
+        const originalEvent = this.actionEvent || null;
+
+        this.actionEvent = null;
+
         if (isFunction(options.scale)) {
           addListener(element, EVENT_SCALE, options.scale, {
             once: true,
@@ -631,12 +712,14 @@ export default {
           scaleY,
           oldScaleX,
           oldScaleY,
+          originalEvent,
         }) === false) {
           return this;
         }
 
         imageData.scaleX = scaleX;
         imageData.scaleY = scaleY;
+        toggleClass(this.image, CLASS_TRANSITION, isTransitionEnabled(options, 'scale'));
         this.scaling = true;
         this.renderImage(() => {
           this.scaling = false;
@@ -652,6 +735,7 @@ export default {
             scaleY,
             oldScaleX,
             oldScaleY,
+            originalEvent,
           }, {
             cancelable: false,
           });
@@ -667,10 +751,9 @@ export default {
    * @param {number} ratio - The target ratio.
    * @param {boolean} [showTooltip=false] - Indicates whether to show the tooltip.
    * @param {Object} [pivot] - The pivot point coordinate for zooming.
-   * @param {Event} [_originalEvent=null] - The original event if any.
    * @returns {Viewer} this
    */
-  zoom(ratio, showTooltip = false, pivot = null, _originalEvent = null) {
+  zoom(ratio, showTooltip = false, pivot = null) {
     const { imageData } = this;
 
     ratio = Number(ratio);
@@ -685,7 +768,6 @@ export default {
       (imageData.width * ratio) / imageData.naturalWidth,
       showTooltip,
       pivot,
-      _originalEvent,
     );
 
     return this;
@@ -696,11 +778,10 @@ export default {
    * @param {number} ratio - The target ratio.
    * @param {boolean} [showTooltip] - Indicates whether to show the tooltip.
    * @param {Object} [pivot] - The pivot point coordinate for zooming.
-   * @param {Event} [_originalEvent=null] - The original event if any.
-   * @param {Event} [_zoomable=false] - Indicates if the current zoom is available or not.
+   * @param {boolean} [_zoomable=false] - Indicates if the current zoom is available or not.
    * @returns {Viewer} this
    */
-  zoomTo(ratio, showTooltip = false, pivot = null, _originalEvent = null, _zoomable = false) {
+  zoomTo(ratio, showTooltip = false, pivot = null, _zoomable = false) {
     const {
       element,
       options,
@@ -720,14 +801,22 @@ export default {
 
     if (isNumber(ratio) && this.viewed && !this.played && (_zoomable || options.zoomable)) {
       if (!_zoomable) {
-        const minZoomRatio = Math.max(0.01, options.minZoomRatio);
-        const maxZoomRatio = Math.min(100, options.maxZoomRatio);
+        const minZoomRatio = Math.max(0.01, isFunction(options.minZoomRatio)
+          ? options.minZoomRatio.call(this, this.image, imageData)
+          : options.minZoomRatio);
+        const maxZoomRatio = Math.min(100, isFunction(options.maxZoomRatio)
+          ? options.maxZoomRatio.call(this, this.image, imageData)
+          : options.maxZoomRatio);
 
         ratio = Math.min(Math.max(ratio, minZoomRatio), maxZoomRatio);
       }
 
-      if (_originalEvent) {
-        switch (_originalEvent.type) {
+      const originalEvent = this.actionEvent || null;
+
+      this.actionEvent = null;
+
+      if (originalEvent && originalEvent.type !== EVENT_CLICK) {
+        switch (originalEvent.type) {
           case 'wheel':
             if (options.zoomRatio >= 0.055 && ratio > 0.95 && ratio < 1.05) {
               ratio = 1;
@@ -761,20 +850,20 @@ export default {
       if (dispatchEvent(element, EVENT_ZOOM, {
         ratio,
         oldRatio,
-        originalEvent: _originalEvent,
+        originalEvent,
       }) === false) {
         return this;
       }
 
       this.zooming = true;
 
-      if (_originalEvent) {
+      if (originalEvent && originalEvent.type !== EVENT_CLICK) {
         const offset = getOffset(this.viewer);
         const center = pointers && Object.keys(pointers).length > 0
           ? getPointersCenter(pointers)
           : {
-            pageX: _originalEvent.pageX,
-            pageY: _originalEvent.pageY,
+            pageX: originalEvent.pageX,
+            pageY: originalEvent.pageY,
           };
 
         // Zoom from the triggering point of the event
@@ -795,6 +884,7 @@ export default {
       imageData.height = newHeight;
       imageData.oldRatio = oldRatio;
       imageData.ratio = ratio;
+      toggleClass(this.image, CLASS_TRANSITION, isTransitionEnabled(options, 'zoom'));
       this.renderImage(() => {
         this.zooming = false;
 
@@ -807,7 +897,7 @@ export default {
         dispatchEvent(element, EVENT_ZOOMED, {
           ratio,
           oldRatio,
-          originalEvent: _originalEvent,
+          originalEvent,
         }, {
           cancelable: false,
         });
@@ -832,6 +922,9 @@ export default {
     }
 
     const { element, options } = this;
+    const originalEvent = this.actionEvent || null;
+
+    this.actionEvent = null;
 
     if (isFunction(options.play)) {
       addListener(element, EVENT_PLAY, options.play, {
@@ -839,7 +932,9 @@ export default {
       });
     }
 
-    if (dispatchEvent(element, EVENT_PLAY) === false) {
+    if (dispatchEvent(element, EVENT_PLAY, {
+      originalEvent,
+    }) === false) {
       return this;
     }
 
@@ -857,18 +952,18 @@ export default {
     }
 
     addClass(player, CLASS_SHOW);
-    forEach(this.items, (item, i) => {
-      const img = item.querySelector('img');
+    player.removeAttribute('aria-hidden');
+    forEach(this.images, (originalImage, i) => {
       const image = document.createElement('img');
 
-      image.src = getData(img, 'originalUrl');
-      image.alt = img.getAttribute('alt');
-      image.referrerPolicy = img.referrerPolicy;
+      image.src = this.getImageURL(originalImage) || originalImage.src;
+      image.alt = originalImage.alt || '';
+      image.referrerPolicy = originalImage.referrerPolicy;
       total += 1;
       addClass(image, CLASS_FADE);
-      toggleClass(image, CLASS_TRANSITION, options.transition);
+      toggleClass(image, CLASS_TRANSITION, isTransitionEnabled(options, 'play'));
 
-      if (hasClass(item, CLASS_ACTIVE)) {
+      if (i === this.index) {
         addClass(image, CLASS_IN);
         index = i;
       }
@@ -883,26 +978,74 @@ export default {
     if (isNumber(options.interval) && options.interval > 0) {
       const prev = () => {
         clearTimeout(this.playing.timeout);
+
+        const currentOriginalEvent = this.actionEvent || null;
+
+        this.actionEvent = null;
+
+        let prevIndex = index - 1;
+
+        prevIndex = prevIndex >= 0 ? prevIndex : total - 1;
+
+        if (isFunction(options.playing)) {
+          addListener(element, EVENT_PLAYING, options.playing, {
+            once: true,
+          });
+        }
+
+        if (dispatchEvent(element, EVENT_PLAYING, {
+          originalImage: this.images[prevIndex],
+          index: prevIndex,
+          image: list[prevIndex],
+          originalEvent: currentOriginalEvent,
+        }) === false) {
+          this.playing.timeout = options.autoplay ? setTimeout(prev, options.interval) : null;
+          return;
+        }
+
         removeClass(list[index], CLASS_IN);
-        index -= 1;
-        index = index >= 0 ? index : total - 1;
+        index = prevIndex;
         addClass(list[index], CLASS_IN);
-        this.playing.timeout = setTimeout(prev, options.interval);
+        this.playing.timeout = options.autoplay ? setTimeout(prev, options.interval) : null;
       };
       const next = () => {
         clearTimeout(this.playing.timeout);
+
+        const currentOriginalEvent = this.actionEvent || null;
+
+        this.actionEvent = null;
+
+        let nextIndex = index + 1;
+
+        nextIndex = nextIndex < total ? nextIndex : 0;
+
+        if (isFunction(options.playing)) {
+          addListener(element, EVENT_PLAYING, options.playing, {
+            once: true,
+          });
+        }
+
+        if (dispatchEvent(element, EVENT_PLAYING, {
+          originalImage: this.images[nextIndex],
+          index: nextIndex,
+          image: list[nextIndex],
+          originalEvent: currentOriginalEvent,
+        }) === false) {
+          this.playing.timeout = options.autoplay ? setTimeout(next, options.interval) : null;
+          return;
+        }
+
         removeClass(list[index], CLASS_IN);
-        index += 1;
-        index = index < total ? index : 0;
+        index = nextIndex;
         addClass(list[index], CLASS_IN);
-        this.playing.timeout = setTimeout(next, options.interval);
+        this.playing.timeout = options.autoplay ? setTimeout(next, options.interval) : null;
       };
 
       if (total > 1) {
         this.playing = {
           prev,
           next,
-          timeout: setTimeout(next, options.interval),
+          timeout: options.autoplay ? setTimeout(next, options.interval) : null,
         };
       }
     }
@@ -910,13 +1053,19 @@ export default {
     return this;
   },
 
-  // Stop play
+  /**
+   * Stop play
+   * @returns {Viewer} this
+   */
   stop() {
     if (!this.played) {
       return this;
     }
 
     const { element, options } = this;
+    const originalEvent = this.actionEvent || null;
+
+    this.actionEvent = null;
 
     if (isFunction(options.stop)) {
       addListener(element, EVENT_STOP, options.stop, {
@@ -924,7 +1073,9 @@ export default {
       });
     }
 
-    if (dispatchEvent(element, EVENT_STOP) === false) {
+    if (dispatchEvent(element, EVENT_STOP, {
+      originalEvent,
+    }) === false) {
       return this;
     }
 
@@ -937,6 +1088,7 @@ export default {
       removeListener(image, EVENT_LOAD, this.onLoadWhenPlay);
     });
     removeClass(player, CLASS_SHOW);
+    player.setAttribute('aria-hidden', true);
     player.innerHTML = '';
     this.exitFullscreen();
 
@@ -960,12 +1112,10 @@ export default {
     this.open();
     addClass(this.button, CLASS_FULLSCREEN_EXIT);
 
-    if (options.transition) {
-      removeClass(list, CLASS_TRANSITION);
+    removeClass(list, CLASS_TRANSITION);
 
-      if (this.viewed) {
-        removeClass(image, CLASS_TRANSITION);
-      }
+    if (this.viewed) {
+      removeClass(image, CLASS_TRANSITION);
     }
 
     addClass(viewer, CLASS_FIXED);
@@ -987,14 +1137,7 @@ export default {
 
     if (this.viewed) {
       this.initImage(() => {
-        this.renderImage(() => {
-          if (options.transition) {
-            setTimeout(() => {
-              addClass(image, CLASS_TRANSITION);
-              addClass(list, CLASS_TRANSITION);
-            }, 0);
-          }
-        });
+        this.renderImage();
       });
     }
 
@@ -1018,12 +1161,10 @@ export default {
     this.close();
     removeClass(this.button, CLASS_FULLSCREEN_EXIT);
 
-    if (options.transition) {
-      removeClass(list, CLASS_TRANSITION);
+    removeClass(list, CLASS_TRANSITION);
 
-      if (this.viewed) {
-        removeClass(image, CLASS_TRANSITION);
-      }
+    if (this.viewed) {
+      removeClass(image, CLASS_TRANSITION);
     }
 
     if (options.focus) {
@@ -1044,14 +1185,7 @@ export default {
 
     if (this.viewed) {
       this.initImage(() => {
-        this.renderImage(() => {
-          if (options.transition) {
-            setTimeout(() => {
-              addClass(image, CLASS_TRANSITION);
-              addClass(list, CLASS_TRANSITION);
-            }, 0);
-          }
-        });
+        this.renderImage();
       });
     }
 
@@ -1069,7 +1203,7 @@ export default {
     tooltipBox.textContent = `${Math.round(imageData.ratio * 100)}%`;
 
     if (!this.tooltipping) {
-      if (options.transition) {
+      if (isTransitionEnabled(options, 'tooltip')) {
         if (this.fading) {
           dispatchEvent(tooltipBox, EVENT_TRANSITION_END);
         }
@@ -1091,7 +1225,7 @@ export default {
     }
 
     this.tooltipping = setTimeout(() => {
-      if (options.transition) {
+      if (isTransitionEnabled(options, 'tooltip')) {
         addListener(tooltipBox, EVENT_TRANSITION_END, () => {
           removeClass(tooltipBox, CLASS_SHOW);
           removeClass(tooltipBox, CLASS_FADE);
@@ -1117,14 +1251,13 @@ export default {
 
   /**
    * Toggle the image size between its current size and natural size
-   * @param {Event} [_originalEvent=null] - The original event if any.
    * @returns {Viewer} this
    */
-  toggle(_originalEvent = null) {
+  toggle() {
     if (this.imageData.ratio === 1) {
-      this.zoomTo(this.imageData.oldRatio, true, null, _originalEvent);
+      this.zoomTo(this.imageData.oldRatio, true);
     } else {
-      this.zoomTo(1, true, null, _originalEvent);
+      this.zoomTo(1, true);
     }
 
     return this;
@@ -1140,10 +1273,18 @@ export default {
     return this;
   },
 
-  // Update viewer when images changed
-  update() {
+  /**
+   * Update the viewer when images or options changed.
+   * @param {Object} [updateOptions] - The options to update.
+   * @returns {Viewer} this
+   */
+  update(updateOptions) {
     const { element, options, isImg } = this;
 
+    if (isPlainObject(updateOptions)) {
+      assign(options, updateOptions);
+    }
+
     // Destroy viewer if the target image was deleted
     if (isImg && !element.parentNode) {
       return this.destroy();
@@ -1171,9 +1312,10 @@ export default {
     if (this.ready) {
       const changedIndexes = [];
 
-      forEach(this.items, (item, i) => {
+      forEach(this.items, (item) => {
         const img = item.querySelector('img');
-        const image = images[i];
+        const index = Number(getData(item, 'index'));
+        const image = images[index];
 
         if (image && img) {
           if (
@@ -1182,10 +1324,10 @@ export default {
             // Title changed (#408)
             || image.alt !== img.alt
           ) {
-            changedIndexes.push(i);
+            changedIndexes.push(index);
           }
         } else {
-          changedIndexes.push(i);
+          changedIndexes.push(index);
         }
       });
 
@@ -1204,7 +1346,7 @@ export default {
               this.viewed = false;
               this.view(Math.max(Math.min(this.index - changedIndex, this.length - 1), 0));
             } else {
-              const activeItem = this.items[this.index];
+              const activeItem = this.getItem(this.index);
 
               // Reactivate the current viewing item after reset the list.
               addClass(activeItem, CLASS_ACTIVE);