viewerjs 1.12.0 → 1.14.0

package/dist/viewer.js

@@ -1,11 +1,11 @@
 /*!
- * Viewer.js v1.12.0
+ * Viewer.js v1.14.0
  * https://fengyuanchen.github.io/viewerjs
  *
  * Copyright 2015-present Chen Fengyuan
  * Released under the MIT license
  *
- * Date: 2026-08-22T13:00:39.652Z
+ * Date: 2026-09-12T12:12:29.730Z
  */
 
 (function (global, factory) {
@@ -95,9 +95,14 @@
     button: true,
     /**
      * Show the navbar.
-     * @type {boolean | number}
+      * @type {boolean | number | string | Object}
      */
     navbar: true,
+    /**
+     * Show the navigation buttons.
+      * @type {boolean | number | Object}
+     */
+    navigation: false,
     /**
      * Specify the visibility and the content of the title.
      * @type {boolean | number | Function | Array}
@@ -149,6 +154,11 @@
      * @type {boolean}
      */
     inline: false,
+    /**
+    * Enable to automatically play the images when playing.
+    * @type {boolean}
+    */
+    autoplay: true,
     /**
      * The amount of time to delay between automatically cycling an image when playing.
      * @type {number}
@@ -174,6 +184,11 @@
      * @type {boolean}
      */
     loop: true,
+    /**
+    * Enable to preload the next or previous image before viewing it.
+     * @type {boolean}
+     */
+    preload: true,
     /**
      * Min width of the viewer in inline mode.
      * @type {number}
@@ -189,11 +204,26 @@
      * @type {boolean}
      */
     movable: true,
+    /**
+     * Show a magnifier when hovering over the image in fullscreen mode.
+     * @type {boolean | Object}
+     */
+    magnifier: false,
     /**
      * Enable to rotate the image.
      * @type {boolean}
      */
     rotatable: true,
+    /**
+    * Enable to rotate the current image by gesture.
+     * @type {boolean}
+     */
+    rotateOnGesture: true,
+    /**
+     * Enable to rotate the current image by dragging on the touch screen.
+     * @type {boolean}
+     */
+    rotateOnTouch: true,
     /**
      * Enable to scale the image.
      * @type {boolean}
@@ -210,15 +240,33 @@
      */
     zoomOnTouch: true,
     /**
-     * Enable to zoom the image by wheeling mouse.
+     * Enable to zoom the current image by gesture.
      * @type {boolean}
      */
+    zoomOnGesture: true,
+    /**
+     * Enable to zoom the image by wheeling mouse.
+     * Set to a modifier key name (`ctrl`, `shift`, `alt`, `meta`), or a
+     * combination joined with `+` (e.g. `ctrl+shift`), to only zoom when
+     * the given modifier key(s) are held down while wheeling.
+     * @type {boolean | string}
+     */
     zoomOnWheel: true,
     /**
      * Enable to slide to the next or previous image by swiping on the touch screen.
      * @type {boolean}
      */
     slideOnTouch: true,
+    /**
+     * Enable to slide to the next or previous image by wheeling mouse.
+     * Set to a modifier key name (`ctrl`, `shift`, `alt`, `meta`), or a
+     * combination joined with `+` (e.g. `ctrl+shift`), to only slide when
+     * the given modifier key(s) are held down while wheeling.
+     * Takes effect over the navbar, and also over the rest of the viewer
+     * when `zoomOnWheel` doesn't take effect for the wheel event.
+     * @type {boolean | string}
+     */
+    slideOnWheel: true,
     /**
      * Indicate if toggle the image size between its natural size
      * and initial size when double click on the image or not.
@@ -232,7 +280,7 @@
     tooltip: true,
     /**
      * Enable CSS3 Transition for some special elements.
-     * @type {boolean}
+      * @type {boolean | Object}
      */
     transition: true,
     /**
@@ -252,12 +300,12 @@
     zoomRatio: 0.1,
     /**
      * Define the min ratio of the image when zoom out.
-     * @type {number}
+      * @type {number | Function}
      */
     minZoomRatio: 0.01,
     /**
      * Define the max ratio of the image when zoom in.
-     * @type {number}
+      * @type {number | Function}
      */
     maxZoomRatio: 100,
     /**
@@ -285,10 +333,11 @@
     zoom: null,
     zoomed: null,
     play: null,
+    playing: null,
     stop: null
   };
 
-  var TEMPLATE = '<div class="viewer-container" tabindex="-1" touch-action="none">' + '<div class="viewer-canvas"></div>' + '<div class="viewer-footer">' + '<div class="viewer-title"></div>' + '<div class="viewer-toolbar"></div>' + '<div class="viewer-navbar">' + '<ul class="viewer-list" role="navigation"></ul>' + '</div>' + '</div>' + '<div class="viewer-tooltip" role="alert" aria-hidden="true"></div>' + '<div class="viewer-button" data-viewer-action="mix" role="button"></div>' + '<div class="viewer-player"></div>' + '</div>';
+  var TEMPLATE = '<div class="viewer-container" tabindex="-1" touch-action="none">' + '<div class="viewer-canvas"></div>' + '<div class="viewer-magnifier" aria-hidden="true">' + '<img class="viewer-magnifier-image" alt="">' + '</div>' + '<div class="viewer-navigation" aria-hidden="true">' + '<div class="viewer-prev" data-viewer-action="prev" role="button" aria-label="Previous"></div>' + '<div class="viewer-next" data-viewer-action="next" role="button" aria-label="Next"></div>' + '</div>' + '<div class="viewer-footer" aria-hidden="true">' + '<div class="viewer-title" aria-hidden="true"></div>' + '<div class="viewer-toolbar" aria-hidden="true"></div>' + '<div class="viewer-navbar" aria-hidden="true">' + '<ul class="viewer-list" role="navigation"></ul>' + '</div>' + '</div>' + '<div class="viewer-tooltip" role="alert" aria-hidden="true"></div>' + '<div class="viewer-button" data-viewer-action="mix" role="button" aria-hidden="true"></div>' + '<div class="viewer-player" aria-hidden="true"></div>' + '</div>';
 
   var IS_BROWSER = typeof window !== 'undefined' && typeof window.document !== 'undefined';
   var WINDOW = IS_BROWSER ? window : {};
@@ -298,7 +347,9 @@
 
   // Actions
   var ACTION_MOVE = 'move';
+  var ACTION_ROTATE = 'rotate';
   var ACTION_SWITCH = 'switch';
+  var ACTION_TRANSFORM = 'transform';
   var ACTION_ZOOM = 'zoom';
 
   // Classes
@@ -332,11 +383,14 @@
   var EVENT_TOUCH_MOVE = IS_TOUCH_DEVICE ? 'touchmove' : 'mousemove';
   var EVENT_TOUCH_START = IS_TOUCH_DEVICE ? 'touchstart' : 'mousedown';
   var EVENT_POINTER_DOWN = HAS_POINTER_EVENT ? 'pointerdown' : EVENT_TOUCH_START;
+  var EVENT_POINTER_ENTER = HAS_POINTER_EVENT ? 'pointerenter' : 'mouseenter';
+  var EVENT_POINTER_LEAVE = HAS_POINTER_EVENT ? 'pointerleave' : 'mouseleave';
   var EVENT_POINTER_MOVE = HAS_POINTER_EVENT ? 'pointermove' : EVENT_TOUCH_MOVE;
   var EVENT_POINTER_UP = HAS_POINTER_EVENT ? 'pointerup pointercancel' : EVENT_TOUCH_END;
   var EVENT_RESIZE = 'resize';
   var EVENT_TRANSITION_END = 'transitionend';
   var EVENT_WHEEL = 'wheel';
+  var EVENT_GESTURE = 'gesturestart gesturechange gestureend';
 
   // Custom events
   var EVENT_READY = 'ready';
@@ -355,6 +409,7 @@
   var EVENT_ZOOM = 'zoom';
   var EVENT_ZOOMED = 'zoomed';
   var EVENT_PLAY = 'play';
+  var EVENT_PLAYING = 'playing';
   var EVENT_STOP = 'stop';
 
   // Data keys
@@ -374,6 +429,30 @@
   function isString(value) {
     return typeof value === 'string';
   }
+  var MODIFIER_KEY_PROPERTIES = {
+    ctrl: 'ctrlKey',
+    shift: 'shiftKey',
+    alt: 'altKey',
+    meta: 'metaKey'
+  };
+
+  /**
+   * Check if a wheel option (`zoomOnWheel` or `slideOnWheel`) takes effect for the given wheel event.
+   * @param {boolean | string} option - The option value.
+   * @param {WheelEvent} event - The wheel event.
+   * @returns {boolean} Returns `true` if the option takes effect for the event, else `false`.
+   */
+  function isWheelActionEnabled(option, event) {
+    if (!option) {
+      return false;
+    }
+    if (option === true) {
+      return true;
+    }
+    return isString(option) && option.split('+').every(function (key) {
+      return event[MODIFIER_KEY_PROPERTIES[key.trim().toLowerCase()]];
+    });
+  }
 
   /**
    * Check if the given value is not a number.
@@ -460,6 +539,32 @@
     return data;
   }
 
+  /**
+   * Inherit attributes from the original image.
+   * @param {Element} image - The target image.
+   * @param {Element} originalImage - The original image.
+   * @param {Array} inheritedAttributes - The attributes to inherit.
+   */
+  function inheritAttributes(image, originalImage, inheritedAttributes) {
+    forEach(inheritedAttributes, function (name) {
+      var value = originalImage.getAttribute(name);
+      if (value !== null) {
+        image.setAttribute(name, value);
+      }
+    });
+  }
+
+  /**
+   * Check if transition is enabled for the given action.
+   * @param {Object} options - The viewer options.
+   * @param {string} action - The transition action.
+   * @returns {boolean} Returns `true` if transition is enabled.
+   */
+  function isTransitionEnabled(options, action) {
+    var transition = options.transition;
+    return transition && transition[action] !== false;
+  }
+
   /**
    * Extend the given object.
    * @param {*} obj - The object to be extended.
@@ -789,10 +894,8 @@
     if (isNumber(rotate) && rotate !== 0) {
       values.push("rotate(".concat(rotate, "deg)"));
     }
-    if (isNumber(scaleX) && scaleX !== 1) {
+    if (isNumber(scaleX) && isNumber(scaleY) && (scaleX !== 1 || scaleY !== 1)) {
       values.push("scaleX(".concat(scaleX, ")"));
-    }
-    if (isNumber(scaleY) && scaleY !== 1) {
       values.push("scaleY(".concat(scaleY, ")"));
     }
     var transform = values.length ? values.join(' ') : 'none';
@@ -838,12 +941,7 @@
         body.removeChild(newImage);
       }
     };
-    forEach(options.inheritedAttributes, function (name) {
-      var value = image.getAttribute(name);
-      if (value !== null) {
-        newImage.setAttribute(name, value);
-      }
-    });
+    inheritAttributes(newImage, image, options.inheritedAttributes);
     newImage.src = image.src;
 
     // iOS Safari will convert the image automatically
@@ -900,6 +998,34 @@
     return ratios[0];
   }
 
+  /**
+   * Get the max rotation degree of a group of pointers.
+   * @param {Object} pointers - The target pointers.
+   * @returns {number} The result degree.
+   */
+  function getMaxRotateDegree(pointers) {
+    var pointers2 = _objectSpread2({}, pointers);
+    var degrees = [];
+    forEach(pointers, function (pointer, pointerId) {
+      delete pointers2[pointerId];
+      forEach(pointers2, function (pointer2) {
+        var start = Math.atan2(pointer2.startY - pointer.startY, pointer2.startX - pointer.startX);
+        var end = Math.atan2(pointer2.endY - pointer.endY, pointer2.endX - pointer.endX);
+        var radians = end - start;
+        if (radians > Math.PI) {
+          radians -= Math.PI * 2;
+        } else if (radians < -Math.PI) {
+          radians += Math.PI * 2;
+        }
+        degrees.push(radians * 180 / Math.PI);
+      });
+    });
+    degrees.sort(function (a, b) {
+      return Math.abs(b) - Math.abs(a);
+    });
+    return degrees[0] || 0;
+  }
+
   /**
    * Get a pointer from an event object.
    * @param {Object} event - The target event object.
@@ -952,7 +1078,7 @@
       this.renderViewer();
     },
     initBody: function initBody() {
-      var ownerDocument = this.element.ownerDocument;
+      var ownerDocument = this.ownerDocument;
       var body = ownerDocument.body || ownerDocument.documentElement;
       this.body = body;
       this.scrollbarWidth = window.innerWidth - ownerDocument.documentElement.clientWidth;
@@ -988,26 +1114,37 @@
     },
     initList: function initList() {
       var _this = this;
+      var viewIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.index;
       var element = this.element,
         options = this.options,
         list = this.list;
       var items = [];
+      var navbarOptions = isPlainObject(options.navbar) ? options.navbar : {};
+      var probe = document.createElement('li');
+      if (!this.containerData) {
+        this.initContainer();
+      }
+      list.appendChild(probe);
+      var itemWidth = probe.offsetWidth + parseInt(window.getComputedStyle(probe).marginLeft, 10);
+      list.removeChild(probe);
+      var visibleItemCount = isNumber(navbarOptions.visibleItemCount) ? Math.floor(navbarOptions.visibleItemCount) : Math.floor(this.containerData.width / itemWidth);
+      visibleItemCount = Math.min(visibleItemCount, this.length);
+      var start = visibleItemCount > 0 ? Math.min(Math.max(0, viewIndex - Math.floor(visibleItemCount / 2)), Math.max(0, this.length - visibleItemCount)) : 0;
+      var end = visibleItemCount > 0 ? Math.min(this.length, start + visibleItemCount) : this.length;
 
       // initList may be called in this.update, so should keep idempotent
       list.innerHTML = '';
       forEach(this.images, function (image, index) {
+        if (visibleItemCount > 0 && (index < start || index >= end)) {
+          return;
+        }
         var src = image.src;
         var alt = image.alt || getImageNameFromURL(src);
         var url = _this.getImageURL(image);
         if (src || url) {
           var item = document.createElement('li');
           var img = document.createElement('img');
-          forEach(options.inheritedAttributes, function (name) {
-            var value = image.getAttribute(name);
-            if (value !== null) {
-              img.setAttribute(name, value);
-            }
-          });
+          inheritAttributes(img, image, options.inheritedAttributes);
           if (options.navbar) {
             img.src = src || url;
           }
@@ -1025,6 +1162,13 @@
         }
       });
       this.items = items;
+      if (this.viewed) {
+        var activeItem = this.getItem(this.index);
+        if (activeItem) {
+          addClass(activeItem, CLASS_ACTIVE);
+          activeItem.setAttribute('aria-selected', true);
+        }
+      }
       forEach(items, function (item) {
         var image = item.firstElementChild;
         var onLoad;
@@ -1051,7 +1195,7 @@
           once: true
         });
       });
-      if (options.transition) {
+      if (isTransitionEnabled(options, 'view')) {
         addListener(element, EVENT_VIEWED, function () {
           addClass(list, CLASS_TRANSITION);
         }, {
@@ -1059,9 +1203,20 @@
         });
       }
     },
+    getItem: function getItem(index) {
+      var item;
+      forEach(this.items, function (candidate) {
+        if (Number(getData(candidate, 'index')) === index) {
+          item = candidate;
+          return false;
+        }
+        return true;
+      });
+      return item;
+    },
     renderList: function renderList() {
       var index = this.index;
-      var item = this.items[index];
+      var item = this.getItem(index);
       if (!item) {
         return;
       }
@@ -1072,9 +1227,9 @@
 
       // Place the active item in the center of the screen
       setStyle(this.list, assign({
-        width: outerWidth * this.length - gutter
+        width: outerWidth * this.items.length - gutter
       }, getTransforms({
-        translateX: (this.viewerData.width - offsetWidth) / 2 - outerWidth * index
+        translateX: (this.viewerData.width - offsetWidth) / 2 - item.offsetLeft
       })));
     },
     resetList: function resetList() {
@@ -1160,8 +1315,23 @@
         marginLeft: imageData.x,
         marginTop: imageData.y
       }, getTransforms(imageData)));
+      if (this.magnifierPoint) {
+        this.renderMagnifier();
+      }
       if (done) {
-        if ((this.viewing || this.moving || this.rotating || this.scaling || this.zooming) && this.options.transition && hasClass(image, CLASS_TRANSITION)) {
+        var action = false;
+        if (this.viewing) {
+          action = 'view';
+        } else if (this.moving) {
+          action = 'move';
+        } else if (this.rotating) {
+          action = 'rotate';
+        } else if (this.scaling) {
+          action = 'scale';
+        } else if (this.zooming) {
+          action = 'zoom';
+        }
+        if (action && isTransitionEnabled(this.options, action) && hasClass(image, CLASS_TRANSITION)) {
           var onTransitionEnd = function onTransitionEnd() {
             _this3.imageRendering = false;
             done();
@@ -1197,20 +1367,28 @@
       var options = this.options,
         viewer = this.viewer,
         canvas = this.canvas;
-      var document = this.element.ownerDocument;
+      var document = this.ownerDocument;
       addListener(viewer, EVENT_CLICK, this.onClick = this.click.bind(this));
       addListener(viewer, EVENT_DRAG_START, this.onDragStart = this.dragstart.bind(this));
+      addListener(viewer, EVENT_POINTER_ENTER, this.onMagnifyEnter = this.magnify.bind(this));
+      addListener(viewer, EVENT_POINTER_MOVE, this.onMagnify = this.magnify.bind(this));
+      addListener(viewer, EVENT_POINTER_LEAVE, this.onMagnifierLeave = this.hideMagnifier.bind(this));
       addListener(canvas, EVENT_POINTER_DOWN, this.onPointerDown = this.pointerdown.bind(this));
       addListener(document, EVENT_POINTER_MOVE, this.onPointerMove = this.pointermove.bind(this));
       addListener(document, EVENT_POINTER_UP, this.onPointerUp = this.pointerup.bind(this));
       addListener(document, EVENT_KEY_DOWN, this.onKeyDown = this.keydown.bind(this));
       addListener(window, EVENT_RESIZE, this.onResize = this.resize.bind(this));
-      if (options.zoomable && options.zoomOnWheel) {
+      if (options.zoomable && options.zoomOnWheel || options.slideOnWheel) {
         addListener(viewer, EVENT_WHEEL, this.onWheel = this.wheel.bind(this), {
           passive: false,
           capture: true
         });
       }
+      if (options.zoomable && options.zoomOnGesture || options.rotatable && options.rotateOnGesture) {
+        addListener(viewer, EVENT_GESTURE, this.onGesture = this.gesture.bind(this), {
+          passive: false
+        });
+      }
       if (options.toggleOnDblclick) {
         addListener(canvas, EVENT_DBLCLICK, this.onDblclick = this.dblclick.bind(this));
       }
@@ -1219,20 +1397,28 @@
       var options = this.options,
         viewer = this.viewer,
         canvas = this.canvas;
-      var document = this.element.ownerDocument;
+      var document = this.ownerDocument;
       removeListener(viewer, EVENT_CLICK, this.onClick);
       removeListener(viewer, EVENT_DRAG_START, this.onDragStart);
+      removeListener(viewer, EVENT_POINTER_ENTER, this.onMagnifyEnter);
+      removeListener(viewer, EVENT_POINTER_MOVE, this.onMagnify);
+      removeListener(viewer, EVENT_POINTER_LEAVE, this.onMagnifierLeave);
       removeListener(canvas, EVENT_POINTER_DOWN, this.onPointerDown);
       removeListener(document, EVENT_POINTER_MOVE, this.onPointerMove);
       removeListener(document, EVENT_POINTER_UP, this.onPointerUp);
       removeListener(document, EVENT_KEY_DOWN, this.onKeyDown);
       removeListener(window, EVENT_RESIZE, this.onResize);
-      if (options.zoomable && options.zoomOnWheel) {
+      if (options.zoomable && options.zoomOnWheel || options.slideOnWheel) {
         removeListener(viewer, EVENT_WHEEL, this.onWheel, {
           passive: false,
           capture: true
         });
       }
+      if (options.zoomable && options.zoomOnGesture || options.rotatable && options.rotateOnGesture) {
+        removeListener(viewer, EVENT_GESTURE, this.onGesture, {
+          passive: false
+        });
+      }
       if (options.toggleOnDblclick) {
         removeListener(canvas, EVENT_DBLCLICK, this.onDblclick);
       }
@@ -1254,6 +1440,7 @@
       if (IS_TOUCH_DEVICE && event.isTrusted && target === this.canvas) {
         clearTimeout(this.clickCanvasTimeout);
       }
+      this.actionEvent = event;
       switch (action) {
         case 'mix':
           if (this.played) {
@@ -1324,7 +1511,8 @@
         }
 
         // XXX: No pageX/Y properties in custom event, fallback to the original event.
-        this.toggle(event.isTrusted ? event : event.detail && event.detail.originalEvent);
+        this.actionEvent = event.isTrusted ? event : event.detail && event.detail.originalEvent;
+        this.toggle();
       }
     },
     load: function load() {
@@ -1345,10 +1533,13 @@
       image.style.cssText = 'height:0;' + "margin-left:".concat(viewerData.width / 2, "px;") + "margin-top:".concat(viewerData.height / 2, "px;") + 'max-width:none!important;' + 'position:relative;' + 'width:0;';
       this.initImage(function () {
         toggleClass(image, CLASS_MOVE, options.movable);
-        toggleClass(image, CLASS_TRANSITION, options.transition);
+        toggleClass(image, CLASS_TRANSITION, isTransitionEnabled(options, 'view'));
         _this.renderImage(function () {
           _this.viewed = true;
           _this.viewing = false;
+          setTimeout(function () {
+            toggleClass(image, CLASS_TRANSITION, options.transition);
+          }, 300);
           if (isFunction(options.viewed)) {
             addListener(element, EVENT_VIEWED, options.viewed, {
               once: true
@@ -1357,10 +1548,12 @@
           dispatchEvent(element, EVENT_VIEWED, {
             originalImage: _this.images[index],
             index: index,
-            image: image
+            image: image,
+            originalEvent: _this.viewOriginalEvent || null
           }, {
             cancelable: false
           });
+          _this.viewOriginalEvent = null;
         });
       });
     },
@@ -1400,6 +1593,7 @@
         return;
       }
       var keyCode = event.keyCode || event.which || event.charCode;
+      this.actionEvent = event;
       switch (keyCode) {
         // Enter
         case 13:
@@ -1487,6 +1681,88 @@
         event.preventDefault();
       }
     },
+    magnify: function magnify(event) {
+      if (event.changedTouches || event.pointerType && event.pointerType !== 'mouse') {
+        this.hideMagnifier();
+        return;
+      }
+      this.magnifierPoint = {
+        clientX: event.clientX,
+        clientY: event.clientY
+      };
+      this.renderMagnifier();
+    },
+    renderMagnifier: function renderMagnifier() {
+      var options = this.options,
+        imageData = this.imageData,
+        magnifier = this.magnifier,
+        magnifierImage = this.magnifierImage,
+        viewer = this.viewer;
+      var config = isPlainObject(options.magnifier) ? options.magnifier : {};
+      var point = this.magnifierPoint;
+      if (!options.magnifier || !this.fulled || !this.viewed || !magnifier || !magnifierImage || !point) {
+        this.hideMagnifier();
+        return;
+      }
+      var size = Math.max(1, Number(config.size) || 100);
+      var zoomRatio = Math.max(1, Number(config.zoomRatio) || 2);
+      var opacity = Number(config.opacity);
+      var rect = viewer.getBoundingClientRect();
+      var x = point.clientX - rect.left;
+      var y = point.clientY - rect.top;
+      var imageURL = this.image.currentSrc || this.image.src;
+      var imageRect = this.image.getBoundingClientRect();
+      if (point.clientX < imageRect.left || point.clientX > imageRect.right || point.clientY < imageRect.top || point.clientY > imageRect.bottom) {
+        this.hideMagnifier();
+        return;
+      }
+      var scaleX = isNumber(imageData.scaleX) ? imageData.scaleX : 1;
+      var scaleY = isNumber(imageData.scaleY) ? imageData.scaleY : 1;
+      var rotate = (imageData.rotate || 0) * Math.PI / 180;
+      var cos = Math.cos(rotate);
+      var sin = Math.sin(rotate);
+      var matrixA = cos * scaleX;
+      var matrixB = sin * scaleX;
+      var matrixC = -sin * scaleY;
+      var matrixD = cos * scaleY;
+      var determinant = scaleX * scaleY;
+      if (determinant === 0) {
+        this.hideMagnifier();
+        return;
+      }
+      var centerX = imageData.x + imageData.width / 2;
+      var centerY = imageData.y + imageData.height / 2;
+      var localX = (matrixD * (x - centerX) - matrixC * (y - centerY)) / determinant;
+      var localY = (-matrixB * (x - centerX) + matrixA * (y - centerY)) / determinant;
+      var sourceX = localX + imageData.width / 2;
+      var sourceY = localY + imageData.height / 2;
+      var magnifiedWidth = imageData.width * zoomRatio;
+      var magnifiedHeight = imageData.height * zoomRatio;
+      var transformedX = matrixA * (sourceX * zoomRatio - magnifiedWidth / 2) + matrixC * (sourceY * zoomRatio - magnifiedHeight / 2);
+      var transformedY = matrixB * (sourceX * zoomRatio - magnifiedWidth / 2) + matrixD * (sourceY * zoomRatio - magnifiedHeight / 2);
+      this.magnifierSourcePoint = {
+        x: sourceX,
+        y: sourceY
+      };
+      magnifier.style.width = "".concat(size, "px");
+      magnifier.style.height = "".concat(size, "px");
+      magnifier.style.opacity = "".concat(Math.max(0, Math.min(1, isNumber(opacity) ? opacity : 1)));
+      magnifierImage.src = imageURL;
+      magnifierImage.style.width = "".concat(magnifiedWidth, "px");
+      magnifierImage.style.height = "".concat(magnifiedHeight, "px");
+      magnifierImage.style.left = "".concat(size / 2 - magnifiedWidth / 2 - transformedX, "px");
+      magnifierImage.style.top = "".concat(size / 2 - magnifiedHeight / 2 - transformedY, "px");
+      magnifierImage.style.transform = "rotate(".concat(imageData.rotate || 0, "deg) scaleX(").concat(scaleX, ") scaleY(").concat(scaleY, ")");
+      magnifier.removeAttribute('aria-hidden');
+      addClass(magnifier, 'viewer-show');
+    },
+    hideMagnifier: function hideMagnifier() {
+      if (this.magnifier) {
+        removeClass(this.magnifier, 'viewer-show');
+        this.magnifier.setAttribute('aria-hidden', true);
+        this.magnifierPoint = null;
+      }
+    },
     pointerdown: function pointerdown(event) {
       var options = this.options,
         pointers = this.pointers;
@@ -1515,12 +1791,14 @@
         pointers[event.pointerId || 0] = getPointer(event);
       }
       var action = options.movable ? ACTION_MOVE : false;
-      if (options.zoomOnTouch && options.zoomable && Object.keys(pointers).length > 1) {
-        action = ACTION_ZOOM;
+      if ((options.zoomable && options.zoomOnTouch || options.rotatable && options.rotateOnTouch) && Object.keys(pointers).length > 1) {
+        // action = ACTION_ZOOM;
+        // action = ACTION_ROTATE;
+        action = ACTION_TRANSFORM;
       } else if (options.slideOnTouch && (event.pointerType === 'touch' || event.type === 'touchstart') && this.isSwitchable()) {
         action = ACTION_SWITCH;
       }
-      if (options.transition && (action === ACTION_MOVE || action === ACTION_ZOOM)) {
+      if (action === ACTION_MOVE || action === ACTION_ZOOM || action === ACTION_ROTATE || action === ACTION_TRANSFORM) {
         removeClass(this.image, CLASS_TRANSITION);
       }
       this.action = action;
@@ -1560,13 +1838,14 @@
         return;
       }
       event.preventDefault();
-      if (options.transition && (action === ACTION_MOVE || action === ACTION_ZOOM)) {
-        addClass(this.image, CLASS_TRANSITION);
+      if (action === ACTION_MOVE || action === ACTION_ZOOM || action === ACTION_ROTATE || action === ACTION_TRANSFORM) {
+        var transition = action === ACTION_TRANSFORM ? isTransitionEnabled(options, ACTION_ZOOM) || isTransitionEnabled(options, ACTION_ROTATE) : isTransitionEnabled(options, action);
+        toggleClass(this.image, CLASS_TRANSITION, transition);
       }
       this.action = false;
 
       // Emulate click and double click in touch devices to support backdrop and image zooming (#210).
-      if (IS_TOUCH_DEVICE && action !== ACTION_ZOOM && pointer && Date.now() - pointer.timeStamp < 500) {
+      if (IS_TOUCH_DEVICE && action !== ACTION_ZOOM && action !== ACTION_TRANSFORM && pointer && Date.now() - pointer.timeStamp < 500) {
         clearTimeout(this.clickCanvasTimeout);
         clearTimeout(this.doubleClickImageTimeout);
         if (options.toggleOnDblclick && this.viewed && event.target === this.image) {
@@ -1615,6 +1894,10 @@
       this.initContainer();
       this.initViewer();
       this.renderViewer();
+      var navbarOptions = isPlainObject(this.options.navbar) ? this.options.navbar : {};
+      if (isUndefined(navbarOptions.visibleItemCount)) {
+        this.initList(this.index);
+      }
       this.renderList();
       if (this.viewed) {
         this.initImage(function () {
@@ -1636,12 +1919,17 @@
     },
     wheel: function wheel(event) {
       var _this4 = this;
+      var options = this.options,
+        navbar = this.navbar;
       if (!this.viewed) {
         return;
       }
       event.preventDefault();
+      if (this.gesturing) {
+        return;
+      }
 
-      // Limit wheel speed to prevent zoom too fast
+      // Limit wheel speed to prevent zoom or slide too fast
       if (this.wheeling) {
         return;
       }
@@ -1649,7 +1937,6 @@
       setTimeout(function () {
         _this4.wheeling = false;
       }, 50);
-      var ratio = Number(this.options.zoomRatio) || 0.1;
       var delta = 1;
       if (event.deltaY) {
         delta = event.deltaY > 0 ? 1 : -1;
@@ -1658,7 +1945,63 @@
       } else if (event.detail) {
         delta = event.detail > 0 ? 1 : -1;
       }
-      this.zoom(-delta * ratio, true, null, event);
+
+      // Wheeling over the navbar never zooms, only slides
+      var overNavbar = navbar && navbar.contains(event.target);
+      var zoomable = !overNavbar && options.zoomable && isWheelActionEnabled(options.zoomOnWheel, event);
+      if (zoomable) {
+        var ratio = Number(options.zoomRatio) || 0.1;
+        this.actionEvent = event;
+        this.zoom(-delta * ratio, true);
+        return;
+      }
+      if (isWheelActionEnabled(options.slideOnWheel, event)) {
+        this.actionEvent = event;
+        if (delta > 0) {
+          this.next(options.loop);
+        } else if (delta < 0) {
+          this.prev(options.loop);
+        }
+      }
+    },
+    gesture: function gesture(event) {
+      var options = this.options;
+      if (!this.viewed || !options.zoomOnGesture && !options.rotateOnGesture) {
+        return;
+      }
+      event.preventDefault();
+      switch (event.type) {
+        case 'gesturestart':
+          this.gesturing = true;
+          this.gestureScale = event.scale || 1;
+          this.gestureRotation = event.rotation || 0;
+          break;
+        case 'gesturechange':
+          {
+            var scale = event.scale || 1;
+            var ratio = scale / (this.gestureScale || 1);
+            var rotation = Number(event.rotation);
+            var degree = rotation - (this.gestureRotation || 0);
+            this.gestureScale = scale;
+            if (options.zoomable && options.zoomOnGesture && ratio !== 1) {
+              this.actionEvent = event;
+              this.zoom(ratio >= 1 ? ratio - 1 : 1 - 1 / ratio);
+            }
+            if (options.rotatable && options.rotateOnGesture && isNumber(rotation)) {
+              this.gestureRotation = rotation;
+              if (degree !== 0) {
+                this.actionEvent = event;
+                this.rotate(degree);
+              }
+            }
+            break;
+          }
+        case 'gestureend':
+          this.gesturing = false;
+          this.gestureScale = 1;
+          this.gestureRotation = 0;
+          break;
+      }
     }
   };
 
@@ -1681,12 +2024,17 @@
         }
         return this;
       }
+      var 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: originalEvent
+      }) === false || !this.ready) {
         return this;
       }
       if (this.hiding) {
@@ -1700,7 +2048,7 @@
       viewer.setAttribute('aria-labelledby', this.title.id);
       viewer.setAttribute('aria-modal', true);
       viewer.removeAttribute('aria-hidden');
-      if (options.transition && !immediate) {
+      if (isTransitionEnabled(options, 'show') && !immediate) {
         var shown = this.shown.bind(this);
         this.transitioning = {
           abort: function abort() {
@@ -1735,12 +2083,17 @@
       if (options.inline || this.hiding || !(this.isShown || this.showing)) {
         return this;
       }
+      var 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: originalEvent
+      }) === false || this.destroyed) {
         return this;
       }
       if (this.showing) {
@@ -1758,7 +2111,7 @@
         removeClass(viewer, CLASS_IN);
         _this.hidden();
       };
-      if (options.transition && !immediate) {
+      if (isTransitionEnabled(options, 'hide') && !immediate) {
         var _onViewerTransitionEnd = function onViewerTransitionEnd(event) {
           // Ignore all propagating `transitionend` events (#275).
           if (event && event.target === viewer) {
@@ -1791,7 +2144,7 @@
           addListener(image, EVENT_TRANSITION_END, onImageTransitionEnd, {
             once: true
           });
-          this.zoomTo(0, false, null, null, true);
+          this.zoomTo(0, false, null, true);
         } else {
           onImageTransitionEnd();
         }
@@ -1808,10 +2161,14 @@
     view: function view() {
       var _this2 = this;
       var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.options.initialViewIndex;
+      var previousIndex = this.index;
       index = Number(index) || 0;
-      if (this.hiding || this.played || index < 0 || index >= this.length || this.viewed && index === this.index) {
+      if (this.hiding || this.played || index < 0 || index >= this.length || this.viewed && index === previousIndex) {
         return this;
       }
+      var originalEvent = this.actionEvent || this.viewOriginalEvent || null;
+      this.actionEvent = null;
+      this.viewOriginalEvent = originalEvent;
       if (!this.isShown) {
         this.index = index;
         return this.show();
@@ -1823,17 +2180,16 @@
         options = this.options,
         title = this.title,
         canvas = this.canvas;
-      var item = this.items[index];
+      var item = this.getItem(index);
+      if (!item) {
+        this.initList(index);
+        item = this.getItem(index);
+      }
       var img = item.querySelector('img');
       var url = getData(img, 'originalUrl');
       var alt = img.getAttribute('alt');
       var image = document.createElement('img');
-      forEach(options.inheritedAttributes, function (name) {
-        var value = img.getAttribute(name);
-        if (value !== null) {
-          image.setAttribute(name, value);
-        }
-      });
+      inheritAttributes(image, img, options.inheritedAttributes);
       image.src = url;
       image.alt = alt;
       if (isFunction(options.view)) {
@@ -1844,11 +2200,13 @@
       if (dispatchEvent(element, EVENT_VIEW, {
         originalImage: this.images[index],
         index: index,
-        image: image
+        image: image,
+        originalEvent: originalEvent
       }) === false || !this.isShown || this.hiding || this.played) {
         return this;
       }
-      var activeItem = this.items[this.index];
+      this.hideMagnifier();
+      var activeItem = this.getItem(previousIndex);
       if (activeItem) {
         removeClass(activeItem, CLASS_ACTIVE);
         activeItem.removeAttribute('aria-selected');
@@ -1880,63 +2238,95 @@
         var imageData = _this2.imageData;
         var render = Array.isArray(options.title) ? options.title[1] : options.title;
         title.innerHTML = escapeHTMLEntities(isFunction(render) ? render.call(_this2, image, imageData) : "".concat(alt, " (").concat(imageData.naturalWidth, " \xD7 ").concat(imageData.naturalHeight, ")"));
-      };
-      var onLoad;
-      var onError;
-      addListener(element, EVENT_VIEWED, onViewed, {
-        once: true
-      });
-      this.viewing = {
-        abort: function abort() {
-          removeListener(element, EVENT_VIEWED, onViewed);
-          if (image.complete) {
-            if (_this2.imageRendering) {
-              _this2.imageRendering.abort();
-            } else if (_this2.imageInitializing) {
-              _this2.imageInitializing.abort();
-            }
-          } else {
-            // Cancel download to save bandwidth.
-            image.src = '';
-            removeListener(image, EVENT_LOAD, onLoad);
-            if (_this2.timeout) {
-              clearTimeout(_this2.timeout);
+
+        // Preload the image in the direction of navigation
+        if (options.preload) {
+          var direction = index < previousIndex ? -1 : 1;
+          var nextIndex = index + direction;
+          if (nextIndex < 0 || nextIndex >= _this2.length) {
+            if (options.loop) {
+              nextIndex = direction > 0 ? 0 : _this2.length - 1;
+            } else {
+              nextIndex = -1;
             }
           }
+          if (nextIndex !== index) {
+            var nextImage = _this2.images[nextIndex];
+            var preloadedImage = document.createElement('img');
+            inheritAttributes(preloadedImage, nextImage, options.inheritedAttributes);
+            preloadedImage.src = _this2.getImageURL(nextImage) || nextImage.src;
+          }
         }
       };
-      if (image.complete) {
-        this.load();
-      } else {
-        addListener(image, EVENT_LOAD, onLoad = function onLoad() {
-          removeListener(image, EVENT_ERROR, onError);
-          _this2.load();
-        }, {
-          once: true
-        });
-        addListener(image, EVENT_ERROR, onError = function onError() {
+      addListener(element, EVENT_VIEWED, onViewed, {
+        once: true
+      });
+      var _loadImage = function loadImage() {
+        var isFallback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+        var onLoad;
+        var onError;
+        var clean = function clean() {
           removeListener(image, EVENT_LOAD, onLoad);
+          removeListener(image, EVENT_ERROR, onError);
           if (_this2.timeout) {
             clearTimeout(_this2.timeout);
             _this2.timeout = false;
           }
-          removeClass(image, CLASS_INVISIBLE);
-          if (options.loading) {
-            removeClass(_this2.canvas, CLASS_LOADING);
+        };
+        _this2.viewing = {
+          abort: function abort() {
+            removeListener(element, EVENT_VIEWED, onViewed);
+            if (image.complete) {
+              if (_this2.imageRendering) {
+                _this2.imageRendering.abort();
+              } else if (_this2.imageInitializing) {
+                _this2.imageInitializing.abort();
+              }
+            } else {
+              // Cancel download to save bandwidth.
+              image.src = '';
+              clean();
+            }
+          }
+        };
+        if (image.complete) {
+          _this2.load();
+        } else {
+          addListener(image, EVENT_LOAD, onLoad = function onLoad() {
+            clean();
+            _this2.load();
+          }, {
+            once: true
+          });
+          addListener(image, EVENT_ERROR, onError = function onError() {
+            clean();
+            if (!isFallback) {
+              var fallbackSrc = img.src;
+              if (fallbackSrc && fallbackSrc !== image.src) {
+                image.src = fallbackSrc;
+                _loadImage(true);
+                return;
+              }
+            }
+            removeClass(image, CLASS_INVISIBLE);
+            if (options.loading) {
+              removeClass(_this2.canvas, CLASS_LOADING);
+            }
+          }, {
+            once: true
+          });
+          if (_this2.timeout) {
+            clearTimeout(_this2.timeout);
           }
-        }, {
-          once: true
-        });
-        if (this.timeout) {
-          clearTimeout(this.timeout);
-        }
 
-        // Make the image visible if it fails to load within 1s
-        this.timeout = setTimeout(function () {
-          removeClass(image, CLASS_INVISIBLE);
-          _this2.timeout = false;
-        }, 1000);
-      }
+          // Make the image visible if it fails to load within 1s
+          _this2.timeout = setTimeout(function () {
+            removeClass(image, CLASS_INVISIBLE);
+            _this2.timeout = false;
+          }, 1000);
+        }
+      };
+      _loadImage();
       return this;
     },
     /**
@@ -1986,13 +2376,11 @@
      * 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: function moveTo(x) {
       var _this3 = this;
       var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : x;
-      var _originalEvent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
       var element = this.element,
         options = this.options,
         imageData = this.imageData;
@@ -2013,6 +2401,8 @@
           y = oldY;
         }
         if (changed) {
+          var originalEvent = this.actionEvent || null;
+          this.actionEvent = null;
           if (isFunction(options.move)) {
             addListener(element, EVENT_MOVE, options.move, {
               once: true
@@ -2023,7 +2413,7 @@
             y: y,
             oldX: oldX,
             oldY: oldY,
-            originalEvent: _originalEvent
+            originalEvent: originalEvent
           }) === false) {
             return this;
           }
@@ -2031,6 +2421,7 @@
           imageData.y = y;
           imageData.left = x;
           imageData.top = y;
+          toggleClass(this.image, CLASS_TRANSITION, isTransitionEnabled(options, 'move'));
           this.moving = true;
           this.renderImage(function () {
             _this3.moving = false;
@@ -2044,7 +2435,7 @@
               y: y,
               oldX: oldX,
               oldY: oldY,
-              originalEvent: _originalEvent
+              originalEvent: originalEvent
             }, {
               cancelable: false
             });
@@ -2075,6 +2466,8 @@
       degree = Number(degree);
       if (isNumber(degree) && this.viewed && !this.played && options.rotatable) {
         var oldDegree = imageData.rotate;
+        var originalEvent = this.actionEvent || null;
+        this.actionEvent = null;
         if (isFunction(options.rotate)) {
           addListener(element, EVENT_ROTATE, options.rotate, {
             once: true
@@ -2082,11 +2475,13 @@
         }
         if (dispatchEvent(element, EVENT_ROTATE, {
           degree: degree,
-          oldDegree: oldDegree
+          oldDegree: oldDegree,
+          originalEvent: originalEvent
         }) === false) {
           return this;
         }
         imageData.rotate = degree;
+        toggleClass(this.image, CLASS_TRANSITION, isTransitionEnabled(options, 'rotate'));
         this.rotating = true;
         this.renderImage(function () {
           _this4.rotating = false;
@@ -2097,7 +2492,8 @@
           }
           dispatchEvent(element, EVENT_ROTATED, {
             degree: degree,
-            oldDegree: oldDegree
+            oldDegree: oldDegree,
+            originalEvent: originalEvent
           }, {
             cancelable: false
           });
@@ -2152,6 +2548,8 @@
           scaleY = oldScaleY;
         }
         if (changed) {
+          var originalEvent = this.actionEvent || null;
+          this.actionEvent = null;
           if (isFunction(options.scale)) {
             addListener(element, EVENT_SCALE, options.scale, {
               once: true
@@ -2161,12 +2559,14 @@
             scaleX: scaleX,
             scaleY: scaleY,
             oldScaleX: oldScaleX,
-            oldScaleY: oldScaleY
+            oldScaleY: oldScaleY,
+            originalEvent: originalEvent
           }) === false) {
             return this;
           }
           imageData.scaleX = scaleX;
           imageData.scaleY = scaleY;
+          toggleClass(this.image, CLASS_TRANSITION, isTransitionEnabled(options, 'scale'));
           this.scaling = true;
           this.renderImage(function () {
             _this5.scaling = false;
@@ -2179,7 +2579,8 @@
               scaleX: scaleX,
               scaleY: scaleY,
               oldScaleX: oldScaleX,
-              oldScaleY: oldScaleY
+              oldScaleY: oldScaleY,
+              originalEvent: originalEvent
             }, {
               cancelable: false
             });
@@ -2193,13 +2594,11 @@
      * @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: function zoom(ratio) {
       var showTooltip = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       var pivot = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-      var _originalEvent = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
       var imageData = this.imageData;
       ratio = Number(ratio);
       if (ratio < 0) {
@@ -2207,7 +2606,7 @@
       } else {
         ratio = 1 + ratio;
       }
-      this.zoomTo(imageData.width * ratio / imageData.naturalWidth, showTooltip, pivot, _originalEvent);
+      this.zoomTo(imageData.width * ratio / imageData.naturalWidth, showTooltip, pivot);
       return this;
     },
     /**
@@ -2215,16 +2614,14 @@
      * @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: function zoomTo(ratio) {
       var _this6 = this;
       var showTooltip = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       var pivot = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-      var _originalEvent = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
-      var _zoomable = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+      var _zoomable = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
       var element = this.element,
         options = this.options,
         pointers = this.pointers,
@@ -2238,12 +2635,14 @@
       ratio = Math.max(0, ratio);
       if (isNumber(ratio) && this.viewed && !this.played && (_zoomable || options.zoomable)) {
         if (!_zoomable) {
-          var minZoomRatio = Math.max(0.01, options.minZoomRatio);
-          var maxZoomRatio = Math.min(100, options.maxZoomRatio);
+          var minZoomRatio = Math.max(0.01, isFunction(options.minZoomRatio) ? options.minZoomRatio.call(this, this.image, imageData) : options.minZoomRatio);
+          var 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) {
+        var 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;
@@ -2271,16 +2670,16 @@
         if (dispatchEvent(element, EVENT_ZOOM, {
           ratio: ratio,
           oldRatio: oldRatio,
-          originalEvent: _originalEvent
+          originalEvent: originalEvent
         }) === false) {
           return this;
         }
         this.zooming = true;
-        if (_originalEvent) {
+        if (originalEvent && originalEvent.type !== EVENT_CLICK) {
           var offset = getOffset(this.viewer);
           var 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
@@ -2300,6 +2699,7 @@
         imageData.height = newHeight;
         imageData.oldRatio = oldRatio;
         imageData.ratio = ratio;
+        toggleClass(this.image, CLASS_TRANSITION, isTransitionEnabled(options, 'zoom'));
         this.renderImage(function () {
           _this6.zooming = false;
           if (isFunction(options.zoomed)) {
@@ -2310,7 +2710,7 @@
           dispatchEvent(element, EVENT_ZOOMED, {
             ratio: ratio,
             oldRatio: oldRatio,
-            originalEvent: _originalEvent
+            originalEvent: originalEvent
           }, {
             cancelable: false
           });
@@ -2334,12 +2734,16 @@
       }
       var element = this.element,
         options = this.options;
+      var originalEvent = this.actionEvent || null;
+      this.actionEvent = null;
       if (isFunction(options.play)) {
         addListener(element, EVENT_PLAY, options.play, {
           once: true
         });
       }
-      if (dispatchEvent(element, EVENT_PLAY) === false) {
+      if (dispatchEvent(element, EVENT_PLAY, {
+        originalEvent: originalEvent
+      }) === false) {
         return this;
       }
       var player = this.player;
@@ -2353,16 +2757,16 @@
         this.requestFullscreen(fullscreen);
       }
       addClass(player, CLASS_SHOW);
-      forEach(this.items, function (item, i) {
-        var img = item.querySelector('img');
+      player.removeAttribute('aria-hidden');
+      forEach(this.images, function (originalImage, i) {
         var image = document.createElement('img');
-        image.src = getData(img, 'originalUrl');
-        image.alt = img.getAttribute('alt');
-        image.referrerPolicy = img.referrerPolicy;
+        image.src = _this7.getImageURL(originalImage) || originalImage.src;
+        image.alt = originalImage.alt || '';
+        image.referrerPolicy = originalImage.referrerPolicy;
         total += 1;
         addClass(image, CLASS_FADE);
-        toggleClass(image, CLASS_TRANSITION, options.transition);
-        if (hasClass(item, CLASS_ACTIVE)) {
+        toggleClass(image, CLASS_TRANSITION, isTransitionEnabled(options, 'play'));
+        if (i === _this7.index) {
           addClass(image, CLASS_IN);
           index = i;
         }
@@ -2375,31 +2779,68 @@
       if (isNumber(options.interval) && options.interval > 0) {
         var _prev = function prev() {
           clearTimeout(_this7.playing.timeout);
+          var currentOriginalEvent = _this7.actionEvent || null;
+          _this7.actionEvent = null;
+          var 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: _this7.images[prevIndex],
+            index: prevIndex,
+            image: list[prevIndex],
+            originalEvent: currentOriginalEvent
+          }) === false) {
+            _this7.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);
-          _this7.playing.timeout = setTimeout(_prev, options.interval);
+          _this7.playing.timeout = options.autoplay ? setTimeout(_prev, options.interval) : null;
         };
         var _next = function next() {
           clearTimeout(_this7.playing.timeout);
+          var currentOriginalEvent = _this7.actionEvent || null;
+          _this7.actionEvent = null;
+          var 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: _this7.images[nextIndex],
+            index: nextIndex,
+            image: list[nextIndex],
+            originalEvent: currentOriginalEvent
+          }) === false) {
+            _this7.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);
-          _this7.playing.timeout = setTimeout(_next, options.interval);
+          _this7.playing.timeout = options.autoplay ? setTimeout(_next, options.interval) : null;
         };
         if (total > 1) {
           this.playing = {
             prev: _prev,
             next: _next,
-            timeout: setTimeout(_next, options.interval)
+            timeout: options.autoplay ? setTimeout(_next, options.interval) : null
           };
         }
       }
       return this;
     },
-    // Stop play
+    /**
+     * Stop play
+     * @returns {Viewer} this
+     */
     stop: function stop() {
       var _this8 = this;
       if (!this.played) {
@@ -2407,12 +2848,16 @@
       }
       var element = this.element,
         options = this.options;
+      var originalEvent = this.actionEvent || null;
+      this.actionEvent = null;
       if (isFunction(options.stop)) {
         addListener(element, EVENT_STOP, options.stop, {
           once: true
         });
       }
-      if (dispatchEvent(element, EVENT_STOP) === false) {
+      if (dispatchEvent(element, EVENT_STOP, {
+        originalEvent: originalEvent
+      }) === false) {
         return this;
       }
       var player = this.player;
@@ -2423,6 +2868,7 @@
         removeListener(image, EVENT_LOAD, _this8.onLoadWhenPlay);
       });
       removeClass(player, CLASS_SHOW);
+      player.setAttribute('aria-hidden', true);
       player.innerHTML = '';
       this.exitFullscreen();
       return this;
@@ -2440,11 +2886,9 @@
       this.fulled = true;
       this.open();
       addClass(this.button, CLASS_FULLSCREEN_EXIT);
-      if (options.transition) {
-        removeClass(list, CLASS_TRANSITION);
-        if (this.viewed) {
-          removeClass(image, CLASS_TRANSITION);
-        }
+      removeClass(list, CLASS_TRANSITION);
+      if (this.viewed) {
+        removeClass(image, CLASS_TRANSITION);
       }
       addClass(viewer, CLASS_FIXED);
       viewer.setAttribute('role', 'dialog');
@@ -2462,14 +2906,7 @@
       this.renderList();
       if (this.viewed) {
         this.initImage(function () {
-          _this9.renderImage(function () {
-            if (options.transition) {
-              setTimeout(function () {
-                addClass(image, CLASS_TRANSITION);
-                addClass(list, CLASS_TRANSITION);
-              }, 0);
-            }
-          });
+          _this9.renderImage();
         });
       }
       return this;
@@ -2487,11 +2924,9 @@
       this.fulled = false;
       this.close();
       removeClass(this.button, CLASS_FULLSCREEN_EXIT);
-      if (options.transition) {
-        removeClass(list, CLASS_TRANSITION);
-        if (this.viewed) {
-          removeClass(image, CLASS_TRANSITION);
-        }
+      removeClass(list, CLASS_TRANSITION);
+      if (this.viewed) {
+        removeClass(image, CLASS_TRANSITION);
       }
       if (options.focus) {
         this.clearEnforceFocus();
@@ -2508,14 +2943,7 @@
       this.renderList();
       if (this.viewed) {
         this.initImage(function () {
-          _this0.renderImage(function () {
-            if (options.transition) {
-              setTimeout(function () {
-                addClass(image, CLASS_TRANSITION);
-                addClass(list, CLASS_TRANSITION);
-              }, 0);
-            }
-          });
+          _this0.renderImage();
         });
       }
       return this;
@@ -2531,7 +2959,7 @@
       }
       tooltipBox.textContent = "".concat(Math.round(imageData.ratio * 100), "%");
       if (!this.tooltipping) {
-        if (options.transition) {
+        if (isTransitionEnabled(options, 'tooltip')) {
           if (this.fading) {
             dispatchEvent(tooltipBox, EVENT_TRANSITION_END);
           }
@@ -2551,7 +2979,7 @@
         clearTimeout(this.tooltipping);
       }
       this.tooltipping = setTimeout(function () {
-        if (options.transition) {
+        if (isTransitionEnabled(options, 'tooltip')) {
           addListener(tooltipBox, EVENT_TRANSITION_END, function () {
             removeClass(tooltipBox, CLASS_SHOW);
             removeClass(tooltipBox, CLASS_FADE);
@@ -2573,15 +3001,13 @@
     },
     /**
      * Toggle the image size between its current size and natural size
-     * @param {Event} [_originalEvent=null] - The original event if any.
      * @returns {Viewer} this
      */
     toggle: function toggle() {
-      var _originalEvent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
       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;
     },
@@ -2593,12 +3019,19 @@
       }
       return this;
     },
-    // Update viewer when images changed
-    update: function update() {
+    /**
+     * Update the viewer when images or options changed.
+     * @param {Object} [updateOptions] - The options to update.
+     * @returns {Viewer} this
+     */
+    update: function update(updateOptions) {
       var _this10 = this;
       var element = this.element,
         options = this.options,
         isImg = this.isImg;
+      if (isPlainObject(updateOptions)) {
+        assign(options, updateOptions);
+      }
 
       // Destroy viewer if the target image was deleted
       if (isImg && !element.parentNode) {
@@ -2621,18 +3054,19 @@
       this.length = images.length;
       if (this.ready) {
         var changedIndexes = [];
-        forEach(this.items, function (item, i) {
+        forEach(this.items, function (item) {
           var img = item.querySelector('img');
-          var image = images[i];
+          var index = Number(getData(item, 'index'));
+          var image = images[index];
           if (image && img) {
             if (image.src !== img.src
 
             // Title changed (#408)
             || image.alt !== img.alt) {
-              changedIndexes.push(i);
+              changedIndexes.push(index);
             }
           } else {
-            changedIndexes.push(i);
+            changedIndexes.push(index);
           }
         });
         setStyle(this.list, {
@@ -2647,7 +3081,7 @@
                 this.viewed = false;
                 this.view(Math.max(Math.min(this.index - changedIndex, this.length - 1), 0));
               } else {
-                var activeItem = this.items[this.index];
+                var activeItem = this.getItem(this.index);
 
                 // Reactivate the current viewing item after reset the list.
                 addClass(activeItem, CLASS_ACTIVE);
@@ -2788,9 +3222,12 @@
           once: true
         });
       }
-      if (dispatchEvent(element, EVENT_SHOWN) === false) {
+      if (dispatchEvent(element, EVENT_SHOWN, {
+        originalEvent: this.showOriginalEvent || null
+      }) === false) {
         return;
       }
+      this.showOriginalEvent = null;
       if (this.ready && this.isShown && !this.hiding) {
         this.view(this.index);
       }
@@ -2827,13 +3264,16 @@
             once: true
           });
         }
-        dispatchEvent(element, EVENT_HIDDEN, null, {
+        dispatchEvent(element, EVENT_HIDDEN, {
+          originalEvent: this.hideOriginalEvent || null
+        }, {
           cancelable: false
         });
+        this.hideOriginalEvent = null;
       }
     },
     requestFullscreen: function requestFullscreen(options) {
-      var document = this.element.ownerDocument;
+      var document = this.ownerDocument;
       if (this.fulled && !(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement)) {
         var documentElement = document.documentElement;
 
@@ -2855,7 +3295,7 @@
       }
     },
     exitFullscreen: function exitFullscreen() {
-      var document = this.element.ownerDocument;
+      var document = this.ownerDocument;
       if (this.fulled && (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement)) {
         // Document.exitFullscreen()
         if (document.exitFullscreen) {
@@ -2885,13 +3325,49 @@
         case ACTION_MOVE:
           if (offsetX !== 0 || offsetY !== 0) {
             this.pointerMoved = true;
-            this.move(offsetX, offsetY, event);
+            this.actionEvent = event;
+            this.move(offsetX, offsetY);
           }
           break;
 
         // Zoom the current image
         case ACTION_ZOOM:
-          this.zoom(getMaxZoomRatio(pointers), false, null, event);
+          if (options.zoomable && options.zoomOnTouch) {
+            var zoomRatio = getMaxZoomRatio(pointers);
+            if (zoomRatio !== 0) {
+              this.actionEvent = event;
+              this.zoom(zoomRatio);
+            }
+          }
+          break;
+
+        // Rotate the current image
+        case ACTION_ROTATE:
+          if (options.rotatable && options.rotateOnTouch) {
+            var rotateDegree = getMaxRotateDegree(pointers);
+            if (rotateDegree !== 0) {
+              this.actionEvent = event;
+              this.rotate(rotateDegree);
+            }
+          }
+          break;
+
+        // Transform the current image
+        case ACTION_TRANSFORM:
+          if (options.zoomable && options.zoomOnTouch) {
+            var _zoomRatio = getMaxZoomRatio(pointers);
+            if (_zoomRatio !== 0) {
+              this.actionEvent = event;
+              this.zoom(_zoomRatio);
+            }
+          }
+          if (options.rotatable && options.rotateOnTouch) {
+            var _rotateDegree = getMaxRotateDegree(pointers);
+            if (_rotateDegree !== 0) {
+              this.actionEvent = event;
+              this.rotate(_rotateDegree);
+            }
+          }
           break;
         case ACTION_SWITCH:
           {
@@ -2900,6 +3376,7 @@
             if (absoluteOffsetX > 1 && absoluteOffsetX > Math.abs(offsetY)) {
               // Empty `pointers` as `touchend` event will not be fired after swiped in iOS browsers.
               this.pointers = {};
+              this.actionEvent = event;
               if (offsetX > 1) {
                 this.prev(options.loop);
               } else if (offsetX < -1) {
@@ -2933,18 +3410,20 @@
   var Viewer = /*#__PURE__*/function () {
     /**
      * Create a new Viewer.
-     * @param {Element} element - The target element for viewing.
+     * @param {Element} element - The target image, or a container of images, to view.
      * @param {Object} [options={}] - The configuration options.
      */
     function Viewer(element) {
       var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
       _classCallCheck(this, Viewer);
-      if (!element || element.nodeType !== 1) {
+      if (!element || element.nodeType !== 1 && element.nodeType !== 11) {
         throw new Error('The first argument is required and must be an element.');
       }
       this.element = element;
+      this.ownerDocument = element.ownerDocument || element.host.ownerDocument;
       this.options = assign({}, DEFAULTS, isPlainObject(options) && options);
       this.action = false;
+      this.actionEvent = null;
       this.fading = false;
       this.fulled = false;
       this.hiding = false;
@@ -3004,7 +3483,7 @@
         this.initBody();
 
         // Override `transition` option if it is not supported
-        if (isUndefined(document.createElement(NAMESPACE).style.transition)) {
+        if (isUndefined(this.ownerDocument.createElement(NAMESPACE).style.transition)) {
           options.transition = false;
         }
         if (options.inline) {
@@ -3058,9 +3537,10 @@
             }
           });
         } else {
-          addListener(element, EVENT_CLICK, this.onElementClick = function (_ref) {
-            var target = _ref.target;
+          addListener(element, EVENT_CLICK, this.onElementClick = function (event) {
+            var target = event.target;
             if (target.localName === 'img' && (!isFunction(options.filter) || options.filter.call(_this, target))) {
+              _this.actionEvent = event;
               _this.view(_this.images.indexOf(target));
             }
           });
@@ -3070,6 +3550,7 @@
             if (target.localName === 'img' && (key === 'Enter' || key === ' ')) {
               event.preventDefault();
               if (!isFunction(options.filter) || options.filter.call(_this, target)) {
+                _this.actionEvent = event;
                 _this.view(_this.images.indexOf(target));
               }
             }
@@ -3091,6 +3572,7 @@
         var title = viewer.querySelector(".".concat(NAMESPACE, "-title"));
         var toolbar = viewer.querySelector(".".concat(NAMESPACE, "-toolbar"));
         var navbar = viewer.querySelector(".".concat(NAMESPACE, "-navbar"));
+        var navigation = viewer.querySelector(".".concat(NAMESPACE, "-navigation"));
         var button = viewer.querySelector(".".concat(NAMESPACE, "-button"));
         var canvas = viewer.querySelector(".".concat(NAMESPACE, "-canvas"));
         this.parent = parent;
@@ -3098,19 +3580,64 @@
         this.title = title;
         this.toolbar = toolbar;
         this.navbar = navbar;
+        this.navigation = navigation;
         this.button = button;
         this.canvas = canvas;
         this.footer = viewer.querySelector(".".concat(NAMESPACE, "-footer"));
+        this.magnifier = viewer.querySelector(".".concat(NAMESPACE, "-magnifier"));
+        this.magnifierImage = viewer.querySelector(".".concat(NAMESPACE, "-magnifier-image"));
         this.tooltipBox = viewer.querySelector(".".concat(NAMESPACE, "-tooltip"));
         this.player = viewer.querySelector(".".concat(NAMESPACE, "-player"));
         this.list = viewer.querySelector(".".concat(NAMESPACE, "-list"));
         viewer.id = "".concat(NAMESPACE).concat(this.id);
         title.id = "".concat(NAMESPACE, "Title").concat(this.id);
         addClass(title, !options.title ? CLASS_HIDE : getResponsiveClass(Array.isArray(options.title) ? options.title[0] : options.title));
-        addClass(navbar, !options.navbar ? CLASS_HIDE : getResponsiveClass(options.navbar));
+        if (options.title) {
+          title.removeAttribute('aria-hidden');
+        }
+        var navbarOptions = isPlainObject(options.navbar) ? options.navbar : {};
+        var navbarShow = options.navbar;
+        var navbarSize = !isUndefined(navbarOptions.size) ? navbarOptions.size : options.navbar;
+        if (isPlainObject(options.navbar)) {
+          navbarShow = !isUndefined(navbarOptions.show) ? navbarOptions.show : true;
+        }
+        addClass(navbar, !navbarShow ? CLASS_HIDE : getResponsiveClass(navbarShow));
+        if (navbarShow) {
+          navbar.removeAttribute('aria-hidden');
+        }
+        if (['small', 'medium', 'large'].indexOf(navbarSize) !== -1) {
+          addClass(navbar, "".concat(NAMESPACE, "-").concat(navbarSize));
+        }
+        if (isPlainObject(options.navigation)) {
+          forEach(navigation.querySelectorAll('[role="button"]'), function (item) {
+            var name = getData(item, DATA_ACTION);
+            var value = options.navigation[name];
+            var deep = isPlainObject(value);
+            var show = deep && !isUndefined(value.show) ? value.show : value;
+            var size = deep && !isUndefined(value.size) ? value.size : value;
+            toggleClass(item, CLASS_HIDE, !show);
+            if (isNumber(show)) {
+              addClass(item, getResponsiveClass(show));
+            }
+            if (['small', 'large'].indexOf(size) !== -1) {
+              addClass(item, "".concat(NAMESPACE, "-").concat(size));
+            }
+          });
+        } else {
+          addClass(navigation, !options.navigation ? CLASS_HIDE : getResponsiveClass(options.navigation));
+        }
+        if (options.navigation) {
+          navigation.removeAttribute('aria-hidden');
+        }
         toggleClass(button, CLASS_HIDE, !options.button);
+        if (options.button) {
+          button.removeAttribute('aria-hidden');
+        }
         if (options.keyboard) {
           button.setAttribute('tabindex', 0);
+          forEach(navigation.querySelectorAll('[role="button"]'), function (item) {
+            item.setAttribute('tabindex', 0);
+          });
         }
         if (options.backdrop) {
           addClass(viewer, "".concat(NAMESPACE, "-backdrop"));
@@ -3133,6 +3660,7 @@
           if (!custom) {
             addClass(toolbar, getResponsiveClass(options.toolbar));
           }
+          toolbar.removeAttribute('aria-hidden');
           forEach(custom ? options.toolbar : BUTTONS, function (value, index) {
             var deep = custom && isPlainObject(value);
             var name = custom ? hyphenate(index) : value;
@@ -3168,6 +3696,11 @@
         } else {
           addClass(toolbar, CLASS_HIDE);
         }
+        if (options.title || navbarShow || options.toolbar) {
+          this.footer.removeAttribute('aria-hidden');
+        } else {
+          addClass(this.footer, CLASS_HIDE);
+        }
         if (!options.rotatable) {
           var rotates = toolbar.querySelectorAll('li[class*="rotate"]');
           addClass(rotates, CLASS_INVISIBLE);
@@ -3196,7 +3729,7 @@
           });
           var container = options.container;
           if (isString(container)) {
-            container = element.ownerDocument.querySelector(container);
+            container = this.ownerDocument.querySelector(container);
           }
           if (!container) {
             container = this.body;
@@ -3224,14 +3757,15 @@
       }
 
       /**
-       * Get the no conflict viewer class.
-       * @returns {Viewer} The viewer class.
+       * Create a new Viewer instance.
+       * @param {Element} element - The target image, or a container of images, to view.
+       * @param {Object} [options={}] - The configuration options.
+       * @returns {Viewer} A new Viewer instance.
        */
     }], [{
-      key: "noConflict",
-      value: function noConflict() {
-        window.Viewer = AnotherViewer;
-        return Viewer;
+      key: "create",
+      value: function create(element, options) {
+        return new Viewer(element, options);
       }
 
       /**
@@ -3243,6 +3777,17 @@
       value: function setDefaults(options) {
         assign(DEFAULTS, isPlainObject(options) && options);
       }
+
+      /**
+       * Get the no conflict viewer class.
+       * @returns {Viewer} The viewer class.
+       */
+    }, {
+      key: "noConflict",
+      value: function noConflict() {
+        window.Viewer = AnotherViewer;
+        return Viewer;
+      }
     }]);
   }();
   assign(Viewer.prototype, render, events, handlers, methods, others);