viewer 插件的應(yīng)用與修改（查看圖片并輪播）

源站：http://fengyuanchen.github.io/viewer/

應(yīng)用：

html:?

源碼上是正常排列的圖片同波，也可以直接在相似結(jié)構(gòu)的輪播圖上查看圖片

p標(biāo)簽為根據(jù)需求加的圖片標(biāo)題，如果有圖片標(biāo)題此為標(biāo)準(zhǔn)html結(jié)構(gòu)

?</div>

js:

var galley = document.getElementById('galley');

? ? ? ? ? ? if (galley) {

? ? ? ? ? ? ? ? var viewer = new Viewer(galley, {

? ? ? ? ? ? ? ? ? ? url: 'data-original',

? ? ? ? ? ? ? ? ? ? navbar: false,

? ? ? ? ? ? ? ? ? ? rotatable: false,

? ? ? ? ? ? ? ? ? ? scalable: false,

? ? ? ? ? ? ? ? ? ? title: true,

? ? ? ? ? ? ? ? ? ? tooltip: true,

? ? ? ? ? ? ? ? ? ? loop: false,

? ? ? ? ? ? ? ? ? ? minZoomRatio: 0.1,

? ? ? ? ? ? ? ? ? ? maxZoomRatio: 3,

? ? ? ? ? ? ? ? ? ? viewed: function (e) {

? ? ? ? ? ? ? ? ? ? ? ? // 根據(jù)需要調(diào)整左右箭頭等工具的位置

? ? ? ? ? ? ? ? ? ? ? ? var clientH;

? ? ? ? ? ? ? ? ? ? ? ? clientH = $(window).height() / 2;

? ? ? ? ? ? ? ? ? ? ? ? $('.viewer-toolbar .viewer-prev').each(function (i,item) {

? ? ? ? ? ? ? ? ? ? ? ? ? ? $(item).css('bottom', clientH);

? ? ? ? ? ? ? ? ? ? ? ? })

? ? ? ? ? ? ? ? ? ? ? ? $('.viewer-toolbar .viewer-next').each(function (i, item) {

? ? ? ? ? ? ? ? ? ? ? ? ? ? $(item).css('bottom', clientH);

? ? ? ? ? ? ? ? ? ? ? ? })

? ? ? ? ? ? ? ? ? ? ? ? window.onresize = function () {

? ? ? ? ? ? ? ? ? ? ? ? ? ? clientH = $(window).height() / 2;

? ? ? ? ? ? ? ? ? ? ? ? ? ? $('.viewer-toolbar .viewer-prev').each(function (i, item) {

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? $(item).css('bottom', clientH);

? ? ? ? ? ? ? ? ? ? ? ? ? ? })

? ? ? ? ? ? ? ? ? ? ? ? ? ? $('.viewer-toolbar .viewer-next').each(function (i, item) {

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? $(item).css('bottom', clientH);

? ? ? ? ? ? ? ? ? ? ? ? ? ? })

? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? });

? ? ? ? ? ? }；

基礎(chǔ)效果：

自己寫的時(shí)候需求增加熙含，所以更改了一點(diǎn)源碼排苍，直接貼改過的viewer.js

/*! * Viewer.js v1.1.0 * https://fengyuanchen.github.io/viewerjs * * Copyright 2015-present Chen Fengyuan * Released under the MIT license * * Date: 2018-05-27T07:33:19.361Z */(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global.Viewer = factory());}(this, (function () { 'use strict'; var DEFAULTS = { // Enable inline mode inline: false, // Show the button on the top-right of the viewer button: true, // Show the navbar navbar: true, // Show the title title: true, // Show the toolbar toolbar: true, // Show the tooltip with image ratio (percentage) when zoom in or zoom out tooltip: true, // Enable to move the image movable: true, // Enable to zoom the image zoomable: true, // Enable to rotate the image rotatable: true, // Enable to scale the image scalable: true, // Enable CSS3 Transition for some special elements transition: true, // Enable to request fullscreen when play fullscreen: true, // The amount of time to delay between automatically cycling an image when playing. interval: 5000, // Enable keyboard support keyboard: true, // Enable a modal backdrop, specify `static` for a backdrop which doesn't close the modal on click backdrop: true, // Indicate if show a loading spinner when load image or not. loading: true, // Indicate if enable loop viewing or not. loop: true, // Min width of the viewer in inline mode minWidth: 200, // Min height of the viewer in inline mode minHeight: 100, // Define the ratio when zoom the image by wheeling mouse zoomRatio: 0.1, // Define the min ratio of the image when zoom out minZoomRatio: 0.01, // Define the max ratio of the image when zoom in maxZoomRatio: 100, // Define the CSS `z-index` value of viewer in modal mode. zIndex: 2015, // Define the CSS `z-index` value of viewer in inline mode. zIndexInline: 0, // Define where to get the original image URL for viewing // Type: String (an image attribute) or Function (should return an image URL) url: 'src', // Define where to put the viewer in modal mode. // Type: String | Element container: 'body', // Filter the images for viewing. // Type: Function (return true if the image is viewable) filter: null, // Event shortcuts ready: null, show: null, shown: null, hide: null, hidden: null, view: null, viewed: null, zoom: null, zoomed: null }; var TEMPLATE = '

' + '

';? var IN_BROWSER = typeof window !== 'undefined';? var WINDOW = IN_BROWSER ? window : {};? var NAMESPACE = 'viewer';? // Actions? var ACTION_MOVE = 'move';? var ACTION_SWITCH = 'switch';? var ACTION_ZOOM = 'zoom';? // Classes? var CLASS_ACTIVE = NAMESPACE + '-active';? var CLASS_CLOSE = NAMESPACE + '-close';? var CLASS_FADE = NAMESPACE + '-fade';? var CLASS_FIXED = NAMESPACE + '-fixed';? var CLASS_FULLSCREEN = NAMESPACE + '-fullscreen';? var CLASS_FULLSCREEN_EXIT = NAMESPACE + '-fullscreen-exit';? var CLASS_HIDE = NAMESPACE + '-hide';? var CLASS_HIDE_MD_DOWN = NAMESPACE + '-hide-md-down';? var CLASS_HIDE_SM_DOWN = NAMESPACE + '-hide-sm-down';? var CLASS_HIDE_XS_DOWN = NAMESPACE + '-hide-xs-down';? var CLASS_IN = NAMESPACE + '-in';? var CLASS_INVISIBLE = NAMESPACE + '-invisible';? var CLASS_LOADING = NAMESPACE + '-loading';? var CLASS_MOVE = NAMESPACE + '-move';? var CLASS_OPEN = NAMESPACE + '-open';? var CLASS_SHOW = NAMESPACE + '-show';? var CLASS_TRANSITION = NAMESPACE + '-transition';? // Events? var EVENT_READY = 'ready';? var EVENT_SHOW = 'show';? var EVENT_SHOWN = 'shown';? var EVENT_HIDE = 'hide';? var EVENT_HIDDEN = 'hidden';? var EVENT_VIEW = 'view';? var EVENT_VIEWED = 'viewed';? var EVENT_ZOOM = 'zoom';? var EVENT_ZOOMED = 'zoomed';? var EVENT_CLICK = 'click';? var EVENT_DRAG_START = 'dragstart';? var EVENT_KEY_DOWN = 'keydown';? var EVENT_LOAD = 'load';? var EVENT_POINTER_DOWN = WINDOW.PointerEvent ? 'pointerdown' : 'touchstart mousedown';? var EVENT_POINTER_MOVE = WINDOW.PointerEvent ? 'pointermove' : 'touchmove mousemove';? var EVENT_POINTER_UP = WINDOW.PointerEvent ? 'pointerup pointercancel' : 'touchend touchcancel mouseup';? var EVENT_RESIZE = 'resize';? var EVENT_TRANSITION_END = 'transitionend';? var EVENT_WHEEL = 'wheel mousewheel DOMMouseScroll';? // Data keys? var DATA_ACTION = NAMESPACE + 'Action';? var BUTTONS = ['zoom-in', 'zoom-out', 'one-to-one', 'reset', 'prev', 'play', 'next', 'rotate-left', 'rotate-right', 'flip-horizontal', 'flip-vertical'];? var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {? ? return typeof obj;? } : function (obj) {? ? return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;? };? var classCallCheck = function (instance, Constructor) {? ? if (!(instance instanceof Constructor)) {? ? ? throw new TypeError("Cannot call a class as a function");? ? }? };? var createClass = function () {? ? function defineProperties(target, props) {? ? ? for (var i = 0; i < props.length; i++) {? ? ? ? var descriptor = props[i];? ? ? ? descriptor.enumerable = descriptor.enumerable || false;? ? ? ? descriptor.configurable = true;? ? ? ? if ("value" in descriptor) descriptor.writable = true;? ? ? ? Object.defineProperty(target, descriptor.key, descriptor);? ? ? }? ? }? ? return function (Constructor, protoProps, staticProps) {? ? ? if (protoProps) defineProperties(Constructor.prototype, protoProps);? ? ? if (staticProps) defineProperties(Constructor, staticProps);? ? ? return Constructor;? ? };? }();? /**? * Check if the given value is a string.? * @param {*} value - The value to check.? * @returns {boolean} Returns `true` if the given value is a string, else `false`.? */? function isString(value) {? ? return typeof value === 'string';? }? /**? * Check if the given value is not a number.? */? var isNaN = Number.isNaN || WINDOW.isNaN;? /**? * Check if the given value is a number.? * @param {*} value - The value to check.? * @returns {boolean} Returns `true` if the given value is a number, else `false`.? */? function isNumber(value) {? ? return typeof value === 'number' && !isNaN(value);? }? /**? * Check if the given value is undefined.? * @param {*} value - The value to check.? * @returns {boolean} Returns `true` if the given value is undefined, else `false`.? */? function isUndefined(value) {? ? return typeof value === 'undefined';? }? /**? * Check if the given value is an object.? * @param {*} value - The value to check.? * @returns {boolean} Returns `true` if the given value is an object, else `false`.? */? function isObject(value) {? ? return (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' && value !== null;? }? var hasOwnProperty = Object.prototype.hasOwnProperty;? /**? * Check if the given value is a plain object.? * @param {*} value - The value to check.? * @returns {boolean} Returns `true` if the given value is a plain object, else `false`.? */? function isPlainObject(value) {? ? if (!isObject(value)) {? ? ? return false;? ? }? ? try {? ? ? var _constructor = value.constructor;? ? ? var prototype = _constructor.prototype;? ? ? return _constructor && prototype && hasOwnProperty.call(prototype, 'isPrototypeOf');? ? } catch (e) {? ? ? return false;? ? }? }? /**? * Check if the given value is a function.? * @param {*} value - The value to check.? * @returns {boolean} Returns `true` if the given value is a function, else `false`.? */? function isFunction(value) {? ? return typeof value === 'function';? }? /**? * Iterate the given data.? * @param {*} data - The data to iterate.? * @param {Function} callback - The process function for each element.? * @returns {*} The original data.? */? function forEach(data, callback) {? ? if (data && isFunction(callback)) {? ? ? if (Array.isArray(data) || isNumber(data.length) /* array-like */) {? ? ? ? ? var length = data.length;? ? ? ? ? var i = void 0;? ? ? ? ? for (i = 0; i < length; i += 1) {? ? ? ? ? ? if (callback.call(data, data[i], i, data) === false) {? ? ? ? ? ? ? break;? ? ? ? ? ? }? ? ? ? ? }? ? ? ? } else if (isObject(data)) {? ? ? ? Object.keys(data).forEach(function (key) {? ? ? ? ? callback.call(data, data[key], key, data);? ? ? ? });? ? ? }? ? }? ? return data;? }? /**? * Extend the given object.? * @param {*} obj - The object to be extended.? * @param {*} args - The rest objects which will be merged to the first object.? * @returns {Object} The extended object.? */? var assign = Object.assign || function assign(obj) {? ? for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {? ? ? args[_key - 1] = arguments[_key];? ? }? ? if (isObject(obj) && args.length > 0) {? ? ? args.forEach(function (arg) {? ? ? ? if (isObject(arg)) {? ? ? ? ? Object.keys(arg).forEach(function (key) {? ? ? ? ? ? obj[key] = arg[key];? ? ? ? ? });? ? ? ? }? ? ? });? ? }? ? return obj;? };? var REGEXP_SUFFIX = /^(?:width|height|left|top|marginLeft|marginTop)$/;? /**? * Apply styles to the given element.? * @param {Element} element - The target element.? * @param {Object} styles - The styles for applying.? */? function setStyle(element, styles) {? ? var style = element.style;? ? forEach(styles, function (value, property) {? ? ? if (REGEXP_SUFFIX.test(property) && isNumber(value)) {? ? ? ? value += 'px';? ? ? }? ? ? style[property] = value;? ? });? }? /**? * Check if the given element has a special class.? * @param {Element} element - The element to check.? * @param {string} value - The class to search.? * @returns {boolean} Returns `true` if the special class was found.? */? function hasClass(element, value) {? ? return element.classList ? element.classList.contains(value) : element.className.indexOf(value) > -1;? }? /**? * Add classes to the given element.? * @param {Element} element - The target element.? * @param {string} value - The classes to be added.? */? function addClass(element, value) {? ? if (!value) {? ? ? return;? ? }? ? if (isNumber(element.length)) {? ? ? forEach(element, function (elem) {? ? ? ? addClass(elem, value);? ? ? });? ? ? return;? ? }? ? if (element.classList) {? ? ? element.classList.add(value);? ? ? return;? ? }? ? var className = element.className.trim();? ? if (!className) {? ? ? element.className = value;? ? } else if (className.indexOf(value) < 0) {? ? ? element.className = className + ' ' + value;? ? }? }? /**? * Remove classes from the given element.? * @param {Element} element - The target element.? * @param {string} value - The classes to be removed.? */? function removeClass(element, value) {? ? if (!value) {? ? ? return;? ? }? ? if (isNumber(element.length)) {? ? ? forEach(element, function (elem) {? ? ? ? removeClass(elem, value);? ? ? });? ? ? return;? ? }? ? if (element.classList) {? ? ? element.classList.remove(value);? ? ? return;? ? }? ? if (element.className.indexOf(value) >= 0) {? ? ? element.className = element.className.replace(value, '');? ? }? }? /**? * Add or remove classes from the given element.? * @param {Element} element - The target element.? * @param {string} value - The classes to be toggled.? * @param {boolean} added - Add only.? */? function toggleClass(element, value, added) {? ? if (!value) {? ? ? return;? ? }? ? if (isNumber(element.length)) {? ? ? forEach(element, function (elem) {? ? ? ? toggleClass(elem, value, added);? ? ? });? ? ? return;? ? }? ? // IE10-11 doesn't support the second parameter of `classList.toggle`? ? if (added) {? ? ? addClass(element, value);? ? } else {? ? ? removeClass(element, value);? ? }? }? var REGEXP_HYPHENATE = /([a-z\d])([A-Z])/g;? /**? * Transform the given string from camelCase to kebab-case? * @param {string} value - The value to transform.? * @returns {string} The transformed value.? */? function hyphenate(value) {? ? return value.replace(REGEXP_HYPHENATE, '$1-$2').toLowerCase();? }? /**? * Get data from the given element.? * @param {Element} element - The target element.? * @param {string} name - The data key to get.? * @returns {string} The data value.? */? function getData(element, name) {? ? if (isObject(element[name])) {? ? ? return element[name];? ? } else if (element.dataset) {? ? ? return element.dataset[name];? ? }? ? return element.getAttribute('data-' + hyphenate(name));? }? /**? * Set data to the given element.? * @param {Element} element - The target element.? * @param {string} name - The data key to set.? * @param {string} data - The data value.? */? function setData(element, name, data) {? ? if (isObject(data)) {? ? ? element[name] = data;? ? } else if (element.dataset) {? ? ? element.dataset[name] = data;? ? } else {? ? ? element.setAttribute('data-' + hyphenate(name), data);? ? }? }? /**? * Remove data from the given element.? * @param {Element} element - The target element.? * @param {string} name - The data key to remove.? */? function removeData(element, name) {? ? if (isObject(element[name])) {? ? ? try {? ? ? ? delete element[name];? ? ? } catch (e) {? ? ? ? element[name] = undefined;? ? ? }? ? } else if (element.dataset) {? ? ? // #128 Safari not allows to delete dataset property? ? ? try {? ? ? ? delete element.dataset[name];? ? ? } catch (e) {? ? ? ? element.dataset[name] = undefined;? ? ? }? ? } else {? ? ? element.removeAttribute('data-' + hyphenate(name));? ? }? }? var REGEXP_SPACES = /\s\s*/;? var onceSupported = function () {? ? var supported = false;? ? if (IN_BROWSER) {? ? ? var once = false;? ? ? var listener = function listener() {};? ? ? var options = Object.defineProperty({}, 'once', {? ? ? ? get: function get$$1() {? ? ? ? ? supported = true;? ? ? ? ? return once;? ? ? ? },? ? ? ? /**? ? ? ? * This setter can fix a `TypeError` in strict mode? ? ? ? * {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Getter_only}? ? ? ? * @param {boolean} value - The value to set? ? ? ? */? ? ? ? set: function set$$1(value) {? ? ? ? ? once = value;? ? ? ? }? ? ? });? ? ? WINDOW.addEventListener('test', listener, options);? ? ? WINDOW.removeEventListener('test', listener, options);? ? }? ? return supported;? }();? /**? * Remove event listener from the target element.? * @param {Element} element - The event target.? * @param {string} type - The event type(s).? * @param {Function} listener - The event listener.? * @param {Object} options - The event options.? */? function removeListener(element, type, listener) {? ? var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};? ? var handler = listener;? ? type.trim().split(REGEXP_SPACES).forEach(function (event) {? ? ? if (!onceSupported) {? ? ? ? var listeners = element.listeners;? ? ? ? if (listeners && listeners[event] && listeners[event][listener]) {? ? ? ? ? handler = listeners[event][listener];? ? ? ? ? delete listeners[event][listener];? ? ? ? ? if (Object.keys(listeners[event]).length === 0) {? ? ? ? ? ? delete listeners[event];? ? ? ? ? }? ? ? ? ? if (Object.keys(listeners).length === 0) {? ? ? ? ? ? delete element.listeners;? ? ? ? ? }? ? ? ? }? ? ? }? ? ? element.removeEventListener(event, handler, options);? ? });? }? /**? * Add event listener to the target element.? * @param {Element} element - The event target.? * @param {string} type - The event type(s).? * @param {Function} listener - The event listener.? * @param {Object} options - The event options.? */? function addListener(element, type, listener) {? ? var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};? ? var _handler = listener;? ? type.trim().split(REGEXP_SPACES).forEach(function (event) {? ? ? if (options.once && !onceSupported) {? ? ? ? var _element$listeners = element.listeners,? ? ? ? ? ? listeners = _element$listeners === undefined ? {} : _element$listeners;? ? ? ? _handler = function handler() {? ? ? ? ? for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {? ? ? ? ? ? args[_key2] = arguments[_key2];? ? ? ? ? }? ? ? ? ? delete listeners[event][listener];? ? ? ? ? element.removeEventListener(event, _handler, options);? ? ? ? ? listener.apply(element, args);? ? ? ? };? ? ? ? if (!listeners[event]) {? ? ? ? ? listeners[event] = {};? ? ? ? }? ? ? ? if (listeners[event][listener]) {? ? ? ? ? element.removeEventListener(event, listeners[event][listener], options);? ? ? ? }? ? ? ? listeners[event][listener] = _handler;? ? ? ? element.listeners = listeners;? ? ? }? ? ? element.addEventListener(event, _handler, options);? ? });? }? /**? * Dispatch event on the target element.? * @param {Element} element - The event target.? * @param {string} type - The event type(s).? * @param {Object} data - The additional event data.? * @returns {boolean} Indicate if the event is default prevented or not.? */? function dispatchEvent(element, type, data) {? ? var event = void 0;? ? // Event and CustomEvent on IE9-11 are global objects, not constructors? ? if (isFunction(Event) && isFunction(CustomEvent)) {? ? ? event = new CustomEvent(type, {? ? ? ? detail: data,? ? ? ? bubbles: true,? ? ? ? cancelable: true? ? ? });? ? } else {? ? ? event = document.createEvent('CustomEvent');? ? ? event.initCustomEvent(type, true, true, data);? ? }? ? return element.dispatchEvent(event);? }? /**? * Get the offset base on the document.? * @param {Element} element - The target element.? * @returns {Object} The offset data.? */? function getOffset(element) {? ? var box = element.getBoundingClientRect();? ? return {? ? ? left: box.left + (window.pageXOffset - document.documentElement.clientLeft),? ? ? top: box.top + (window.pageYOffset - document.documentElement.clientTop)? ? };? }? /**? * Get transforms base on the given object.? * @param {Object} obj - The target object.? * @returns {string} A string contains transform values.? */? function getTransforms(_ref) {? ? var rotate = _ref.rotate,? ? ? ? scaleX = _ref.scaleX,? ? ? ? scaleY = _ref.scaleY,? ? ? ? translateX = _ref.translateX,? ? ? ? translateY = _ref.translateY;? ? var values = [];? ? if (isNumber(translateX) && translateX !== 0) {? ? ? values.push('translateX(' + translateX + 'px)');? ? }? ? if (isNumber(translateY) && translateY !== 0) {? ? ? values.push('translateY(' + translateY + 'px)');? ? }? ? // Rotate should come first before scale to match orientation transform? ? if (isNumber(rotate) && rotate !== 0) {? ? ? values.push('rotate(' + rotate + 'deg)');? ? }? ? if (isNumber(scaleX) && scaleX !== 1) {? ? ? values.push('scaleX(' + scaleX + ')');? ? }? ? if (isNumber(scaleY) && scaleY !== 1) {? ? ? values.push('scaleY(' + scaleY + ')');? ? }? ? var transform = values.length ? values.join(' ') : 'none';? ? return {? ? ? WebkitTransform: transform,? ? ? msTransform: transform,? ? ? transform: transform? ? };? }? /**? * Get an image name from an image url.? * @param {string} url - The target url.? * @example? * // picture.jpg? * getImageNameFromURL('http://domain.com/path/to/picture.jpg?size=1280×960')? * @returns {string} A string contains the image name.? */? function getImageNameFromURL(url) {? ? return isString(url) ? url.replace(/^.*\//, '').replace(/[?&#].*$/, '') : '';? }? var IS_SAFARI = WINDOW.navigator && /(Macintosh|iPhone|iPod|iPad).*AppleWebKit/i.test(WINDOW.navigator.userAgent);? /**? * Get an image's natural sizes.? * @param {string} image - The target image.? * @param {Function} callback - The callback function.? * @returns {HTMLImageElement} The new image.? */? function getImageNaturalSizes(image, callback) {? ? var newImage = document.createElement('img');? ? // Modern browsers (except Safari)? ? if (image.naturalWidth && !IS_SAFARI) {? ? ? callback(image.naturalWidth, image.naturalHeight);? ? ? return newImage;? ? }? ? var body = document.body || document.documentElement;? ? newImage.onload = function () {? ? ? callback(newImage.width, newImage.height);? ? ? if (!IS_SAFARI) {? ? ? ? body.removeChild(newImage);? ? ? }? ? };? ? newImage.src = image.src;? ? // iOS Safari will convert the image automatically? ? // with its orientation once append it into DOM? ? if (!IS_SAFARI) {? ? ? newImage.style.cssText = 'left:0;' + 'max-height:none!important;' + 'max-width:none!important;' + 'min-height:0!important;' + 'min-width:0!important;' + 'opacity:0;' + 'position:absolute;' + 'top:0;' + 'z-index:-1;';? ? ? body.appendChild(newImage);? ? }? ? return newImage;? }? /**? * Get the related class name of a responsive type number.? * @param {string} type - The responsive type.? * @returns {string} The related class name.? */? function getResponsiveClass(type) {? ? switch (type) {? ? ? case 2:? ? ? ? return CLASS_HIDE_XS_DOWN;? ? ? case 3:? ? ? ? return CLASS_HIDE_SM_DOWN;? ? ? case 4:? ? ? ? return CLASS_HIDE_MD_DOWN;? ? ? default:? ? ? ? return '';? ? }? }? /**? * Get the max ratio of a group of pointers.? * @param {string} pointers - The target pointers.? * @returns {number} The result ratio.? */? function getMaxZoomRatio(pointers) {? ? var pointers2 = assign({}, pointers);? ? var ratios = [];? ? forEach(pointers, function (pointer, pointerId) {? ? ? delete pointers2[pointerId];? ? ? forEach(pointers2, function (pointer2) {? ? ? ? var x1 = Math.abs(pointer.startX - pointer2.startX);? ? ? ? var y1 = Math.abs(pointer.startY - pointer2.startY);? ? ? ? var x2 = Math.abs(pointer.endX - pointer2.endX);? ? ? ? var y2 = Math.abs(pointer.endY - pointer2.endY);? ? ? ? var z1 = Math.sqrt(x1 * x1 + y1 * y1);? ? ? ? var z2 = Math.sqrt(x2 * x2 + y2 * y2);? ? ? ? var ratio = (z2 - z1) / z1;? ? ? ? ratios.push(ratio);? ? ? });? ? });? ? ratios.sort(function (a, b) {? ? ? return Math.abs(a) < Math.abs(b);? ? });? ? return ratios[0];? }? /**? * Get a pointer from an event object.? * @param {Object} event - The target event object.? * @param {boolean} endOnly - Indicates if only returns the end point coordinate or not.? * @returns {Object} The result pointer contains start and/or end point coordinates.? */? function getPointer(_ref2, endOnly) {? ? var pageX = _ref2.pageX,? ? ? ? pageY = _ref2.pageY;? ? var end = {? ? ? endX: pageX,? ? ? endY: pageY? ? };? ? return endOnly ? end : assign({? ? ? startX: pageX,? ? ? startY: pageY? ? }, end);? }? /**? * Get the center point coordinate of a group of pointers.? * @param {Object} pointers - The target pointers.? * @returns {Object} The center point coordinate.? */? function getPointersCenter(pointers) {? ? var pageX = 0;? ? var pageY = 0;? ? var count = 0;? ? forEach(pointers, function (_ref3) {? ? ? var startX = _ref3.startX,? ? ? ? ? startY = _ref3.startY;? ? ? pageX += startX;? ? ? pageY += startY;? ? ? count += 1;? ? });? ? pageX /= count;? ? pageY /= count;? ? return {? ? ? pageX: pageX,? ? ? pageY: pageY? ? };? }? var render = {? ? render: function render() {? ? ? this.initContainer();? ? ? this.initViewer();? ? ? this.initList();? ? ? this.renderViewer();? ? },? ? initContainer: function initContainer() {? ? ? this.containerData = {? ? ? ? width: window.innerWidth,? ? ? ? height: window.innerHeight? ? ? };? ? },? ? initViewer: function initViewer() {? ? ? var options = this.options,? ? ? ? ? parent = this.parent;? ? ? var viewerData = void 0;? ? ? if (options.inline) {? ? ? ? viewerData = {? ? ? ? ? width: Math.max(parent.offsetWidth, options.minWidth),? ? ? ? ? height: Math.max(parent.offsetHeight, options.minHeight)? ? ? ? };? ? ? ? this.parentData = viewerData;? ? ? }? ? ? if (this.fulled || !viewerData) {? ? ? ? viewerData = this.containerData;? ? ? }? ? ? this.viewerData = assign({}, viewerData);? ? },? ? renderViewer: function renderViewer() {? ? ? if (this.options.inline && !this.fulled) {? ? ? ? setStyle(this.viewer, this.viewerData);? ? ? }? ? },? ? initList: function initList() {? ? ? var _this = this;? ? ? var element = this.element,? ? ? ? ? options = this.options,? ? ? ? ? list = this.list;? ? ? var items = [];? ? ? forEach(this.images, function (image, i) {? ? ? ? ? var src = image.src;? ? ? ? ? console.log($(image).parent().siblings())? ? ? ? ? var imgTitle;? ? ? ? ? if ($(image).parent().siblings().length !== 0) {? ? ? ? ? ? ? imgTitle = $(image).parent().siblings()[0].innerText;? ? ? ? ? } else {? ? ? ? ? ? ? imgTitle = '';? ? ? ? ? }? ? ? ? var alt = image.alt || getImageNameFromURL(src);? ? ? ? var url = options.url;? ? ? ? if (isString(url)) {? ? ? ? ? url = image.getAttribute(url);? ? ? ? } else if (isFunction(url)) {? ? ? ? ? url = url.call(_this, image);? ? ? ? }? ? ? ? if (src || url) {? ? ? ? ? ? items.push('

' + '' + '

' + imgTitle + '

');? ? ? ? }? ? ? });? ? ? list.innerHTML = items.join('');? ? ? this.items = list.getElementsByTagName('li');? ? ? forEach(this.items, function (item) {? ? ? ? var image = item.firstElementChild;? ? ? ? var imgtitle = $(item).find('p')[0];? ? ? ? setData(image, 'filled', true);? ? ? ? setData(imgtitle, 'ptitle', true);? ? ? ? if (options.loading) {? ? ? ? ? addClass(item, CLASS_LOADING);? ? ? ? }? ? ? ? addListener(image, EVENT_LOAD, function (event) {? ? ? ? ? if (options.loading) {? ? ? ? ? ? removeClass(item, CLASS_LOADING);? ? ? ? ? }? ? ? ? ? _this.loadImage(event);? ? ? ? }, {? ? ? ? ? once: true? ? ? ? });? ? ? });? ? ? if (options.transition) {? ? ? ? addListener(element, EVENT_VIEWED, function () {? ? ? ? ? addClass(list, CLASS_TRANSITION);? ? ? ? }, {? ? ? ? ? once: true? ? ? ? });? ? ? }? ? },? ? renderList: function renderList(index) {? ? ? var i = index || this.index;? ? ? var width = this.items[i].offsetWidth || 30;? ? ? var outerWidth = width + 1; // 1 pixel of `margin-left` width? ? ? // Place the active item in the center of the screen? ? ? setStyle(this.list, assign({? ? ? ? width: outerWidth * this.length? ? ? }, getTransforms({? ? ? ? translateX: (this.viewerData.width - width) / 2 - outerWidth * i? ? ? })));? ? ? // return i;? ? },? ? resetList: function resetList() {? ? ? ? var list = this.list;? ? ? list.innerHTML = '';? ? ? removeClass(list, CLASS_TRANSITION);? ? ? setStyle(list, getTransforms({? ? ? ? translateX: 0? ? ? }));? ? },? ? initImage: function initImage(done) {? ? ? var _this2 = this;? ? ? var options = this.options,? ? ? ? ? image = this.image,? ? ? ? ? viewerData = this.viewerData;? ? ? var footerHeight = this.footer.offsetHeight;? ? ? var viewerWidth = viewerData.width;? ? ? var viewerHeight = Math.max(viewerData.height - footerHeight, footerHeight);? ? ? var oldImageData = this.imageData || {};? ? ? var sizingImage = void 0;? ? ? this.imageInitializing = {? ? ? ? abort: function abort() {? ? ? ? ? sizingImage.onload = null;? ? ? ? }? ? ? };? ? ? sizingImage = getImageNaturalSizes(image, function (naturalWidth, naturalHeight) {? ? ? ? var aspectRatio = naturalWidth / naturalHeight;? ? ? ? var width = viewerWidth;? ? ? ? var height = viewerHeight;? ? ? ? _this2.imageInitializing = false;? ? ? ? if (viewerHeight * aspectRatio > viewerWidth) {? ? ? ? ? height = viewerWidth / aspectRatio;? ? ? ? } else {? ? ? ? ? width = viewerHeight * aspectRatio;? ? ? ? }? ? ? ? width = Math.min(width * 0.9, naturalWidth);? ? ? ? height = Math.min(height * 0.9, naturalHeight);? ? ? ? var imageData = {? ? ? ? ? naturalWidth: naturalWidth,? ? ? ? ? naturalHeight: naturalHeight,? ? ? ? ? aspectRatio: aspectRatio,? ? ? ? ? ratio: width / naturalWidth,? ? ? ? ? width: width,? ? ? ? ? height: height,? ? ? ? ? left: (viewerWidth - width) / 2,? ? ? ? ? top: (viewerHeight - height) / 2? ? ? ? };? ? ? ? var initialImageData = assign({}, imageData);? ? ? ? if (options.rotatable) {? ? ? ? ? imageData.rotate = oldImageData.rotate || 0;? ? ? ? ? initialImageData.rotate = 0;? ? ? ? }? ? ? ? if (options.scalable) {? ? ? ? ? imageData.scaleX = oldImageData.scaleX || 1;? ? ? ? ? imageData.scaleY = oldImageData.scaleY || 1;? ? ? ? ? initialImageData.scaleX = 1;? ? ? ? ? initialImageData.scaleY = 1;? ? ? ? }? ? ? ? _this2.imageData = imageData;? ? ? ? _this2.initialImageData = initialImageData;? ? ? ? if (done) {? ? ? ? ? done();? ? ? ? }? ? ? });? ? },? ? renderImage: function renderImage(done) {? ? ? var _this3 = this;? ? ? var image = this.image,? ? ? ? ? imageData = this.imageData;? ? ? setStyle(image, assign({? ? ? ? width: imageData.width,? ? ? ? height: imageData.height,? ? ? ? marginLeft: imageData.left,? ? ? ? marginTop: imageData.top? ? ? }, getTransforms(imageData)));? ? ? if (done) {? ? ? ? if ((this.viewing || this.zooming) && this.options.transition) {? ? ? ? ? var onTransitionEnd = function onTransitionEnd() {? ? ? ? ? ? _this3.imageRendering = false;? ? ? ? ? ? done();? ? ? ? ? };? ? ? ? ? this.imageRendering = {? ? ? ? ? ? abort: function abort() {? ? ? ? ? ? ? removeListener(image, EVENT_TRANSITION_END, onTransitionEnd);? ? ? ? ? ? }? ? ? ? ? };? ? ? ? ? addListener(image, EVENT_TRANSITION_END, onTransitionEnd, {? ? ? ? ? ? once: true? ? ? ? ? });? ? ? ? } else {? ? ? ? ? done();? ? ? ? }? ? ? }? ? },? ? resetImage: function resetImage() {? ? ? // this.image only defined after viewed? ? ? if (this.viewing || this.viewed) {? ? ? ? var image = this.image;? ? ? ? if (this.viewing) {? ? ? ? ? this.viewing.abort();? ? ? ? }? ? ? ? image.parentNode.removeChild(image);? ? ? ? this.image = null;? ? ? }? ? }? };? var events = {? ? bind: function bind() {? ? ? var element = this.element,? ? ? ? ? viewer = this.viewer;? ? ? addListener(viewer, EVENT_CLICK, this.onClick = this.click.bind(this));? ? ? addListener(viewer, EVENT_WHEEL, this.onWheel = this.wheel.bind(this));? ? ? addListener(viewer, EVENT_DRAG_START, this.onDragStart = this.dragstart.bind(this));? ? ? addListener(this.canvas, EVENT_POINTER_DOWN, this.onPointerDown = this.pointerdown.bind(this));? ? ? addListener(element.ownerDocument, EVENT_POINTER_MOVE, this.onPointerMove = this.pointermove.bind(this));? ? ? addListener(element.ownerDocument, EVENT_POINTER_UP, this.onPointerUp = this.pointerup.bind(this));? ? ? addListener(element.ownerDocument, EVENT_KEY_DOWN, this.onKeyDown = this.keydown.bind(this));? ? ? addListener(window, EVENT_RESIZE, this.onResize = this.resize.bind(this));? ? },? ? unbind: function unbind() {? ? ? var element = this.element,? ? ? ? ? viewer = this.viewer;? ? ? removeListener(viewer, EVENT_CLICK, this.onClick);? ? ? removeListener(viewer, EVENT_WHEEL, this.onWheel);? ? ? removeListener(viewer, EVENT_DRAG_START, this.onDragStart);? ? ? removeListener(this.canvas, EVENT_POINTER_DOWN, this.onPointerDown);? ? ? removeListener(element.ownerDocument, EVENT_POINTER_MOVE, this.onPointerMove);? ? ? removeListener(element.ownerDocument, EVENT_POINTER_UP, this.onPointerUp);? ? ? removeListener(element.ownerDocument, EVENT_KEY_DOWN, this.onKeyDown);? ? ? removeListener(window, EVENT_RESIZE, this.onResize);? ? }? };? var handlers = {? ? ? click: function click(_ref) {? ? ? var target = _ref.target;? ? ? var options = this.options,? ? ? ? ? imageData = this.imageData;? ? ? var action = getData(target, DATA_ACTION);? ? ? switch (action) {? ? ? ? case 'mix':? ? ? ? ? if (this.played) {? ? ? ? ? ? this.stop();? ? ? ? ? } else if (options.inline) {? ? ? ? ? ? if (this.fulled) {? ? ? ? ? ? ? this.exit();? ? ? ? ? ? } else {? ? ? ? ? ? ? this.full();? ? ? ? ? ? }? ? ? ? ? } else {? ? ? ? ? ? this.hide();? ? ? ? ? }? ? ? ? ? break;? ? ? ? case 'hide':? ? ? ? ? this.hide();? ? ? ? ? break;? ? ? ? ? case 'view':? ? ? ? ? this.view(getData(target, 'index'));? ? ? ? ? break;? ? ? ? case 'zoom-in':? ? ? ? ? this.zoom(0.1, true);? ? ? ? ? break;? ? ? ? case 'zoom-out':? ? ? ? ? this.zoom(-0.1, true);? ? ? ? ? break;? ? ? ? case 'one-to-one':? ? ? ? ? this.toggle();? ? ? ? ? break;? ? ? ? case 'reset':? ? ? ? ? this.reset();? ? ? ? ? break;? ? ? ? case 'prev':? ? ? ? ? this.prev(options.loop);? ? ? ? ? break;? ? ? ? case 'play':? ? ? ? ? this.play(options.fullscreen);? ? ? ? ? break;? ? ? ? case 'next':? ? ? ? ? this.next(options.loop);? ? ? ? ? break;? ? ? ? case 'rotate-left':? ? ? ? ? this.rotate(-90);? ? ? ? ? break;? ? ? ? case 'rotate-right':? ? ? ? ? this.rotate(90);? ? ? ? ? break;? ? ? ? case 'flip-horizontal':? ? ? ? ? this.scaleX(-imageData.scaleX || -1);? ? ? ? ? break;? ? ? ? case 'flip-vertical':? ? ? ? ? this.scaleY(-imageData.scaleY || -1);? ? ? ? ? break;? ? ? ? default:? ? ? ? ? if (this.played) {? ? ? ? ? ? this.stop();? ? ? ? ? }? ? ? }? ? },? ? load: function load() {? ? ? var _this = this;? ? ? if (this.timeout) {? ? ? ? clearTimeout(this.timeout);? ? ? ? this.timeout = false;? ? ? }? ? ? ? ? ? var element = this.element,? ? ? ? ? options = this.options,? ? ? ? ? image = this.image,? ? ? ? ? index = this.index,? ? ? ? ? viewerData = this.viewerData;? ? ? ? ? ? removeClass(image, CLASS_INVISIBLE);? ? ? if (options.loading) {? ? ? ? removeClass(this.canvas, CLASS_LOADING);? ? ? }? ? ? image.style.cssText = 'height:0;' + ('margin-left:' + viewerData.width / 2 + 'px;') + ('margin-top:' + viewerData.height / 2 + 'px;') + 'max-width:none!important;' + 'position:absolute;' + 'width:0;';? ? ? this.initImage(function () {? ? ? ? toggleClass(image, CLASS_MOVE, options.movable);? ? ? ? toggleClass(image, CLASS_TRANSITION, options.transition);? ? ? ? _this.renderImage(function () {? ? ? ? ? _this.viewed = true;? ? ? ? ? _this.viewing = false;? ? ? ? ? if (isFunction(options.viewed)) {? ? ? ? ? ? addListener(element, EVENT_VIEWED, options.viewed, {? ? ? ? ? ? ? once: true? ? ? ? ? ? });? ? ? ? ? }? ? ? ? ? dispatchEvent(element, EVENT_VIEWED, {? ? ? ? ? ? originalImage: _this.images[index],? ? ? ? ? ? index: index,? ? ? ? ? ? image: image? ? ? ? ? });? ? ? ? });? ? ? });? ? },? ? loadImage: function loadImage(e) {? ? ? var image = e.target;? ? ? var parent = image.parentNode;? ? ? var parentWidth = parent.offsetWidth || 30;? ? ? var parentHeight = parent.offsetHeight || 50;? ? ? var filled = !!getData(image, 'filled');? ? ? getImageNaturalSizes(image, function (naturalWidth, naturalHeight) {? ? ? ? var aspectRatio = naturalWidth / naturalHeight;? ? ? ? var width = parentWidth;? ? ? ? var height = parentHeight;? ? ? ? if (parentHeight * aspectRatio > parentWidth) {? ? ? ? ? if (filled) {? ? ? ? ? ? width = parentHeight * aspectRatio;? ? ? ? ? } else {? ? ? ? ? ? height = parentWidth / aspectRatio;? ? ? ? ? }? ? ? ? } else if (filled) {? ? ? ? ? height = parentWidth / aspectRatio;? ? ? ? } else {? ? ? ? ? width = parentHeight * aspectRatio;? ? ? ? }? ? ? ? setStyle(image, assign({? ? ? ? ? width: width,? ? ? ? ? height: height? ? ? ? }, getTransforms({? ? ? ? ? translateX: (parentWidth - width) / 2,? ? ? ? ? translateY: (parentHeight - height) / 2? ? ? ? })));? ? ? });? ? },? ? keydown: function keydown(e) {? ? ? var options = this.options;? ? ? if (!this.fulled || !options.keyboard) {? ? ? ? return;? ? ? }? ? ? switch (e.keyCode || e.which || e.charCode) {? ? ? ? // Escape? ? ? ? case 27:? ? ? ? ? if (this.played) {? ? ? ? ? ? this.stop();? ? ? ? ? } else if (options.inline) {? ? ? ? ? ? if (this.fulled) {? ? ? ? ? ? ? this.exit();? ? ? ? ? ? }? ? ? ? ? } else {? ? ? ? ? ? this.hide();? ? ? ? ? }? ? ? ? ? break;? ? ? ? // Space? ? ? ? case 32:? ? ? ? ? if (this.played) {? ? ? ? ? ? this.stop();? ? ? ? ? }? ? ? ? ? break;? ? ? ? // ArrowLeft? ? ? ? case 37:? ? ? ? ? this.prev(options.loop);? ? ? ? ? break;? ? ? ? // ArrowUp? ? ? ? case 38:? ? ? ? ? // Prevent scroll on Firefox? ? ? ? ? e.preventDefault();? ? ? ? ? // Zoom in? ? ? ? ? this.zoom(options.zoomRatio, true);? ? ? ? ? break;? ? ? ? // ArrowRight? ? ? ? case 39:? ? ? ? ? this.next(options.loop);? ? ? ? ? break;? ? ? ? // ArrowDown? ? ? ? case 40:? ? ? ? ? // Prevent scroll on Firefox? ? ? ? ? e.preventDefault();? ? ? ? ? // Zoom out? ? ? ? ? this.zoom(-options.zoomRatio, true);? ? ? ? ? break;? ? ? ? // Ctrl + 0? ? ? ? case 48:? ? ? ? // Fall through? ? ? ? // Ctrl + 1? ? ? ? // eslint-disable-next-line no-fallthrough? ? ? ? case 49:? ? ? ? ? if (e.ctrlKey) {? ? ? ? ? ? e.preventDefault();? ? ? ? ? ? this.toggle();? ? ? ? ? }? ? ? ? ? break;? ? ? ? default:? ? ? }? ? },? ? dragstart: function dragstart(e) {? ? ? if (e.target.tagName.toLowerCase() === 'img') {? ? ? ? e.preventDefault();? ? ? }? ? },? ? pointerdown: function pointerdown(e) {? ? ? var options = this.options,? ? ? ? ? pointers = this.pointers;? ? ? if (!this.viewed || this.showing || this.viewing || this.hiding) {? ? ? ? return;? ? ? }? ? ? // This line is required for preventing page zooming in iOS browsers? ? ? e.preventDefault();? ? ? if (e.changedTouches) {? ? ? ? forEach(e.changedTouches, function (touch) {? ? ? ? ? pointers[touch.identifier] = getPointer(touch);? ? ? ? });? ? ? } else {? ? ? ? pointers[e.pointerId || 0] = getPointer(e);? ? ? }? ? ? var action = options.movable ? ACTION_MOVE : false;? ? ? if (Object.keys(pointers).length > 1) {? ? ? ? action = ACTION_ZOOM;? ? ? } else if ((e.pointerType === 'touch' || e.type === 'touchstart') && this.isSwitchable()) {? ? ? ? action = ACTION_SWITCH;? ? ? }? ? ? if (options.transition && (action === ACTION_MOVE || action === ACTION_ZOOM)) {? ? ? ? removeClass(this.image, CLASS_TRANSITION);? ? ? }? ? ? this.action = action;? ? },? ? pointermove: function pointermove(e) {? ? ? var pointers = this.pointers,? ? ? ? ? action = this.action;? ? ? if (!this.viewed || !action) {? ? ? ? return;? ? ? }? ? ? e.preventDefault();? ? ? if (e.changedTouches) {? ? ? ? forEach(e.changedTouches, function (touch) {? ? ? ? ? assign(pointers[touch.identifier], getPointer(touch, true));? ? ? ? });? ? ? } else {? ? ? ? assign(pointers[e.pointerId || 0], getPointer(e, true));? ? ? }? ? ? this.change(e);? ? },? ? pointerup: function pointerup(e) {? ? ? var action = this.action,? ? ? ? ? pointers = this.pointers;? ? ? if (e.changedTouches) {? ? ? ? forEach(e.changedTouches, function (touch) {? ? ? ? ? delete pointers[touch.identifier];? ? ? ? });? ? ? } else {? ? ? ? delete pointers[e.pointerId || 0];? ? ? }? ? ? if (!action) {? ? ? ? return;? ? ? }? ? ? e.preventDefault();? ? ? if (this.options.transition && (action === ACTION_MOVE || action === ACTION_ZOOM)) {? ? ? ? addClass(this.image, CLASS_TRANSITION);? ? ? }? ? ? this.action = false;? ? },? ? resize: function resize() {? ? ? var _this2 = this;? ? ? if (!this.isShown || this.hiding) {? ? ? ? return;? ? ? }? ? ? this.initContainer();? ? ? this.initViewer();? ? ? this.renderViewer();? ? ? this.renderList();? ? ? var clientH = $(window).height();? ? ? $('.viewer-canvas > p').css({ 'position': 'absolute', 'bottom': '200px' })? ? ? if (this.viewed) {? ? ? ? this.initImage(function () {? ? ? ? ? _this2.renderImage();? ? ? ? });? ? ? }? ? ? if (this.played) {? ? ? ? if (this.options.fullscreen && this.fulled && !document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {? ? ? ? ? this.stop();? ? ? ? ? return;? ? ? ? }? ? ? ? forEach(this.player.getElementsByTagName('img'), function (image) {? ? ? ? ? addListener(image, EVENT_LOAD, _this2.loadImage.bind(_this2), {? ? ? ? ? ? once: true? ? ? ? ? });? ? ? ? ? dispatchEvent(image, EVENT_LOAD);? ? ? ? });? ? ? }? ? },? ? wheel: function wheel(e) {? ? ? var _this3 = this;? ? ? if (!this.viewed) {? ? ? ? return;? ? ? }? ? ? e.preventDefault();? ? ? // Limit wheel speed to prevent zoom too fast? ? ? if (this.wheeling) {? ? ? ? return;? ? ? }? ? ? this.wheeling = true;? ? ? setTimeout(function () {? ? ? ? _this3.wheeling = false;? ? ? }, 50);? ? ? var ratio = Number(this.options.zoomRatio) || 0.1;? ? ? var delta = 1;? ? ? if (e.deltaY) {? ? ? ? delta = e.deltaY > 0 ? 1 : -1;? ? ? } else if (e.wheelDelta) {? ? ? ? delta = -e.wheelDelta / 120;? ? ? } else if (e.detail) {? ? ? ? delta = e.detail > 0 ? 1 : -1;? ? ? }? ? ? this.zoom(-delta * ratio, true, e);? ? }? };? var methods = {? ? /** Show the viewer (only available in modal mode)? ? * @param {boolean} [immediate=false] - Indicates if show the viewer immediately or not.? ? * @returns {Viewer} this? ? */? ? ? show: function show() {? ? ? var immediate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;? ? ? var element = this.element,? ? ? ? ? options = this.options;? ? ? if (options.inline || this.showing || this.isShown || this.showing) {? ? ? ? return this;? ? ? }? ? ? if (!this.ready) {? ? ? ? this.build();? ? ? ? if (this.ready) {? ? ? ? ? this.show(immediate);? ? ? ? }? ? ? ? return this;? ? ? }? ? ? if (isFunction(options.show)) {? ? ? ? addListener(element, EVENT_SHOW, options.show, {? ? ? ? ? once: true? ? ? ? });? ? ? }? ? ? if (dispatchEvent(element, EVENT_SHOW) === false || !this.ready) {? ? ? ? return this;? ? ? }? ? ? if (this.hiding) {? ? ? ? this.transitioning.abort();? ? ? }? ? ? this.showing = true;? ? ? this.open();? ? ? var viewer = this.viewer;? ? ? removeClass(viewer, CLASS_HIDE);? ? ? if (options.transition && !immediate) {? ? ? ? var shown = this.shown.bind(this);? ? ? ? this.transitioning = {? ? ? ? ? abort: function abort() {? ? ? ? ? ? removeListener(viewer, EVENT_TRANSITION_END, shown);? ? ? ? ? ? removeClass(viewer, CLASS_IN);? ? ? ? ? }? ? ? ? };? ? ? ? addClass(viewer, CLASS_TRANSITION);? ? ? ? // Force reflow to enable CSS3 transition? ? ? ? // eslint-disable-next-line? ? ? ? viewer.offsetWidth;? ? ? ? addListener(viewer, EVENT_TRANSITION_END, shown, {? ? ? ? ? once: true? ? ? ? });? ? ? ? addClass(viewer, CLASS_IN);? ? ? } else {? ? ? ? addClass(viewer, CLASS_IN);? ? ? ? this.shown();? ? ? }? ? ? return this;? ? },? ? /**? ? * Hide the viewer (only available in modal mode)? ? * @param {boolean} [immediate=false] - Indicates if hide the viewer immediately or not.? ? * @returns {Viewer} this? ? */? ? hide: function hide() {? ? ? var immediate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;? ? ? var element = this.element,? ? ? ? ? options = this.options;? ? ? if (options.inline || this.hiding || !(this.isShown || this.showing)) {? ? ? ? return this;? ? ? }? ? ? if (isFunction(options.hide)) {? ? ? ? addListener(element, EVENT_HIDE, options.hide, {? ? ? ? ? once: true? ? ? ? });? ? ? }? ? ? if (dispatchEvent(element, EVENT_HIDE) === false) {? ? ? ? return this;? ? ? }? ? ? if (this.showing) {? ? ? ? this.transitioning.abort();? ? ? }? ? ? this.hiding = true;? ? ? if (this.played) {? ? ? ? this.stop();? ? ? } else if (this.viewing) {? ? ? ? this.viewing.abort();? ? ? }? ? ? var viewer = this.viewer;? ? ? if (options.transition && !immediate) {? ? ? ? var hidden = this.hidden.bind(this);? ? ? ? var hide = function hide() {? ? ? ? ? addListener(viewer, EVENT_TRANSITION_END, hidden, {? ? ? ? ? ? once: true? ? ? ? ? });? ? ? ? ? removeClass(viewer, CLASS_IN);? ? ? ? };? ? ? ? this.transitioning = {? ? ? ? ? abort: function abort() {? ? ? ? ? ? if (this.viewed) {? ? ? ? ? ? ? removeListener(this.image, EVENT_TRANSITION_END, hide);? ? ? ? ? ? } else {? ? ? ? ? ? ? removeListener(viewer, EVENT_TRANSITION_END, hidden);? ? ? ? ? ? }? ? ? ? ? }? ? ? ? };? ? ? ? if (this.viewed) {? ? ? ? ? addListener(this.image, EVENT_TRANSITION_END, hide, {? ? ? ? ? ? once: true? ? ? ? ? });? ? ? ? ? this.zoomTo(0, false, false, true);? ? ? ? } else {? ? ? ? ? hide();? ? ? ? }? ? ? } else {? ? ? ? removeClass(viewer, CLASS_IN);? ? ? ? this.hidden();? ? ? }? ? ? return this;? ? },? ? /**? ? * View one of the images with image's index? ? * @param {number} index - The index of the image to view.? ? * @returns {Viewer} this? ? */? ? view: function view() {? ? ? var _this = this;? ? ? var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;? ? ? index = Number(index) || 0;? ? ? if (!this.isShown) {? ? ? ? this.index = index;? ? ? ? return this.show();? ? ? }? ? ? if (this.hiding || this.played || index < 0 || index >= this.length || this.viewed && index === this.index) {? ? ? ? return this;? ? ? }? ? ? if (this.viewing) {? ? ? ? this.viewing.abort();? ? ? }? ? ? var element = this.element,? ? ? ? ? options = this.options,? ? ? ? ? title = this.title,? ? ? ? ? canvas = this.canvas;? ? ? var item = this.items[index];? ? ? var img = item.querySelector('img');? ? ? var P = item.querySelector('p');? ? ? var url = getData(img, 'originalUrl');? ? ? var titles = P.innerHTML;? ? ? var alt = img.getAttribute('alt');? ? ? var image = document.createElement('img');? ? ? image.src = url;? ? ? image.alt = alt;? ? ? var p = document.createElement('p');? ? ? console.log(titles)? ? p.innerHTML = '' + titles + '';? ? ? ? ? ? if (isFunction(options.view)) {? ? ? ? addListener(element, EVENT_VIEW, options.view, {? ? ? ? ? once: true? ? ? ? });? ? ? }? ? ? if (dispatchEvent(element, EVENT_VIEW, {? ? ? ? originalImage: this.images[index],? ? ? ? index: index,? ? ? ? image: image? ? ? }) === false || !this.isShown || this.hiding || this.played) {? ? ? ? return this;? ? ? }? ? ? this.image = image;? ? ? removeClass(this.items[this.index], CLASS_ACTIVE);? ? ? addClass(item, CLASS_ACTIVE);? ? ? this.viewed = false;? ? ? this.index = index;? ? ? this.imageData = {};? ? ? addClass(image, CLASS_INVISIBLE);? ? ? if (options.loading) {? ? ? ? addClass(canvas, CLASS_LOADING);? ? ? }? ? ? canvas.innerHTML = '';? ? ? canvas.appendChild(image);? ? ? canvas.appendChild(p);? ? ? if (titles == '') {? ? ? ? ? p.innerHTML = '';? ? ? }? ? ? // Center current item? ? ? this.renderList();? ? ? var clientH = $(window).height()/2;? ? ? p.style.cssText = 'position: absolute;bottom: 200px';? ? ? // Clear title? ? ? title.innerHTML = '';? ? ? var currentIndex = this.index + 1;? ? ? var totle = $("#galley ul:first-child li").length;? ? ? // Generate title after viewed? ? ? var onViewed = function onViewed() {? ? ? ? var imageData = _this.imageData;? ? ? ? title.textContent = currentIndex + '/' + totle? ? ? ? // title.textContent = alt + ' (' + imageData.naturalWidth + ' \xD7 ' + imageData.naturalHeight + ')';? ? ? };? ? ? var onLoad = void 0;? ? ? addListener(element, EVENT_VIEWED, onViewed, {? ? ? ? once: true? ? ? });? ? ? this.viewing = {? ? ? ? abort: function abort() {? ? ? ? ? removeListener(element, EVENT_VIEWED, onViewed);? ? ? ? ? if (image.complete) {? ? ? ? ? ? if (this.imageRendering) {? ? ? ? ? ? ? this.imageRendering.abort();? ? ? ? ? ? } else if (this.imageInitializing) {? ? ? ? ? ? ? this.imageInitializing.abort();? ? ? ? ? ? }? ? ? ? ? } else {? ? ? ? ? ? removeListener(image, EVENT_LOAD, onLoad);? ? ? ? ? ? if (this.timeout) {? ? ? ? ? ? ? clearTimeout(this.timeout);? ? ? ? ? ? }? ? ? ? ? }? ? ? ? }? ? ? };? ? ? if (image.complete) {? ? ? ? this.load();? ? ? } else {? ? ? ? addListener(image, EVENT_LOAD, onLoad = this.load.bind(this), {? ? ? ? ? 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);? ? ? ? ? _this.timeout = false;? ? ? ? }, 1000);? ? ? }? ? ? return this;? ? },? ? /**? ? * View the previous image? ? * @param {boolean} [loop=false] - Indicate if view the last one? ? * when it is the first one at present.? ? * @returns {Viewer} this? ? */? ? prev: function prev() {? ? ? var loop = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;? ? ? var index = this.index - 1;? ? ? if (index < 0) {? ? ? ? index = loop ? this.length - 1 : 0;? ? ? }? ? ? this.view(index);? ? ? return this;? ? },? ? /**? ? * View the next image? ? * @param {boolean} [loop=false] - Indicate if view the first one? ? * when it is the last one at present.? ? * @returns {Viewer} this? ? */? ? next: function next() {? ? ? var loop = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;? ? ? var maxIndex = this.length - 1;? ? ? var index = this.index + 1;? ? ? if (index > maxIndex) {? ? ? ? index = loop ? 0 : maxIndex;? ? ? }? ? ? this.view(index);? ? ? return this;? ? },? ? /**? ? * Move the image with relative offsets.? ? * @param {number} offsetX - The relative offset distance on the x-axis.? ? * @param {number} offsetY - The relative offset distance on the y-axis.? ? * @returns {Viewer} this? ? */? ? move: function move(offsetX, offsetY) {? ? ? var imageData = this.imageData;? ? ? this.moveTo(isUndefined(offsetX) ? offsetX : imageData.left + Number(offsetX), isUndefined(offsetY) ? offsetY : imageData.top + Number(offsetY));? ? ? return this;? ? },? ? /**? ? * Move the image to an absolute point.? ? * @param {number} x - The x-axis coordinate.? ? * @param {number} [y=x] - The y-axis coordinate.? ? * @returns {Viewer} this? ? */? ? moveTo: function moveTo(x) {? ? ? var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : x;? ? ? var imageData = this.imageData;? ? ? x = Number(x);? ? ? y = Number(y);? ? ? if (this.viewed && !this.played && this.options.movable) {? ? ? ? var changed = false;? ? ? ? if (isNumber(x)) {? ? ? ? ? imageData.left = x;? ? ? ? ? changed = true;? ? ? ? }? ? ? ? if (isNumber(y)) {? ? ? ? ? imageData.top = y;? ? ? ? ? changed = true;? ? ? ? }? ? ? ? if (changed) {? ? ? ? ? this.renderImage();? ? ? ? }? ? ? }? ? ? return this;? ? },? ? /**? ? * Zoom the image with a relative ratio.? ? * @param {number} ratio - The target ratio.? ? * @param {boolean} [hasTooltip=false] - Indicates if it has a tooltip or not.? ? * @param {Event} [_originalEvent=null] - The original event if any.? ? * @returns {Viewer} this? ? */? ? zoom: function zoom(ratio) {? ? ? var hasTooltip = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;? ? ? var _originalEvent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;? ? ? var imageData = this.imageData;? ? ? ratio = Number(ratio);? ? ? if (ratio < 0) {? ? ? ? ratio = 1 / (1 - ratio);? ? ? } else {? ? ? ? ratio = 1 + ratio;? ? ? }? ? ? this.zoomTo(imageData.width * ratio / imageData.naturalWidth, hasTooltip, _originalEvent);? ? ? return this;? ? },? ? /**? ? * Zoom the image to an absolute ratio.? ? * @param {number} ratio - The target ratio.? ? * @param {boolean} [hasTooltip=false] - Indicates if it has a tooltip or not.? ? * @param {Event} [_originalEvent=null] - The original event if any.? ? * @param {Event} [_zoomable=false] - Indicates if the current zoom is available or not.? ? * @returns {Viewer} this? ? */? ? zoomTo: function zoomTo(ratio) {? ? ? var hasTooltip = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;? ? ? var _this2 = this;? ? ? var _originalEvent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;? ? ? var _zoomable = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;? ? ? var element = this.element,? ? ? ? ? options = this.options,? ? ? ? ? pointers = this.pointers,? ? ? ? ? imageData = this.imageData;? ? ? 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);? ? ? ? ? ratio = Math.min(Math.max(ratio, minZoomRatio), maxZoomRatio);? ? ? ? }? ? ? ? if (_originalEvent && ratio > 0.95 && ratio < 1.05) {? ? ? ? ? ratio = 1;? ? ? ? }? ? ? ? var newWidth = imageData.naturalWidth * ratio;? ? ? ? var newHeight = imageData.naturalHeight * ratio;? ? ? ? var oldRatio = imageData.width / imageData.naturalWidth;? ? ? ? if (isFunction(options.zoom)) {? ? ? ? ? addListener(element, EVENT_ZOOM, options.zoom, {? ? ? ? ? ? once: true? ? ? ? ? });? ? ? ? }? ? ? ? if (dispatchEvent(element, EVENT_ZOOM, {? ? ? ? ? ratio: ratio,? ? ? ? ? oldRatio: oldRatio,? ? ? ? ? originalEvent: _originalEvent? ? ? ? }) === false) {? ? ? ? ? return this;? ? ? ? }? ? ? ? this.zooming = true;? ? ? ? if (_originalEvent) {? ? ? ? ? var offset = getOffset(this.viewer);? ? ? ? ? var center = pointers && Object.keys(pointers).length ? getPointersCenter(pointers) : {? ? ? ? ? ? pageX: _originalEvent.pageX,? ? ? ? ? ? pageY: _originalEvent.pageY? ? ? ? ? };? ? ? ? ? // Zoom from the triggering point of the event? ? ? ? ? imageData.left -= (newWidth - imageData.width) * ((center.pageX - offset.left - imageData.left) / imageData.width);? ? ? ? ? imageData.top -= (newHeight - imageData.height) * ((center.pageY - offset.top - imageData.top) / imageData.height);? ? ? ? } else {? ? ? ? ? // Zoom from the center of the image? ? ? ? ? imageData.left -= (newWidth - imageData.width) / 2;? ? ? ? ? imageData.top -= (newHeight - imageData.height) / 2;? ? ? ? }? ? ? ? imageData.width = newWidth;? ? ? ? imageData.height = newHeight;? ? ? ? imageData.ratio = ratio;? ? ? ? this.renderImage(function () {? ? ? ? ? _this2.zooming = false;? ? ? ? ? if (isFunction(options.zoomed)) {? ? ? ? ? ? addListener(element, EVENT_ZOOMED, options.zoomed, {? ? ? ? ? ? ? once: true? ? ? ? ? ? });? ? ? ? ? }? ? ? ? ? dispatchEvent(element, EVENT_ZOOMED, {? ? ? ? ? ? ratio: ratio,? ? ? ? ? ? oldRatio: oldRatio,? ? ? ? ? ? originalEvent: _originalEvent? ? ? ? ? });? ? ? ? });? ? ? ? if (hasTooltip) {? ? ? ? ? this.tooltip();? ? ? ? }? ? ? }? ? ? return this;? ? },? ? /**? ? * Rotate the image with a relative degree.? ? * @param {number} degree - The rotate degree.? ? * @returns {Viewer} this? ? */? ? rotate: function rotate(degree) {? ? ? this.rotateTo((this.imageData.rotate || 0) + Number(degree));? ? ? return this;? ? },? ? /**? ? * Rotate the image to an absolute degree.? ? * @param {number} degree - The rotate degree.? ? * @returns {Viewer} this? ? */? ? rotateTo: function rotateTo(degree) {? ? ? var imageData = this.imageData;? ? ? degree = Number(degree);? ? ? if (isNumber(degree) && this.viewed && !this.played && this.options.rotatable) {? ? ? ? imageData.rotate = degree;? ? ? ? this.renderImage();? ? ? }? ? ? return this;? ? },? ? /**? ? * Scale the image on the x-axis.? ? * @param {number} scaleX - The scale ratio on the x-axis.? ? * @returns {Viewer} this? ? */? ? scaleX: function scaleX(_scaleX) {? ? ? this.scale(_scaleX, this.imageData.scaleY);? ? ? return this;? ? },? ? /**? ? * Scale the image on the y-axis.? ? * @param {number} scaleY - The scale ratio on the y-axis.? ? * @returns {Viewer} this? ? */? ? scaleY: function scaleY(_scaleY) {? ? ? this.scale(this.imageData.scaleX, _scaleY);? ? ? return this;? ? },? ? /**? ? * Scale the image.? ? * @param {number} scaleX - The scale ratio on the x-axis.? ? * @param {number} [scaleY=scaleX] - The scale ratio on the y-axis.? ? * @returns {Viewer} this? ? */? ? scale: function scale(scaleX) {? ? ? var scaleY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : scaleX;? ? ? var imageData = this.imageData;? ? ? scaleX = Number(scaleX);? ? ? scaleY = Number(scaleY);? ? ? if (this.viewed && !this.played && this.options.scalable) {? ? ? ? var changed = false;? ? ? ? if (isNumber(scaleX)) {? ? ? ? ? imageData.scaleX = scaleX;? ? ? ? ? changed = true;? ? ? ? }? ? ? ? if (isNumber(scaleY)) {? ? ? ? ? imageData.scaleY = scaleY;? ? ? ? ? changed = true;? ? ? ? }? ? ? ? if (changed) {? ? ? ? ? this.renderImage();? ? ? ? }? ? ? }? ? ? return this;? ? },? ? /**? ? * Play the images? ? * @param {boolean} [fullscreen=false] - Indicate if request fullscreen or not.? ? * @returns {Viewer} this? ? */? ? play: function play() {? ? ? var _this3 = this;? ? ? var fullscreen = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;? ? ? if (!this.isShown || this.played) {? ? ? ? return this;? ? ? }? ? ? var options = this.options,? ? ? ? ? player = this.player;? ? ? var onLoad = this.loadImage.bind(this);? ? ? var list = [];? ? ? var total = 0;? ? ? var index = 0;? ? ? this.played = true;? ? ? this.onLoadWhenPlay = onLoad;? ? ? if (fullscreen) {? ? ? ? this.requestFullscreen();? ? ? }? ? ? addClass(player, CLASS_SHOW);? ? ? forEach(this.items, function (item, i) {? ? ? ? var img = item.querySelector('img');? ? ? ? var image = document.createElement('img');? ? ? ? image.src = getData(img, 'originalUrl');? ? ? ? image.alt = img.getAttribute('alt');? ? ? ? total += 1;? ? ? ? addClass(image, CLASS_FADE);? ? ? ? toggleClass(image, CLASS_TRANSITION, options.transition);? ? ? ? if (hasClass(item, CLASS_ACTIVE)) {? ? ? ? ? addClass(image, CLASS_IN);? ? ? ? ? index = i;? ? ? ? }? ? ? ? list.push(image);? ? ? ? addListener(image, EVENT_LOAD, onLoad, {? ? ? ? ? once: true? ? ? ? });? ? ? ? player.appendChild(image);? ? ? });? ? ? if (isNumber(options.interval) && options.interval > 0) {? ? ? ? var play = function play() {? ? ? ? ? _this3.playing = setTimeout(function () {? ? ? ? ? ? removeClass(list[index], CLASS_IN);? ? ? ? ? ? index += 1;? ? ? ? ? ? index = index < total ? index : 0;? ? ? ? ? ? addClass(list[index], CLASS_IN);? ? ? ? ? ? play();? ? ? ? ? }, options.interval);? ? ? ? };? ? ? ? if (total > 1) {? ? ? ? ? play();? ? ? ? }? ? ? }? ? ? return this;? ? },? ? // Stop play? ? stop: function stop() {? ? ? var _this4 = this;? ? ? if (!this.played) {? ? ? ? return this;? ? ? }? ? ? var player = this.player;? ? ? this.played = false;? ? ? clearTimeout(this.playing);? ? ? forEach(player.getElementsByTagName('img'), function (image) {? ? ? ? removeListener(image, EVENT_LOAD, _this4.onLoadWhenPlay);? ? ? });? ? ? removeClass(player, CLASS_SHOW);? ? ? player.innerHTML = '';? ? ? this.exitFullscreen();? ? ? return this;? ? },? ? // Enter modal mode (only available in inline mode)? ? full: function full() {? ? ? var _this5 = this;? ? ? var options = this.options,? ? ? ? ? viewer = this.viewer,? ? ? ? ? image = this.image,? ? ? ? ? list = this.list;? ? ? if (!this.isShown || this.played || this.fulled || !options.inline) {? ? ? ? return this;? ? ? }? ? ? 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);? ? ? ? }? ? ? }? ? ? addClass(viewer, CLASS_FIXED);? ? ? viewer.setAttribute('style', '');? ? ? setStyle(viewer, {? ? ? ? zIndex: options.zIndex? ? ? });? ? ? this.initContainer();? ? ? this.viewerData = assign({}, this.containerData);? ? ? this.renderList();? ? ? if (this.viewed) {? ? ? ? this.initImage(function () {? ? ? ? ? _this5.renderImage(function () {? ? ? ? ? ? if (options.transition) {? ? ? ? ? ? ? setTimeout(function () {? ? ? ? ? ? ? ? addClass(image, CLASS_TRANSITION);? ? ? ? ? ? ? ? addClass(list, CLASS_TRANSITION);? ? ? ? ? ? ? }, 0);? ? ? ? ? ? }? ? ? ? ? });? ? ? ? });? ? ? }? ? ? return this;? ? },? ? // Exit modal mode (only available in inline mode)? ? exit: function exit() {? ? ? var _this6 = this;? ? ? var options = this.options,? ? ? ? ? viewer = this.viewer,? ? ? ? ? image = this.image,? ? ? ? ? list = this.list;? ? ? if (!this.isShown || this.played || !this.fulled || !options.inline) {? ? ? ? return this;? ? ? }? ? ? 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(viewer, CLASS_FIXED);? ? ? setStyle(viewer, {? ? ? ? zIndex: options.zIndexInline? ? ? });? ? ? this.viewerData = assign({}, this.parentData);? ? ? this.renderViewer();? ? ? this.renderList();? ? ? if (this.viewed) {? ? ? ? this.initImage(function () {? ? ? ? ? _this6.renderImage(function () {? ? ? ? ? ? if (options.transition) {? ? ? ? ? ? ? setTimeout(function () {? ? ? ? ? ? ? ? addClass(image, CLASS_TRANSITION);? ? ? ? ? ? ? ? addClass(list, CLASS_TRANSITION);? ? ? ? ? ? ? }, 0);? ? ? ? ? ? }? ? ? ? ? });? ? ? ? });? ? ? }? ? ? return this;? ? },? ? // Show the current ratio of the image with percentage? ? tooltip: function tooltip() {? ? ? var _this7 = this;? ? ? var options = this.options,? ? ? ? ? tooltipBox = this.tooltipBox,? ? ? ? ? imageData = this.imageData;? ? ? if (!this.viewed || this.played || !options.tooltip) {? ? ? ? return this;? ? ? }? ? ? tooltipBox.textContent = Math.round(imageData.ratio * 100) + '%';? ? ? if (!this.tooltipping) {? ? ? ? if (options.transition) {? ? ? ? ? if (this.fading) {? ? ? ? ? ? dispatchEvent(tooltipBox, EVENT_TRANSITION_END);? ? ? ? ? }? ? ? ? ? addClass(tooltipBox, CLASS_SHOW);? ? ? ? ? addClass(tooltipBox, CLASS_FADE);? ? ? ? ? addClass(tooltipBox, CLASS_TRANSITION);? ? ? ? ? // Force reflow to enable CSS3 transition? ? ? ? ? // eslint-disable-next-line? ? ? ? ? tooltipBox.offsetWidth;? ? ? ? ? addClass(tooltipBox, CLASS_IN);? ? ? ? } else {? ? ? ? ? addClass(tooltipBox, CLASS_SHOW);? ? ? ? }? ? ? } else {? ? ? ? clearTimeout(this.tooltipping);? ? ? }? ? ? this.tooltipping = setTimeout(function () {? ? ? ? if (options.transition) {? ? ? ? ? addListener(tooltipBox, EVENT_TRANSITION_END, function () {? ? ? ? ? ? removeClass(tooltipBox, CLASS_SHOW);? ? ? ? ? ? removeClass(tooltipBox, CLASS_FADE);? ? ? ? ? ? removeClass(tooltipBox, CLASS_TRANSITION);? ? ? ? ? ? _this7.fading = false;? ? ? ? ? }, {? ? ? ? ? ? once: true? ? ? ? ? });? ? ? ? ? removeClass(tooltipBox, CLASS_IN);? ? ? ? ? _this7.fading = true;? ? ? ? } else {? ? ? ? ? removeClass(tooltipBox, CLASS_SHOW);? ? ? ? }? ? ? ? _this7.tooltipping = false;? ? ? }, 1000);? ? ? return this;? ? },? ? // Toggle the image size between its natural size and initial size? ? toggle: function toggle() {? ? ? if (this.imageData.ratio === 1) {? ? ? ? this.zoomTo(this.initialImageData.ratio, true);? ? ? } else {? ? ? ? this.zoomTo(1, true);? ? ? }? ? ? return this;? ? },? ? // Reset the image to its initial state? ? reset: function reset() {? ? ? if (this.viewed && !this.played) {? ? ? ? this.imageData = assign({}, this.initialImageData);? ? ? ? this.renderImage();? ? ? }? ? ? return this;? ? },? ? // Update viewer when images changed? ? update: function update() {? ? ? var element = this.element,? ? ? ? ? options = this.options,? ? ? ? ? isImg = this.isImg;? ? ? // Destroy viewer if the target image was deleted? ? ? if (isImg && !element.parentNode) {? ? ? ? return this.destroy();? ? ? }? ? ? var images = [];? ? ? forEach(isImg ? [element] : element.querySelectorAll('img'), function (image) {? ? ? ? if (options.filter) {? ? ? ? ? if (options.filter(image)) {? ? ? ? ? ? images.push(image);? ? ? ? ? }? ? ? ? } else {? ? ? ? ? images.push(image);? ? ? ? }? ? ? });? ? ? if (!images.length) {? ? ? ? return this;? ? ? }? ? ? this.images = images;? ? ? this.length = images.length;? ? ? if (this.ready) {? ? ? ? var indexes = [];? ? ? ? forEach(this.items, function (item, i) {? ? ? ? ? var img = item.querySelector('img');? ? ? ? ? var image = images[i];? ? ? ? ? if (image) {? ? ? ? ? ? if (image.src !== img.src) {? ? ? ? ? ? ? indexes.push(i);? ? ? ? ? ? }? ? ? ? ? } else {? ? ? ? ? ? indexes.push(i);? ? ? ? ? }? ? ? ? });? ? ? ? setStyle(this.list, {? ? ? ? ? width: 'auto'? ? ? ? });? ? ? ? this.initList();? ? ? ? if (this.isShown) {? ? ? ? ? if (this.length) {? ? ? ? ? ? if (this.viewed) {? ? ? ? ? ? ? var index = indexes.indexOf(this.index);? ? ? ? ? ? ? if (index >= 0) {? ? ? ? ? ? ? ? this.viewed = false;? ? ? ? ? ? ? ? this.view(Math.max(this.index - (index + 1), 0));? ? ? ? ? ? ? } else {? ? ? ? ? ? ? ? addClass(this.items[this.index], CLASS_ACTIVE);? ? ? ? ? ? ? }? ? ? ? ? ? }? ? ? ? ? } else {? ? ? ? ? ? this.image = null;? ? ? ? ? ? this.viewed = false;? ? ? ? ? ? this.index = 0;? ? ? ? ? ? this.imageData = {};? ? ? ? ? ? this.canvas.innerHTML = '';? ? ? ? ? ? this.title.innerHTML = '';? ? ? ? ? }? ? ? ? }? ? ? } else {? ? ? ? this.build();? ? ? }? ? ? return this;? ? },? ? // Destroy the viewer? ? destroy: function destroy() {? ? ? var element = this.element,? ? ? ? ? options = this.options;? ? ? if (!getData(element, NAMESPACE)) {? ? ? ? return this;? ? ? }? ? ? this.destroyed = true;? ? ? if (this.ready) {? ? ? ? if (this.played) {? ? ? ? ? this.stop();? ? ? ? }? ? ? ? if (options.inline) {? ? ? ? ? if (this.fulled) {? ? ? ? ? ? this.exit();? ? ? ? ? }? ? ? ? ? this.unbind();? ? ? ? } else if (this.isShown) {? ? ? ? ? if (this.viewing) {? ? ? ? ? ? if (this.imageRendering) {? ? ? ? ? ? ? this.imageRendering.abort();? ? ? ? ? ? } else if (this.imageInitializing) {? ? ? ? ? ? ? this.imageInitializing.abort();? ? ? ? ? ? }? ? ? ? ? }? ? ? ? ? if (this.hiding) {? ? ? ? ? ? this.transitioning.abort();? ? ? ? ? }? ? ? ? ? this.hidden();? ? ? ? } else if (this.showing) {? ? ? ? ? this.transitioning.abort();? ? ? ? ? this.hidden();? ? ? ? }? ? ? ? this.ready = false;? ? ? ? this.viewer.parentNode.removeChild(this.viewer);? ? ? } else if (options.inline) {? ? ? ? if (this.delaying) {? ? ? ? ? this.delaying.abort();? ? ? ? } else if (this.initializing) {? ? ? ? ? this.initializing.abort();? ? ? ? }? ? ? }? ? ? if (!options.inline) {? ? ? ? removeListener(element, EVENT_CLICK, this.onStart);? ? ? }? ? ? removeData(element, NAMESPACE);? ? ? return this;? ? }? };? var others = {? ? open: function open() {? ? ? var body = this.body;? ? ? addClass(body, CLASS_OPEN);? ? ? body.style.paddingRight = this.scrollbarWidth + (parseFloat(this.initialBodyPaddingRight) || 0) + 'px';? ? },? ? close: function close() {? ? ? var body = this.body;? ? ? removeClass(body, CLASS_OPEN);? ? ? body.style.paddingRight = this.initialBodyPaddingRight;? ? },? ? shown: function shown() {? ? ? var element = this.element,? ? ? ? ? options = this.options;? ? ? this.fulled = true;? ? ? this.isShown = true;? ? ? this.render();? ? ? this.bind();? ? ? this.showing = false;? ? ? if (isFunction(options.shown)) {? ? ? ? addListener(element, EVENT_SHOWN, options.shown, {? ? ? ? ? once: true? ? ? ? });? ? ? }? ? ? if (dispatchEvent(element, EVENT_SHOWN) === false) {? ? ? ? return;? ? ? }? ? ? if (this.ready && this.isShown && !this.hiding) {? ? ? ? this.view(this.index);? ? ? }? ? },? ? hidden: function hidden() {? ? ? var element = this.element,? ? ? ? ? options = this.options;? ? ? this.fulled = false;? ? ? this.viewed = false;? ? ? this.isShown = false;? ? ? this.close();? ? ? this.unbind();? ? ? addClass(this.viewer, CLASS_HIDE);? ? ? this.resetList();? ? ? this.resetImage();? ? ? this.hiding = false;? ? ? if (!this.destroyed) {? ? ? ? if (isFunction(options.hidden)) {? ? ? ? ? addListener(element, EVENT_HIDDEN, options.hidden, {? ? ? ? ? ? once: true? ? ? ? ? });? ? ? ? }? ? ? ? dispatchEvent(element, EVENT_HIDDEN);? ? ? }? ? },? ? requestFullscreen: function requestFullscreen() {? ? ? var document = this.element.ownerDocument;? ? ? if (this.fulled && !document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {? ? ? ? var documentElement = document.documentElement;? ? ? ? if (documentElement.requestFullscreen) {? ? ? ? ? documentElement.requestFullscreen();? ? ? ? } else if (documentElement.msRequestFullscreen) {? ? ? ? ? documentElement.msRequestFullscreen();? ? ? ? } else if (documentElement.mozRequestFullScreen) {? ? ? ? ? documentElement.mozRequestFullScreen();? ? ? ? } else if (documentElement.webkitRequestFullscreen) {? ? ? ? ? documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);? ? ? ? }? ? ? }? ? },? ? exitFullscreen: function exitFullscreen() {? ? ? if (this.fulled) {? ? ? ? var document = this.element.ownerDocument;? ? ? ? if (document.exitFullscreen) {? ? ? ? ? document.exitFullscreen();? ? ? ? } else if (document.msExitFullscreen) {? ? ? ? ? document.msExitFullscreen();? ? ? ? } else if (document.mozCancelFullScreen) {? ? ? ? ? document.mozCancelFullScreen();? ? ? ? } else if (document.webkitExitFullscreen) {? ? ? ? ? document.webkitExitFullscreen();? ? ? ? }? ? ? }? ? },? ? change: function change(e) {? ? ? var options = this.options,? ? ? ? ? pointers = this.pointers;? ? ? var pointer = pointers[Object.keys(pointers)[0]];? ? ? var offsetX = pointer.endX - pointer.startX;? ? ? var offsetY = pointer.endY - pointer.startY;? ? ? switch (this.action) {? ? ? ? // Move the current image? ? ? ? case ACTION_MOVE:? ? ? ? ? this.move(offsetX, offsetY);? ? ? ? ? break;? ? ? ? // Zoom the current image? ? ? ? case ACTION_ZOOM:? ? ? ? ? this.zoom(getMaxZoomRatio(pointers), false, e);? ? ? ? ? break;? ? ? ? case ACTION_SWITCH:? ? ? ? ? {? ? ? ? ? ? this.action = 'switched';? ? ? ? ? ? var absoluteOffsetX = Math.abs(offsetX);? ? ? ? ? ? if (absoluteOffsetX > 1 && absoluteOffsetX > Math.abs(offsetY)) {? ? ? ? ? ? ? // Empty `pointers` as `touchend` event will not be fired after swiped in iOS browsers.? ? ? ? ? ? ? this.pointers = {};? ? ? ? ? ? ? if (offsetX > 1) {? ? ? ? ? ? ? ? this.prev(options.loop);? ? ? ? ? ? ? } else if (offsetX < -1) {? ? ? ? ? ? ? ? this.next(options.loop);? ? ? ? ? ? ? }? ? ? ? ? ? }? ? ? ? ? ? break;? ? ? ? ? }? ? ? ? default:? ? ? }? ? ? // Override? ? ? forEach(pointers, function (p) {? ? ? ? p.startX = p.endX;? ? ? ? p.startY = p.endY;? ? ? });? ? },? ? isSwitchable: function isSwitchable() {? ? ? var imageData = this.imageData,? ? ? ? ? viewerData = this.viewerData;? ? ? return this.length > 1 && imageData.left >= 0 && imageData.top >= 0 && imageData.width <= viewerData.width && imageData.height <= viewerData.height;? ? }? };? var AnotherViewer = WINDOW.Viewer;? var Viewer = function () {? ? /**? ? * Create a new Viewer.? ? * @param {Element} element - The target element for viewing.? ? * @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) {? ? ? ? throw new Error('The first argument is required and must be an element.');? ? ? }? ? ? this.element = element;? ? ? this.options = assign({}, DEFAULTS, isPlainObject(options) && options);? ? ? this.action = false;? ? ? this.fading = false;? ? ? this.fulled = false;? ? ? this.hiding = false;? ? ? this.imageData = {};? ? ? this.index = 0;? ? ? this.isImg = false;? ? ? this.isShown = false;? ? ? this.length = 0;? ? ? this.played = false;? ? ? this.playing = false;? ? ? this.pointers = {};? ? ? this.ready = false;? ? ? this.showing = false;? ? ? this.timeout = false;? ? ? this.tooltipping = false;? ? ? this.viewed = false;? ? ? this.viewing = false;? ? ? this.wheeling = false;? ? ? this.zooming = false;? ? ? this.init();? ? }? ? createClass(Viewer, [{? ? ? key: 'init',? ? ? value: function init() {? ? ? ? var _this = this;? ? ? ? var element = this.element,? ? ? ? ? ? options = this.options;? ? ? ? if (getData(element, NAMESPACE)) {? ? ? ? ? return;? ? ? ? }? ? ? ? setData(element, NAMESPACE, this);? ? ? ? var isImg = element.tagName.toLowerCase() === 'img';? ? ? ? var images = [];? ? ? ? forEach(isImg ? [element] : element.querySelectorAll('img'), function (image) {? ? ? ? ? if (isFunction(options.filter)) {? ? ? ? ? ? if (options.filter.call(_this, image)) {? ? ? ? ? ? ? images.push(image);? ? ? ? ? ? }? ? ? ? ? } else {? ? ? ? ? ? images.push(image);? ? ? ? ? }? ? ? ? });? ? ? ? if (!images.length) {? ? ? ? ? return;? ? ? ? }? ? ? ? this.isImg = isImg;? ? ? ? this.length = images.length;? ? ? ? this.images = images;? ? ? ? var ownerDocument = element.ownerDocument;? ? ? ? var body = ownerDocument.body || ownerDocument.documentElement;? ? ? ? this.body = body;? ? ? ? this.scrollbarWidth = window.innerWidth - ownerDocument.documentElement.clientWidth;? ? ? ? this.initialBodyPaddingRight = window.getComputedStyle(body).paddingRight;? ? ? ? // Override `transition` option if it is not supported? ? ? ? if (isUndefined(document.createElement(NAMESPACE).style.transition)) {? ? ? ? ? options.transition = false;? ? ? ? }? ? ? ? if (options.inline) {? ? ? ? ? var count = 0;? ? ? ? ? var progress = function progress() {? ? ? ? ? ? count += 1;? ? ? ? ? ? if (count === _this.length) {? ? ? ? ? ? ? var timeout = void 0;? ? ? ? ? ? ? _this.initializing = false;? ? ? ? ? ? ? _this.delaying = {? ? ? ? ? ? ? ? abort: function abort() {? ? ? ? ? ? ? ? ? clearTimeout(timeout);? ? ? ? ? ? ? ? }? ? ? ? ? ? ? };? ? ? ? ? ? ? // build asynchronously to keep `this.viewer` is accessible in `ready` event handler.? ? ? ? ? ? ? timeout = setTimeout(function () {? ? ? ? ? ? ? ? _this.delaying = false;? ? ? ? ? ? ? ? _this.build();? ? ? ? ? ? ? }, 0);? ? ? ? ? ? }? ? ? ? ? };? ? ? ? ? this.initializing = {? ? ? ? ? ? abort: function abort() {? ? ? ? ? ? ? forEach(images, function (image) {? ? ? ? ? ? ? ? if (!image.complete) {? ? ? ? ? ? ? ? ? removeListener(image, EVENT_LOAD, progress);? ? ? ? ? ? ? ? }? ? ? ? ? ? ? });? ? ? ? ? ? }? ? ? ? ? };? ? ? ? ? forEach(images, function (image) {? ? ? ? ? ? if (image.complete) {? ? ? ? ? ? ? progress();? ? ? ? ? ? } else {? ? ? ? ? ? ? addListener(image, EVENT_LOAD, progress, {? ? ? ? ? ? ? ? once: true? ? ? ? ? ? ? });? ? ? ? ? ? }? ? ? ? ? });? ? ? ? } else {? ? ? ? ? addListener(element, EVENT_CLICK, this.onStart = function (_ref) {? ? ? ? ? ? var target = _ref.target;? ? ? ? ? ? if (target.tagName.toLowerCase() === 'img') {? ? ? ? ? ? ? _this.view(_this.images.indexOf(target));? ? ? ? ? ? }? ? ? ? ? });? ? ? ? }? ? ? }? ? }, {? ? ? key: 'build',? ? ? value: function build() {? ? ? ? if (this.ready) {? ? ? ? ? return;? ? ? ? }? ? ? ? var element = this.element,? ? ? ? ? ? options = this.options;? ? ? ? var parent = element.parentNode;? ? ? ? var template = document.createElement('div');? ? ? ? template.innerHTML = TEMPLATE;? ? ? ? var viewer = template.querySelector('.' + NAMESPACE + '-container');? ? ? ? var title = viewer.querySelector('.' + NAMESPACE + '-title');? ? ? ? var toolbar = viewer.querySelector('.' + NAMESPACE + '-toolbar');? ? ? ? var navbar = viewer.querySelector('.' + NAMESPACE + '-navbar');? ? ? ? var button = viewer.querySelector('.' + NAMESPACE + '-button');? ? ? ? var canvas = viewer.querySelector('.' + NAMESPACE + '-canvas');? ? ? ? this.parent = parent;? ? ? ? this.viewer = viewer;? ? ? ? this.title = title;? ? ? ? this.toolbar = toolbar;? ? ? ? this.navbar = navbar;? ? ? ? this.button = button;? ? ? ? this.canvas = canvas;? ? ? ? this.footer = viewer.querySelector('.' + NAMESPACE + '-footer');? ? ? ? this.tooltipBox = viewer.querySelector('.' + NAMESPACE + '-tooltip');? ? ? ? this.player = viewer.querySelector('.' + NAMESPACE + '-player');? ? ? ? this.list = viewer.querySelector('.' + NAMESPACE + '-list');? ? ? ? addClass(title, !options.title ? CLASS_HIDE : getResponsiveClass(options.title));? ? ? ? addClass(navbar, !options.navbar ? CLASS_HIDE : getResponsiveClass(options.navbar));? ? ? ? toggleClass(button, CLASS_HIDE, !options.button);? ? ? ? if (options.backdrop) {? ? ? ? ? addClass(viewer, NAMESPACE + '-backdrop');? ? ? ? ? if (!options.inline && options.backdrop === true) {? ? ? ? ? ? setData(canvas, DATA_ACTION, 'hide');? ? ? ? ? }? ? ? ? }? ? ? ? if (options.toolbar) {? ? ? ? ? var list = document.createElement('ul');? ? ? ? ? var custom = isPlainObject(options.toolbar);? ? ? ? ? var zoomButtons = BUTTONS.slice(0, 3);? ? ? ? ? var rotateButtons = BUTTONS.slice(7, 9);? ? ? ? ? var scaleButtons = BUTTONS.slice(9);? ? ? ? ? if (!custom) {? ? ? ? ? ? addClass(toolbar, getResponsiveClass(options.toolbar));? ? ? ? ? }? ? ? ? ? forEach(custom ? options.toolbar : BUTTONS, function (value, index) {? ? ? ? ? ? var deep = custom && isPlainObject(value);? ? ? ? ? ? var name = custom ? hyphenate(index) : value;? ? ? ? ? ? var show = deep && !isUndefined(value.show) ? value.show : value;? ? ? ? ? ? if (!show || !options.zoomable && zoomButtons.indexOf(name) !== -1 || !options.rotatable && rotateButtons.indexOf(name) !== -1 || !options.scalable && scaleButtons.indexOf(name) !== -1) {? ? ? ? ? ? ? return;? ? ? ? ? ? }? ? ? ? ? ? var size = deep && !isUndefined(value.size) ? value.size : value;? ? ? ? ? ? var click = deep && !isUndefined(value.click) ? value.click : value;? ? ? ? ? ? var item = document.createElement('li');? ? ? ? ? ? item.setAttribute('role', 'button');? ? ? ? ? ? addClass(item, NAMESPACE + '-' + name);? ? ? ? ? ? if (!isFunction(click)) {? ? ? ? ? ? ? setData(item, DATA_ACTION, name);? ? ? ? ? ? }? ? ? ? ? ? if (isNumber(show)) {? ? ? ? ? ? ? addClass(item, getResponsiveClass(show));? ? ? ? ? ? }? ? ? ? ? ? if (['small', 'large'].indexOf(size) !== -1) {? ? ? ? ? ? ? addClass(item, NAMESPACE + '-' + size);? ? ? ? ? ? } else if (name === 'play') {? ? ? ? ? ? ? addClass(item, NAMESPACE + '-large');? ? ? ? ? ? }? ? ? ? ? ? if (isFunction(click)) {? ? ? ? ? ? ? addListener(item, EVENT_CLICK, click);? ? ? ? ? ? }? ? ? ? ? ? list.appendChild(item);? ? ? ? ? });? ? ? ? ? toolbar.appendChild(list);? ? ? ? } else {? ? ? ? ? addClass(toolbar, CLASS_HIDE);? ? ? ? }? ? ? ? if (!options.rotatable) {? ? ? ? ? var rotates = toolbar.querySelectorAll('li[class*="rotate"]');? ? ? ? ? addClass(rotates, CLASS_INVISIBLE);? ? ? ? ? forEach(rotates, function (rotate) {? ? ? ? ? ? toolbar.appendChild(rotate);? ? ? ? ? });? ? ? ? }? ? ? ? if (options.inline) {? ? ? ? ? addClass(button, CLASS_FULLSCREEN);? ? ? ? ? setStyle(viewer, {? ? ? ? ? ? zIndex: options.zIndexInline? ? ? ? ? });? ? ? ? ? if (window.getComputedStyle(parent).position === 'static') {? ? ? ? ? ? setStyle(parent, {? ? ? ? ? ? ? position: 'relative'? ? ? ? ? ? });? ? ? ? ? }? ? ? ? ? parent.insertBefore(viewer, element.nextSibling);? ? ? ? } else {? ? ? ? ? addClass(button, CLASS_CLOSE);? ? ? ? ? addClass(viewer, CLASS_FIXED);? ? ? ? ? addClass(viewer, CLASS_FADE);? ? ? ? ? addClass(viewer, CLASS_HIDE);? ? ? ? ? setStyle(viewer, {? ? ? ? ? ? zIndex: options.zIndex? ? ? ? ? });? ? ? ? ? var container = options.container;? ? ? ? ? if (isString(container)) {? ? ? ? ? ? container = element.ownerDocument.querySelector(container);? ? ? ? ? }? ? ? ? ? if (!container) {? ? ? ? ? ? container = this.body;? ? ? ? ? }? ? ? ? ? container.appendChild(viewer);? ? ? ? }? ? ? ? if (options.inline) {? ? ? ? ? this.render();? ? ? ? ? this.bind();? ? ? ? ? this.isShown = true;? ? ? ? }? ? ? ? this.ready = true;? ? ? ? if (isFunction(options.ready)) {? ? ? ? ? addListener(element, EVENT_READY, options.ready, {? ? ? ? ? ? once: true? ? ? ? ? });? ? ? ? }? ? ? ? if (dispatchEvent(element, EVENT_READY) === false) {? ? ? ? ? this.ready = false;? ? ? ? ? return;? ? ? ? }? ? ? ? if (this.ready && options.inline) {? ? ? ? ? this.view();? ? ? ? }? ? ? }? ? ? /**? ? ? * Get the no conflict viewer class.? ? ? * @returns {Viewer} The viewer class.? ? ? */? ? }], [{? ? ? key: 'noConflict',? ? ? value: function noConflict() {? ? ? ? window.Viewer = AnotherViewer;? ? ? ? return Viewer;? ? ? }? ? ? /**? ? ? * Change the default options.? ? ? * @param {Object} options - The new default options.? ? ? */? ? }, {? ? ? key: 'setDefaults',? ? ? value: function setDefaults(options) {? ? ? ? assign(DEFAULTS, isPlainObject(options) && options);? ? ? }? ? }]);? ? return Viewer;? }();? assign(Viewer.prototype, render, events, handlers, methods, others);? return Viewer;})));

改后的源碼加上前面有p標(biāo)簽的html五芝，效果：

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末猛频，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子秘遏，更是在濱河造成了極大的恐慌丘薛，老刑警劉巖，帶你破解...
沈念sama閱讀 207,113評(píng)論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異，居然都是意外死亡让蕾，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,644評(píng)論 2贊 381
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來妥粟，“玉大人审丘，你說我怎么就攤上這事」锤” “怎么了滩报？”我有些...
開封第一講書人閱讀 153,340評(píng)論 0贊 344
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長播急。經(jīng)常有香客問我脓钾，道長，這世上最難降的妖魔是什么桩警？我笑而不...
開封第一講書人閱讀 55,449評(píng)論 1贊 279
?港島之戀（遺憾婚禮）
正文為了忘掉前任可训，我火速辦了婚禮，結(jié)果婚禮上捶枢，老公的妹妹穿的比我還像新娘握截。我一直安慰自己，他們只是感情好烂叔，可當(dāng)我...
茶點(diǎn)故事閱讀 64,445評(píng)論 5贊 374
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布谨胞。她就那樣靜靜地躺著，像睡著了一般蒜鸡。火紅的嫁衣襯著肌膚如雪胯努。梳的紋絲不亂的頭發(fā)上牢裳，一...
開封第一講書人閱讀 49,166評(píng)論 1贊 284
城市分裂傳說
那天，我揣著相機(jī)與錄音叶沛，去河邊找鬼蒲讯。笑死，一個(gè)胖子當(dāng)著我的面吹牛恬汁，可吹牛的內(nèi)容都是我干的伶椿。我是一名探鬼主播，決...
沈念sama閱讀 38,442評(píng)論 3贊 401
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼氓侧，長吁一口氣：“原來是場噩夢啊……” “哼脊另！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起约巷，我...
開封第一講書人閱讀 37,105評(píng)論 0贊 261
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤偎痛，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后独郎，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體踩麦，經(jīng)...
沈念sama閱讀 43,601評(píng)論 1贊 300
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 36,066評(píng)論 2贊 325
?白月光啟示錄
正文我和宋清朗相戀三年氓癌，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了谓谦。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 38,161評(píng)論 1贊 334
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡贪婉，死狀恐怖反粥，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情疲迂，我是刑警寧澤才顿，帶...
沈念sama閱讀 33,792評(píng)論 4贊 323
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站尤蒿，受9級(jí)特大地震影響郑气，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜腰池，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,351評(píng)論 3贊 307
男人毒藥：我在死后第九天來索命
文/蒙蒙一尾组、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧示弓，春花似錦演怎、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,352評(píng)論 0贊 19
一樁弒父案爷耀，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至拍皮，卻和暖如春歹叮，著一層夾襖步出監(jiān)牢的瞬間跑杭，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 31,584評(píng)論 1贊 261
情欲美人皮
我被黑心中介騙來泰國打工咆耿，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留德谅，地道東北人。一個(gè)月前我還...
沈念sama閱讀 45,618評(píng)論 2贊 355
代替公主和親
正文我出身青樓萨螺，卻偏偏與公主長得像窄做，于是被迫代替她去往敵國和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子慰技，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 42,916評(píng)論 2贊 344

viewer 插件的應(yīng)用與修改（查看圖片并輪播）

推薦閱讀更多精彩內(nèi)容