viewerjs 1.12.0 → 1.14.0

package/dist/viewer.esm.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 _classCallCheck(a, n) {
@@ -89,9 +89,14 @@ var DEFAULTS = {
   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}
@@ -143,6 +148,11 @@ var DEFAULTS = {
    * @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}
@@ -168,6 +178,11 @@ var DEFAULTS = {
    * @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}
@@ -183,11 +198,26 @@ var DEFAULTS = {
    * @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}
@@ -204,15 +234,33 @@ var DEFAULTS = {
    */
   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.
@@ -226,7 +274,7 @@ var DEFAULTS = {
   tooltip: true,
   /**
    * Enable CSS3 Transition for some special elements.
-   * @type {boolean}
+    * @type {boolean | Object}
    */
   transition: true,
   /**
@@ -246,12 +294,12 @@ var DEFAULTS = {
   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,
   /**
@@ -279,10 +327,11 @@ var DEFAULTS = {
   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 : {};
@@ -292,7 +341,9 @@ var NAMESPACE = 'viewer';
 
 // Actions
 var ACTION_MOVE = 'move';
+var ACTION_ROTATE = 'rotate';
 var ACTION_SWITCH = 'switch';
+var ACTION_TRANSFORM = 'transform';
 var ACTION_ZOOM = 'zoom';
 
 // Classes
@@ -326,11 +377,14 @@ var EVENT_TOUCH_END = IS_TOUCH_DEVICE ? 'touchend touchcancel' : 'mouseup';
 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';
@@ -349,6 +403,7 @@ var EVENT_SCALED = 'scaled';
 var EVENT_ZOOM = 'zoom';
 var EVENT_ZOOMED = 'zoomed';
 var EVENT_PLAY = 'play';
+var EVENT_PLAYING = 'playing';
 var EVENT_STOP = 'stop';
 
 // Data keys
@@ -368,6 +423,30 @@ var BUTTONS = ['zoom-in', 'zoom-out', 'one-to-one', 'reset', 'prev', 'play', 'ne
 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.
@@ -454,6 +533,32 @@ function forEach(data, callback) {
   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.
@@ -783,10 +888,8 @@ function getTransforms(_ref) {
   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';
@@ -832,12 +935,7 @@ function getImageNaturalSizes(image, options, callback) {
       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
@@ -894,6 +992,34 @@ function getMaxZoomRatio(pointers) {
   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.
@@ -946,7 +1072,7 @@ var render = {
     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;
@@ -982,26 +1108,37 @@ var render = {
   },
   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;
         }
@@ -1019,6 +1156,13 @@ var render = {
       }
     });
     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;
@@ -1045,7 +1189,7 @@ var render = {
         once: true
       });
     });
-    if (options.transition) {
+    if (isTransitionEnabled(options, 'view')) {
       addListener(element, EVENT_VIEWED, function () {
         addClass(list, CLASS_TRANSITION);
       }, {
@@ -1053,9 +1197,20 @@ var render = {
       });
     }
   },
+  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;
     }
@@ -1066,9 +1221,9 @@ var render = {
 
     // 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() {
@@ -1154,8 +1309,23 @@ var render = {
       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();
@@ -1191,20 +1361,28 @@ var events = {
     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));
     }
@@ -1213,20 +1391,28 @@ var events = {
     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);
     }
@@ -1248,6 +1434,7 @@ var handlers = {
     if (IS_TOUCH_DEVICE && event.isTrusted && target === this.canvas) {
       clearTimeout(this.clickCanvasTimeout);
     }
+    this.actionEvent = event;
     switch (action) {
       case 'mix':
         if (this.played) {
@@ -1318,7 +1505,8 @@ var handlers = {
       }
 
       // 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() {
@@ -1339,10 +1527,13 @@ var handlers = {
     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
@@ -1351,10 +1542,12 @@ var handlers = {
         dispatchEvent(element, EVENT_VIEWED, {
           originalImage: _this.images[index],
           index: index,
-          image: image
+          image: image,
+          originalEvent: _this.viewOriginalEvent || null
         }, {
           cancelable: false
         });
+        _this.viewOriginalEvent = null;
       });
     });
   },
@@ -1394,6 +1587,7 @@ var handlers = {
       return;
     }
     var keyCode = event.keyCode || event.which || event.charCode;
+    this.actionEvent = event;
     switch (keyCode) {
       // Enter
       case 13:
@@ -1481,6 +1675,88 @@ var handlers = {
       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;
@@ -1509,12 +1785,14 @@ var handlers = {
       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;
@@ -1554,13 +1832,14 @@ var handlers = {
       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) {
@@ -1609,6 +1888,10 @@ var handlers = {
     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 () {
@@ -1630,12 +1913,17 @@ var handlers = {
   },
   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;
     }
@@ -1643,7 +1931,6 @@ var handlers = {
     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;
@@ -1652,7 +1939,63 @@ var handlers = {
     } 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;
+    }
   }
 };
 
@@ -1675,12 +2018,17 @@ var methods = {
       }
       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) {
@@ -1694,7 +2042,7 @@ var methods = {
     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() {
@@ -1729,12 +2077,17 @@ var methods = {
     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) {
@@ -1752,7 +2105,7 @@ var methods = {
       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) {
@@ -1785,7 +2138,7 @@ var methods = {
         addListener(image, EVENT_TRANSITION_END, onImageTransitionEnd, {
           once: true
         });
-        this.zoomTo(0, false, null, null, true);
+        this.zoomTo(0, false, null, true);
       } else {
         onImageTransitionEnd();
       }
@@ -1802,10 +2155,14 @@ var methods = {
   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();
@@ -1817,17 +2174,16 @@ var methods = {
       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)) {
@@ -1838,11 +2194,13 @@ var methods = {
     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');
@@ -1874,63 +2232,95 @@ var methods = {
       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;
   },
   /**
@@ -1980,13 +2370,11 @@ var methods = {
    * 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;
@@ -2007,6 +2395,8 @@ var methods = {
         y = oldY;
       }
       if (changed) {
+        var originalEvent = this.actionEvent || null;
+        this.actionEvent = null;
         if (isFunction(options.move)) {
           addListener(element, EVENT_MOVE, options.move, {
             once: true
@@ -2017,7 +2407,7 @@ var methods = {
           y: y,
           oldX: oldX,
           oldY: oldY,
-          originalEvent: _originalEvent
+          originalEvent: originalEvent
         }) === false) {
           return this;
         }
@@ -2025,6 +2415,7 @@ var methods = {
         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;
@@ -2038,7 +2429,7 @@ var methods = {
             y: y,
             oldX: oldX,
             oldY: oldY,
-            originalEvent: _originalEvent
+            originalEvent: originalEvent
           }, {
             cancelable: false
           });
@@ -2069,6 +2460,8 @@ var methods = {
     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
@@ -2076,11 +2469,13 @@ var methods = {
       }
       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;
@@ -2091,7 +2486,8 @@ var methods = {
         }
         dispatchEvent(element, EVENT_ROTATED, {
           degree: degree,
-          oldDegree: oldDegree
+          oldDegree: oldDegree,
+          originalEvent: originalEvent
         }, {
           cancelable: false
         });
@@ -2146,6 +2542,8 @@ var methods = {
         scaleY = oldScaleY;
       }
       if (changed) {
+        var originalEvent = this.actionEvent || null;
+        this.actionEvent = null;
         if (isFunction(options.scale)) {
           addListener(element, EVENT_SCALE, options.scale, {
             once: true
@@ -2155,12 +2553,14 @@ var methods = {
           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;
@@ -2173,7 +2573,8 @@ var methods = {
             scaleX: scaleX,
             scaleY: scaleY,
             oldScaleX: oldScaleX,
-            oldScaleY: oldScaleY
+            oldScaleY: oldScaleY,
+            originalEvent: originalEvent
           }, {
             cancelable: false
           });
@@ -2187,13 +2588,11 @@ var methods = {
    * @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) {
@@ -2201,7 +2600,7 @@ var methods = {
     } 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;
   },
   /**
@@ -2209,16 +2608,14 @@ var methods = {
    * @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,
@@ -2232,12 +2629,14 @@ var methods = {
     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;
@@ -2265,16 +2664,16 @@ var methods = {
       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
@@ -2294,6 +2693,7 @@ var methods = {
       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)) {
@@ -2304,7 +2704,7 @@ var methods = {
         dispatchEvent(element, EVENT_ZOOMED, {
           ratio: ratio,
           oldRatio: oldRatio,
-          originalEvent: _originalEvent
+          originalEvent: originalEvent
         }, {
           cancelable: false
         });
@@ -2328,12 +2728,16 @@ var methods = {
     }
     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;
@@ -2347,16 +2751,16 @@ var methods = {
       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;
       }
@@ -2369,31 +2773,68 @@ var methods = {
     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) {
@@ -2401,12 +2842,16 @@ var methods = {
     }
     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;
@@ -2417,6 +2862,7 @@ var methods = {
       removeListener(image, EVENT_LOAD, _this8.onLoadWhenPlay);
     });
     removeClass(player, CLASS_SHOW);
+    player.setAttribute('aria-hidden', true);
     player.innerHTML = '';
     this.exitFullscreen();
     return this;
@@ -2434,11 +2880,9 @@ var methods = {
     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');
@@ -2456,14 +2900,7 @@ var methods = {
     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;
@@ -2481,11 +2918,9 @@ var methods = {
     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();
@@ -2502,14 +2937,7 @@ var methods = {
     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;
@@ -2525,7 +2953,7 @@ var methods = {
     }
     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);
         }
@@ -2545,7 +2973,7 @@ var methods = {
       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);
@@ -2567,15 +2995,13 @@ var methods = {
   },
   /**
    * 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;
   },
@@ -2587,12 +3013,19 @@ var methods = {
     }
     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) {
@@ -2615,18 +3048,19 @@ var methods = {
     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, {
@@ -2641,7 +3075,7 @@ var methods = {
               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);
@@ -2782,9 +3216,12 @@ var others = {
         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);
     }
@@ -2821,13 +3258,16 @@ var others = {
           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;
 
@@ -2849,7 +3289,7 @@ var others = {
     }
   },
   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) {
@@ -2879,13 +3319,49 @@ var others = {
       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:
         {
@@ -2894,6 +3370,7 @@ var others = {
           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) {
@@ -2927,18 +3404,20 @@ var getUniqueID = function (id) {
 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;
@@ -2998,7 +3477,7 @@ var Viewer = /*#__PURE__*/function () {
       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) {
@@ -3052,9 +3531,10 @@ var Viewer = /*#__PURE__*/function () {
           }
         });
       } 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));
           }
         });
@@ -3064,6 +3544,7 @@ var Viewer = /*#__PURE__*/function () {
           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));
             }
           }
@@ -3085,6 +3566,7 @@ var Viewer = /*#__PURE__*/function () {
       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;
@@ -3092,19 +3574,64 @@ var Viewer = /*#__PURE__*/function () {
       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"));
@@ -3127,6 +3654,7 @@ var Viewer = /*#__PURE__*/function () {
         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;
@@ -3162,6 +3690,11 @@ var Viewer = /*#__PURE__*/function () {
       } 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);
@@ -3190,7 +3723,7 @@ var Viewer = /*#__PURE__*/function () {
         });
         var container = options.container;
         if (isString(container)) {
-          container = element.ownerDocument.querySelector(container);
+          container = this.ownerDocument.querySelector(container);
         }
         if (!container) {
           container = this.body;
@@ -3218,14 +3751,15 @@ var Viewer = /*#__PURE__*/function () {
     }
 
     /**
-     * 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);
     }
 
     /**
@@ -3237,6 +3771,17 @@ var Viewer = /*#__PURE__*/function () {
     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);