viewerjs 1.12.0 → 1.13.0

package/dist/viewer.common.js

@@ -1,11 +1,11 @@
 /*!
- * Viewer.js v1.12.0
+ * Viewer.js v1.13.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-06T10:39:44.170Z
  */
 
 'use strict';
@@ -91,9 +91,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}
@@ -145,6 +150,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}
@@ -170,6 +180,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}
@@ -185,11 +200,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}
@@ -205,6 +235,11 @@ var DEFAULTS = {
    * @type {boolean}
    */
   zoomOnTouch: true,
+  /**
+   * Enable to zoom the current image by gesture.
+   * @type {boolean}
+   */
+  zoomOnGesture: true,
   /**
    * Enable to zoom the image by wheeling mouse.
    * @type {boolean}
@@ -228,7 +263,7 @@ var DEFAULTS = {
   tooltip: true,
   /**
    * Enable CSS3 Transition for some special elements.
-   * @type {boolean}
+    * @type {boolean | Object}
    */
   transition: true,
   /**
@@ -248,12 +283,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,
   /**
@@ -284,7 +319,7 @@ var DEFAULTS = {
   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">' + '<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">' + '<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 IS_BROWSER = typeof window !== 'undefined' && typeof window.document !== 'undefined';
 var WINDOW = IS_BROWSER ? window : {};
@@ -294,7 +329,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
@@ -328,11 +365,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';
@@ -456,6 +496,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.
@@ -785,10 +851,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';
@@ -834,12 +898,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
@@ -896,6 +955,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.
@@ -948,7 +1035,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;
@@ -984,26 +1071,34 @@ 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');
+    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;
         }
@@ -1021,6 +1116,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;
@@ -1047,7 +1149,7 @@ var render = {
         once: true
       });
     });
-    if (options.transition) {
+    if (isTransitionEnabled(options, 'view')) {
       addListener(element, EVENT_VIEWED, function () {
         addClass(list, CLASS_TRANSITION);
       }, {
@@ -1055,9 +1157,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;
     }
@@ -1068,9 +1181,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() {
@@ -1156,8 +1269,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();
@@ -1193,9 +1321,12 @@ 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));
@@ -1207,6 +1338,11 @@ var events = {
         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));
     }
@@ -1215,9 +1351,12 @@ 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);
@@ -1229,6 +1368,11 @@ var events = {
         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);
     }
@@ -1341,10 +1485,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
@@ -1483,6 +1630,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;
@@ -1511,12 +1740,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;
@@ -1556,13 +1787,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) {
@@ -1611,6 +1843,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 () {
@@ -1636,6 +1872,9 @@ var handlers = {
       return;
     }
     event.preventDefault();
+    if (this.gesturing) {
+      return;
+    }
 
     // Limit wheel speed to prevent zoom too fast
     if (this.wheeling) {
@@ -1655,6 +1894,43 @@ var handlers = {
       delta = event.detail > 0 ? 1 : -1;
     }
     this.zoom(-delta * ratio, true, null, event);
+  },
+  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.zoom(ratio >= 1 ? ratio - 1 : 1 - 1 / ratio, false, null, event);
+          }
+          if (options.rotatable && options.rotateOnGesture && isNumber(rotation)) {
+            this.gestureRotation = rotation;
+            if (degree !== 0) {
+              this.rotate(degree);
+            }
+          }
+          break;
+        }
+      case 'gestureend':
+        this.gesturing = false;
+        this.gestureScale = 1;
+        this.gestureRotation = 0;
+        break;
+    }
   }
 };
 
@@ -1696,7 +1972,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() {
@@ -1736,7 +2012,7 @@ var methods = {
         once: true
       });
     }
-    if (dispatchEvent(element, EVENT_HIDE) === false) {
+    if (dispatchEvent(element, EVENT_HIDE) === false || this.destroyed) {
       return this;
     }
     if (this.showing) {
@@ -1754,7 +2030,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) {
@@ -1804,8 +2080,9 @@ 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;
     }
     if (!this.isShown) {
@@ -1819,17 +2096,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)) {
@@ -1844,7 +2120,8 @@ var methods = {
     }) === 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');
@@ -1876,6 +2153,25 @@ 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, ")"));
+
+      // 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;
+        }
+      }
     };
     var onLoad;
     var onError;
@@ -2027,6 +2323,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;
@@ -2083,6 +2380,7 @@ var methods = {
         return this;
       }
       imageData.rotate = degree;
+      toggleClass(this.image, CLASS_TRANSITION, isTransitionEnabled(options, 'rotate'));
       this.rotating = true;
       this.renderImage(function () {
         _this4.rotating = false;
@@ -2163,6 +2461,7 @@ var methods = {
         }
         imageData.scaleX = scaleX;
         imageData.scaleY = scaleY;
+        toggleClass(this.image, CLASS_TRANSITION, isTransitionEnabled(options, 'scale'));
         this.scaling = true;
         this.renderImage(function () {
           _this5.scaling = false;
@@ -2234,8 +2533,8 @@ 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) {
@@ -2296,6 +2595,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)) {
@@ -2349,16 +2649,15 @@ var methods = {
       this.requestFullscreen(fullscreen);
     }
     addClass(player, CLASS_SHOW);
-    forEach(this.items, function (item, i) {
-      var img = item.querySelector('img');
+    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,7 +2674,7 @@ var methods = {
         index -= 1;
         index = index >= 0 ? index : total - 1;
         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);
@@ -2383,13 +2682,13 @@ var methods = {
         index += 1;
         index = index < total ? index : 0;
         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
         };
       }
     }
@@ -2436,11 +2735,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');
@@ -2458,14 +2755,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;
@@ -2483,11 +2773,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();
@@ -2504,14 +2792,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;
@@ -2527,7 +2808,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);
         }
@@ -2547,7 +2828,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);
@@ -2589,12 +2870,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) {
@@ -2617,18 +2905,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, {
@@ -2643,7 +2932,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);
@@ -2829,7 +3118,7 @@ var others = {
     }
   },
   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;
 
@@ -2851,7 +3140,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) {
@@ -2887,7 +3176,38 @@ var others = {
 
       // 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.zoom(zoomRatio, false, null, event);
+          }
+        }
+        break;
+
+      // Rotate the current image
+      case ACTION_ROTATE:
+        if (options.rotatable && options.rotateOnTouch) {
+          var rotateDegree = getMaxRotateDegree(pointers);
+          if (rotateDegree !== 0) {
+            this.rotate(rotateDegree, event);
+          }
+        }
+        break;
+
+      // Transform the current image
+      case ACTION_TRANSFORM:
+        if (options.zoomable && options.zoomOnTouch) {
+          var _zoomRatio = getMaxZoomRatio(pointers);
+          if (_zoomRatio !== 0) {
+            this.zoom(_zoomRatio, false, null, event);
+          }
+        }
+        if (options.rotatable && options.rotateOnTouch) {
+          var _rotateDegree = getMaxRotateDegree(pointers);
+          if (_rotateDegree !== 0) {
+            this.rotate(_rotateDegree, event);
+          }
+        }
         break;
       case ACTION_SWITCH:
         {
@@ -2929,16 +3249,17 @@ 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.fading = false;
@@ -3000,7 +3321,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) {
@@ -3087,6 +3408,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;
@@ -3094,19 +3416,52 @@ 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));
+      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 (['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));
+      }
       toggleClass(button, CLASS_HIDE, !options.button);
       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"));
@@ -3192,7 +3547,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;
@@ -3220,14 +3575,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);
     }
 
     /**
@@ -3239,6 +3595,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);