img-previewer - npm Package Compare versions

		/*!
		* ImgPreviewer v1.0.4
		* ImgPreviewer v2.0.0
		* https://github.com/yue1123/img-previewer
		@@ -8,493 +8,653 @@ *
		*
		* Date: 2021-05-26T06:21:22.254Z
		* Date: 2021-12-27T08:07:27.019Z
		*/

		(function (global, factory) {
		typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
		typeof define === 'function' && define.amd ? define(factory) :
		(global = typeof globalThis !== 'undefined' ? globalThis : global \|\| self, global.ImgPreviewer = factory());
		}(this, (function () { 'use strict';
		typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
		typeof define === 'function' && define.amd ? define(factory) :
		(global = typeof globalThis !== 'undefined' ? globalThis : global \|\| self, global.ImgPreviewer = factory());
		})(this, (function () { 'use strict';

		function _classCallCheck(instance, Constructor) {
		if (!(instance instanceof Constructor)) {
		throw new TypeError("Cannot call a class as a function");
		/**
		* 防抖函数
		* @export {Funcion}
		* @param {Function} fn 回调函数
		* @param {Number} delay 防抖时间
		* @returns {Function}
		*/
		function debounce(fn, delay) {
		var timer = 0;
		return function (arg) {
		clearTimeout(timer);
		timer = window.setTimeout(function () {
		fn(arg);
		clearTimeout(timer);
		}, delay);
		};
		}
		}

		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);
		/**
		* 阻止默认事件
		* @param {Object} e
		*/
		function preventDefault(e) {
		e.preventDefault();
		}
		}

		function _createClass(Constructor, protoProps, staticProps) {
		if (protoProps) _defineProperties(Constructor.prototype, protoProps);
		if (staticProps) _defineProperties(Constructor, staticProps);
		return Constructor;
		}

		/**
		* 防抖函数
		* @export {Funcion}
		* @param {Function} fn 回调函数
		* @param {Number} delay 防抖时间
		* @returns {Function}
		*/
		function debounce(fn, delay) {
		var timer = null;
		return function (arg) {
		clearTimeout(timer);
		timer = setTimeout(function () {
		fn(arg);
		clearTimeout(timer);
		}, delay);
		};
		}
		/**
		* 阻止默认事件
		* @param {Object} e
		*/

		function preventDefault(e) {
		e.preventDefault();
		}

		/**
		* {
		* start:10,
		* end:10,
		* step:1,
		* style:'font-size'
		* template:'$px'
		* }
		*/
		function runAnimation(el, options, callback) {
		var requestAnimationFrame = window.requestAnimationFrame \|\| window.mozRequestAnimationFrame \|\| window.webkitRequestAnimationFrame \|\| window.msRequestAnimationFrame;
		var cancelAnimationFrame = window.cancelAnimationFrame \|\| window.mozCancelAnimationFrame;
		var start = options.start \|\| 0;
		var end = options.end \|\| 0;
		var step = options.step;
		var playing = null;

		function running() {
		if (step > 0 && start < end \|\| step < 0 && start > end) {
		start += step;
		el.style[options.style] = options.template.replace('$', start);
		playing = requestAnimationFrame(running);
		} else {
		callback && callback();
		cancelAnimationFrame(playing);
		}
		// 获取元素是否出现在可视区域
		function isElementInViewport(el) {
		var viewPortHeight = window.innerHeight \|\| document.documentElement.clientHeight \|\| document.body.clientHeight;
		var offsetTop = el.offsetTop;
		var offsetHeight = el.offsetHeight;
		var scrollTop = document.documentElement.scrollTop;
		var top = offsetTop - scrollTop;
		return offsetHeight + offsetTop > scrollTop && top <= viewPortHeight + 100;
		}

		running();
		}

		function isElementInViewport(el) {
		var viewPortHeight = window.innerHeight \|\| document.documentElement.clientHeight \|\| document.body.clientHeight;
		var offsetTop = el.offsetTop;
		var offsetHeight = el.offsetHeight;
		var scrollTop = document.documentElement.scrollTop;
		var top = offsetTop - scrollTop;
		return offsetHeight + offsetTop > scrollTop && top <= viewPortHeight + 100;
		} // 获取元素位置


		function getElementRect(el) {
		return el.getBoundingClientRect();
		} // 计算放大倍数


		function calcScaleNums(width, height, ratio) {
		var scaleX = windowWidth * ratio / width;
		var scaleY = windowHeight * ratio / height;
		return scaleX > scaleY ? scaleY : scaleX;
		} // 设置图片样式


		function setImageBaseStyle(el, width, height, left, top) {
		el.style.cssText = "width:".concat(width, "px;height:").concat(height, "px;position:fixed; top:").concat(top, "px; left:").concat(left, "px;");
		}

		function taggleModel(flag) {
		previewContainer.style.display = flag ? 'block' : 'none';
		}

		function taggleScrollBar(flag) {
		_BODY.style.overflow = flag ? 'auto' : 'hidden';
		}

		var _BODY, windowHeight, windowWidth;

		var previewContainer = null;
		var imageEl = null;
		var historyInfo = null;
		var currentImageScale = 0;
		var _DEFAULT = {
		ratio: 0.7,
		zoom: {
		min: 0.1,
		max: 5,
		step: 0.1
		},
		opacity: 0.6,
		scrollbar: true
		};

		var ImagePreviewer = /#__PURE__/function () {
		function ImagePreviewer(selector) {
		var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

		_classCallCheck(this, ImagePreviewer);

		this.index = 0;
		this.selector = selector;
		this.options = options;
		this.imageElements = [];
		options.zoom = Object.assign({}, _DEFAULT.zoom, options.zoom \|\| {});
		this.config = Object.assign({}, _DEFAULT, options);

		if (selector && typeof selector === 'string') {
		var el = document.querySelector(selector);

		if (!el) {
		throw new Error('selector is invalid');
		}
		} else {
		throw new Error('ImagePreviewer plugin should css string selector that on first params,like #el,.el');
		}

		this.init();
		} // update image list


		_createClass(ImagePreviewer, [{
		key: "update",
		value: function update() {
		var _this = this;

		this.imageElements = document.querySelectorAll("".concat(this.selector, " img:not(#preview-image)"));
		this.imageElements.forEach(function (item, index) {
		item.onclick = null;

		item.onclick = function (e) {
		_this.handleOpen(e, index);

		taggleModel(true);

		_this.updateIndex(index);
		};
		// 获取元素位置
		function getElementRect(el) {
		return el.getBoundingClientRect();
		}
		/**
		* 获取两数乘以一定比例后,较小的一个
		* @param multiplicator 乘数
		* @param number1 计算比例数1
		* @param number2 计算比例数2
		* @param ratio 比例
		* @returns 两数中比例值小的一个
		*/
		function getTwoNumberSmall(multiplicator1, number1, multiplicator2, number2, ratio) {
		var a = (multiplicator1 * ratio) / number1;
		var b = (multiplicator2 * ratio) / number2;
		return a > b ? b : a;
		}
		function nextTick(fn) {
		requestAnimationFrame(function () {
		fn && fn();
		});
		} // 绑定事件
		}

		}, {
		key: "bindEvent",
		value: function bindEvent() {
		var _this2 = this;

		var mobile = /Android\|webOS\|iPhone\|iPad\|iPod\|BlackBerry/i.test(window.navigator.userAgent);
		var touchstart = mobile ? 'touchstart' : 'mousedown';
		var touchend = mobile ? 'touchend' : 'mouseup';
		var touchmove = mobile ? 'touchmove' : 'mousemove'; // TODO: 每张图片绑定点击事件

		this.imageElements.forEach(function (item, index) {
		item.onclick = function (e) {
		_this2.handleOpen(e, index);

		taggleModel(true);

		_this2.updateIndex(index);
		};
		}); // 点击关闭

		document.getElementById('close').addEventListener('click', function () {
		_this2.handleClose();
		}); // 重置样式

		document.getElementById('reset').addEventListener('click', function () {
		_this2.handleReset();
		}); // 上一张

		document.getElementById('prev').addEventListener('click', function () {
		_this2.prev();
		}); // 下一张

		document.getElementById('next').addEventListener('click', function () {
		_this2.next();
		}); // 蒙版点击关闭

		previewContainer.addEventListener('click', function (e) {
		if (e.target.classList[0] === 'image-container') {
		_this2.handleClose();
		}
		}); // 拖动图片

		imageEl.addEventListener(touchstart, function (e) {
		var diffX = e.clientX - imageEl.offsetLeft;
		var diffY = e.clientY - imageEl.offsetTop;
		this.classList.add('moving');

		this["on".concat(touchmove)] = function (e) {
		var moveX = e.clientX - diffX;
		var moveY = e.clientY - diffY;
		this.style.left = "".concat(moveX, "px");
		this.style.top = "".concat(moveY, "px");
		};

		this["on".concat(touchend)] = function () {
		this.classList.remove('moving');
		this.onmousemove = null;
		};

		this.onmouseout = function () {
		this.classList.remove('moving');
		this.onmousemove = null;
		};
		}); // 缩放图片

		imageEl.addEventListener('mousewheel', function (e) {
		var _this2$config$zoom = _this2.config.zoom,
		min = _this2$config$zoom.min,
		max = _this2$config$zoom.max,
		step = _this2$config$zoom.step;

		if (e.wheelDelta > 0 && currentImageScale < max) {
		currentImageScale += step;
		} else if (currentImageScale > min) {
		currentImageScale -= step;
		}

		imageEl.style.setProperty('--scale', "".concat(currentImageScale.toFixed(2)));
		}, true); // 旋转图片

		document.getElementById('rotate-right').addEventListener('click', function () {
		_this2.handelRotateRight();
		});
		document.getElementById('rotate-left').addEventListener('click', function () {
		_this2.handelRotateLeft();
		}); // 阻止默认事件

		previewContainer.addEventListener('mousewheel', preventDefault);
		document.ondragstart = preventDefault;
		document.ondragend = preventDefault; // 窗口大小改变

		window.onresize = debounce.bind(null, function () {
		_this2.handleClose();

		windowWidth = window.innerWidth;
		windowHeight = window.innerHeight;
		}, 100)();
		} // 重置

		}, {
		key: "handleReset",
		value: function handleReset() {
		imageEl.style.top = "".concat(historyInfo.startY, "px");
		imageEl.style.left = "".concat(historyInfo.startX, "px");
		imageEl.style.setProperty('--rotate', "".concat(0, "deg"));
		imageEl.style.setProperty('--scale', "".concat(historyInfo.scale));
		historyInfo.rotate = 0;
		} // 打开预览

		}, {
		key: "handleOpen",
		value: function handleOpen(e, index) {
		var ratio = this.config.ratio;
		var imageElements = this.imageElements;
		var _e$target = e.target,
		width = _e$target.width,
		height = _e$target.height;
		var startX = e.clientX - e.offsetX;
		var startY = e.clientY - e.offsetY + 1;
		currentImageScale = calcScaleNums(width, height, ratio);
		historyInfo = {
		startX: startX,
		startY: startY,
		endX: windowWidth / 2 - width / 2 - startX,
		endY: windowHeight / 2 - height / 2 - startY,
		scale: currentImageScale,
		rotate: 0
		};
		imageEl.src = imageElements[index].src;
		setImageBaseStyle(imageEl, width, height, startX, startY);
		setTimeout(function () {
		ImagePreviewer.setImageAnimationParams(historyInfo);
		});
		previewContainer.classList.add('show');
		!this.config.scrollbar && taggleScrollBar(false);
		}
		}, {
		key: "handleClose",
		value: // 关闭预览
		function handleClose() {
		var opacity = this.config.opacity;
		var current = this.imageElements[this.index]; // console.log(isElementInViewport)

		if (isElementInViewport(current)) {
		runAnimation(previewContainer, {
		start: opacity,
		end: 0,
		step: -0.02,
		style: 'background',
		template: 'rgba(0, 0, 0, $)'
		}, function () {
		imageEl.style = '';
		imageEl.src = '';
		previewContainer.style.background = "";
		previewContainer.classList.remove('hiding');
		taggleModel(false);
		});

		var _getElementRect = getElementRect(current),
		top = _getElementRect.top,
		left = _getElementRect.left,
		width = _getElementRect.width,
		height = _getElementRect.height;

		imageEl.style.cssText = "width:".concat(width, "px;height:").concat(height, "px;position: fixed; top: ").concat(top, "px; left: ").concat(left, "px;");
		} else {
		imageEl.style.display = 'none'; // image

		runAnimation(previewContainer, {
		start: opacity,
		end: 0,
		step: -0.05,
		style: 'background',
		template: 'rgba(0, 0, 0, $)'
		}, function () {
		imageEl.src = '';
		imageEl.style = '';
		previewContainer.style = "";
		previewContainer.classList.remove('hiding');
		taggleModel(false);
		});
		function ImgPreviewer(selector, options) {
		if (typeof window !== 'object') {
		return;
		}

		previewContainer.classList.remove('show');
		previewContainer.classList.add('hiding');
		!this.config.scrollbar && taggleScrollBar(true);
		} // 向左旋转

		}, {
		key: "handelRotateLeft",
		value: function handelRotateLeft() {
		historyInfo.rotate -= 90;
		imageEl.style.setProperty('--rotate', "".concat(historyInfo.rotate, "deg"));
		} // 向右旋转

		}, {
		key: "handelRotateRight",
		value: function handelRotateRight() {
		historyInfo.rotate += 90;
		imageEl.style.setProperty('--rotate', "".concat(historyInfo.rotate, "deg"));
		} // 上一张

		}, {
		key: "prev",
		value: function prev() {
		if (this.index !== 0) {
		this.index -= 1; //TODO: 更新图片显示

		this.updateIndex(this.index);
		this.useIndexUpdateImage(this.index);
		// check use new
		if (!(this instanceof ImgPreviewer)) {
		return console.error(new Error('ImagePreviewerue is a constructor and should be called with the `new` keyword'));
		}
		} // 下一张

		}, {
		key: "next",
		value: function next() {
		if (this.index < this.imageElements.length - 1) {
		this.index += 1;
		this.updateIndex(this.index);
		this.useIndexUpdateImage(this.index);
		// check required params is correct incoming
		if (selector && typeof selector === 'string') {
		if (!document.querySelector(selector))
		return console.error(new Error('selector ' + selector + ' is invalid'));
		}
		}
		}, {
		key: "useIndexUpdateImage",
		value: function useIndexUpdateImage(index) {
		var ratio = this.config.ratio;
		var _this$imageElements$i = this.imageElements[index],
		height = _this$imageElements$i.height,
		width = _this$imageElements$i.width,
		src = _this$imageElements$i.src; //TODO: 更新图片显示

		imageEl.classList.add('moving');
		setImageBaseStyle(imageEl, width, height, windowWidth / 2 - width / 2, windowHeight / 2 - height / 2);
		historyInfo = {
		endX: 0,
		endY: 0,
		scale: calcScaleNums(width, height, ratio),
		rotate: 0
		else {
		return console.error(new Error('ImagePreviewer plugin should css string selector that on first params,like #el,.el'));
		}
		var template = "<div class=\"img-pre__header img-pre__animated\"> <div class=\"img-pre__nums\"> <p> <span id=\"img-pre__current-index\"></span> <span class=\"img-pre__nums-delimiter\">/</span> <span id=\"img-pre__total-index\"></span> </p> </div> <div class=\"img-pre__bottons\" id=\"J_header-buttons\"> <button class=\"img-pre__button-item\" data-action=\"reset\" data-tooltip=\"{{RESET}}\"> <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-view-list\" viewBox=\"0 0 16 16\" > <path d=\"M3 4.5h10a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2zm0 1a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1H3zM1 2a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 2zm0 12a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 14z\" /> </svg> </button> <button class=\"img-pre__button-item\" data-action=\"rotateLeft\" data-tooltip=\"{{ROTATE_LEFT}}\"> <svg t=\"1639647288997\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"1423\" width=\"16\" height=\"16\" > <path d=\"M725.996 383.57H74.558A74.782 74.782 0 0 0 0 458.126v491.315A74.782 74.782 0 0 0 74.558 1024h651.438a74.782 74.782 0 0 0 74.558-74.558V458.127a74.782 74.782 0 0 0-74.558-74.558z m10.528 565.872a10.816 10.816 0 0 1-10.528 10.528H74.558a10.816 10.816 0 0 1-10.528-10.528V458.127c0-5.6 4.928-10.528 10.528-10.528h651.438c5.6 0 10.528 4.928 10.528 10.528v491.315z\" p-id=\"1424\" fill=\"#ffffff\" ></path> <path d=\"M1023.94 533.165C986.117 355.73 849.93 202.038 668.558 132.088a592.112 592.112 0 0 0-234.33-39.551l36.511-38.463A32 32 0 1 0 424.341 9.98l-96.094 101.15a32 32 0 0 0 1.184 45.278l96.062 90.974a31.935 31.935 0 0 0 45.246-1.248 32 32 0 0 0-1.216-45.279l-46.75-44.319a529.17 529.17 0 0 1 222.746 35.231c161.403 62.239 282.392 198.139 315.703 354.647a32.063 32.063 0 0 0 62.718-13.248z\" p-id=\"1425\" fill=\"#ffffff\" ></path> </svg> </button> <button class=\"img-pre__button-item\" data-action=\"rotateRight\" data-tooltip=\"{{ROTATE_RIGHT}}\"> <svg t=\"1639647310917\" class=\"icon\" viewBox=\"0 0 1025 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"1652\" width=\"16\" height=\"16\" > <path d=\"M0.69753 525.673495a31.720891 31.720891 0 0 0 25.581364 37.860419 32.744146 32.744146 0 0 0 38.372045-23.534855 502.929616 502.929616 0 0 1 320.790305-350.464687A557.673735 557.673735 0 0 1 611.580501 154.23209l-48.092964 44.511573a28.1395 28.1395 0 0 0-10.232546 21.999973 31.209264 31.209264 0 0 0 8.697664 22.511601 33.255773 33.255773 0 0 0 46.046455 0L706.231548 154.23209a32.744146 32.744146 0 0 0 10.232546-21.999973 31.720891 31.720891 0 0 0-9.209291-22.5116L609.533992 10.464824a33.255773 33.255773 0 0 0-31.209264-9.720918 32.232519 32.232519 0 0 0-23.534855 21.488346A31.209264 31.209264 0 0 0 563.487537 51.906634l37.348791 37.860419a626.743417 626.743417 0 0 0-237.906685 38.883673 566.883026 566.883026 0 0 0-358.139095 394.97626z m269.115949 420.045996a11.767427 11.767427 0 0 0 10.744172 10.744173h665.115464a10.744173 10.744173 0 0 0 10.744173-10.744173V435.627094a10.744173 10.744173 0 0 0-10.744173-10.744173h-665.115464a11.2558 11.2558 0 0 0-10.744172 10.744173v511.627279zM281.069279 358.883002h665.115463A77.255719 77.255719 0 0 1 1023.952089 435.627094v511.627279a76.744092 76.744092 0 0 1-77.25572 76.744092h-665.115463A76.744092 76.744092 0 0 1 205.348441 945.719491V435.627094A77.255719 77.255719 0 0 1 281.069279 358.883002z\" p-id=\"1653\" fill=\"#ffffff\" ></path> </svg> </button> <button class=\"img-pre__button-item\" data-action=\"close\" data-tooltip=\"{{CLOSE}}\"> <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-x-lg\" viewBox=\"0 0 16 16\" > <path fill-rule=\"evenodd\" d=\"M13.854 2.146a.5.5 0 0 1 0 .708l-11 11a.5.5 0 0 1-.708-.708l11-11a.5.5 0 0 1 .708 0Z\" /> <path fill-rule=\"evenodd\" d=\"M2.146 2.146a.5.5 0 0 0 0 .708l11 11a.5.5 0 0 0 .708-.708l-11-11a.5.5 0 0 0-.708 0Z\" /> </svg> </button> <button id=\"J-img-pre__prev\" data-action=\"prev\" data-tooltip=\"{{PREV}}\"> <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-chevron-left\" viewBox=\"0 0 16 16\"> <path fill-rule=\"evenodd\" d=\"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z\"/> </svg> </button> <button id=\"J-img-pre__next\" data-action=\"next\" data-tooltip=\"{{NEXT}}\"> <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-chevron-right\" viewBox=\"0 0 16 16\"> <path fill-rule=\"evenodd\" d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\"/> </svg> </button> </div> </div> <div class=\"img-pre__contet-warpper\" id=\"J_content-warpper\"> <div class=\"img-pre__img-item img-pre__animated current-index\" id=\"J_current-index\"> <img id=\"img-pre__imgage\" src=\"\" /> </div> </div>";
		var defaultOptions = {
		fillRatio: 0.8,
		imageZoom: {
		min: 1,
		max: 5,
		step: 0.1
		},
		style: {
		modalOpacity: 0.6,
		headerOpacity: 0,
		zIndex: 99
		},
		dataUrlKey: 'src'
		};
		imageEl.src = src;
		ImagePreviewer.setImageAnimationParams(historyInfo);
		setTimeout(function () {
		imageEl.classList.remove('moving');
		});
		} // 更新视图上的索引

		}, {
		key: "updateIndex",
		value: function updateIndex(index) {
		this.index = index;
		document.getElementById('total-nums').innerText = this.imageElements.length;
		document.getElementById('current-index').innerText = index + 1;
		} // 渲染视图

		}, {
		key: "render",
		value: function render() {
		var template = "<div class=\"preview-header\">\n <div class=\"nums\">\n \n <p>\n <span id=\"current-index\"></span>\n  / \n <span id=\"total-nums\"></span>\n </p>\n \n </div>\n <div class=\"tool-btn\">\n <button id=\"rotate-left\" data-tooltip=\"\u5411\u53F3\u65CB\u8F6C\"><i class=\"iconfont icon-xuanzhuan\"></i></button>\n <button id=\"rotate-right\" data-tooltip=\"\u5411\u5DE6\u65CB\u8F6C\"><i class=\"iconfont icon-xuanzhuan1\"></i></button>\n <button id=\"reset\" data-tooltip=\"\u91CD\u7F6E\"><i class=\"iconfont icon-zhongzhi\"></i></button>\n <button id=\"close\" data-tooltip=\"\u5173\u95ED\"><i class=\"iconfont icon-account-practice-lesson-close\"></i></button>\n </div>\n </div>\n <div class=\"image-container\">\n <button id=\"prev\" data-tooltip=\"\u4E0A\u4E00\u5F20\"><i class=\"iconfont icon-shangyige\"></i></button>\n <div class=\"img-content\" id=\"image-content\"><img id=\"preview-image\" src=\"\" alt=\"\" /></div>\n <button id=\"next\" data-tooltip=\"\u4E0B\u4E00\u5F20\"><i class=\"iconfont icon-xiayige\"></i></button>\n </div>";
		var el = document.getElementById('image-preview-container');

		if (!el) {
		previewContainer = document.createElement('div');
		previewContainer.classList.add('image-preview-container');
		previewContainer.id = 'image-preview-container';
		previewContainer.innerHTML = template;

		_BODY.appendChild(previewContainer);
		} else {
		previewContainer = el;
		var mergeOptions;
		var previewerContainer = null;
		var i18n = {
		en: {
		RESET: 'reset',
		ROTATE_LEFT: 'rotate left',
		ROTATE_RIGHT: 'rotate right',
		CLOSE: 'close',
		NEXT: 'next',
		PREV: 'prev'
		},
		zh: {
		RESET: '重置',
		ROTATE_LEFT: '向左旋转',
		ROTATE_RIGHT: '向右旋转',
		CLOSE: '关闭',
		NEXT: '下一张',
		PREV: '上一张'
		}
		};
		var store = {
		rootEl: null,
		container: null,
		imgList: [],
		currentImgElement: null,
		totalIndex: 0,
		index: 0,
		width: 0,
		height: 0,
		startX: 0,
		startY: 0,
		endX: 0,
		endY: 0,
		scale: 0,
		_scale: 0,
		rotate: 0,
		currentClickEl: null
		};
		var isOpen = false;
		var isRunning = false;
		// FIXME: 储存到store中去
		var moveable = false;
		// 绑定事件
		function bindEvent(rootEl) {
		var mobile = /Android\|webOS\|iPhone\|iPad\|iPod\|BlackBerry/i.test(window.navigator.userAgent);
		var warpper = document.getElementById('J_content-warpper');
		// add click eventlistener for rootEl, proxy img click event
		rootEl === null \|\| rootEl === void 0 ? void 0 : rootEl.addEventListener('click', function (event) {
		var target = event.target;
		if (target === store.currentImgElement)
		return;
		if (target.localName === 'img') {
		store.currentClickEl = target;
		store.index = Number(target.dataset.index);
		handlePrviewershow(event, getImageSrc(store.imgList[store.index]));
		}
		}, false);
		// all buttons event proxy linstener
		document.getElementById('J_header-buttons').addEventListener('click', function (event) {
		// fixed mobile Safari and chrome e.path undefined
		var _event = window.event \|\| event;
		var path = _event.path \|\| (_event.composedPath && _event.composedPath());
		var buttonEl = path.find(function (item) { return item.localName === 'button'; });
		if (buttonEl && !buttonEl.disabled) {
		handleActionFn(buttonEl.dataset.action);
		}
		});
		// hot keyboard event listener
		document.addEventListener('keyup', function (_a) {
		var key = _a.key;
		return handleActionFn(key);
		});
		// mouse wheel to zoom and zoom out image
		warpper === null \|\| warpper === void 0 ? void 0 : warpper.addEventListener('mousewheel', function (event) {
		preventDefault(event);
		if (event.target.localName !== 'img')
		return;
		moveable = true;
		var _a = mergeOptions.imageZoom, min = _a.min, max = _a.max, step = _a.step;
		var _max = store._scale + max;
		if (event.wheelDelta > 0) {
		// zoom
		var scale = step + store.scale;
		store.scale = scale > _max ? _max : scale;
		}
		else {
		// zoom out
		var scale = store.scale - step;
		store.scale = scale < min ? min : scale;
		}
		store.currentImgElement.style.setProperty('--scale', "".concat(store.scale.toFixed(2)));
		});
		// click modal hide preview
		warpper === null \|\| warpper === void 0 ? void 0 : warpper.addEventListener('click', function (event) {
		if (event.target === document.getElementById('J_current-index')) {
		handleActionFn('close');
		}
		});
		//
		if (mobile) {
		enableMobileScale(warpper);
		var lastTouchEnd_1 = 0;
		document.documentElement.addEventListener('touchend', function (event) {
		var now = Date.now();
		if (now - lastTouchEnd_1 <= 300) {
		event.preventDefault();
		}
		lastTouchEnd_1 = now;
		}, false);
		}
		warpper === null \|\| warpper === void 0 ? void 0 : warpper.addEventListener('mousedown', function (e) {
		if (e.target.localName !== 'img' \|\| !moveable)
		return;
		var diffX = e.clientX - e.target.offsetLeft;
		var diffY = e.clientY - e.target.offsetTop;
		e.preventDefault();
		store.currentImgElement.classList.add('moving');
		warpper['onmousemove'] = function (e) {
		var moveX = e.clientX - diffX;
		var moveY = e.clientY - diffY;
		setStyle(store.currentImgElement, {
		top: "".concat(moveY, "px"),
		left: "".concat(moveX, "px")
		});
		};
		warpper['onmouseup'] = function () {
		this.onmousemove = null;
		store.currentImgElement.classList.remove('moving');
		};
		warpper['onmouseout'] = function () {
		this.onmousemove = null;
		store.currentImgElement.classList.remove('moving');
		};
		});
		var handleResize = debounce(function () {
		isOpen && setImageStyles(window.innerWidth, window.innerHeight, false);
		}, 100);
		window.addEventListener('resize', handleResize);
		}

		imageEl = document.getElementById('preview-image');
		} // 初始化

		}, {
		key: "init",
		value: function init() {
		_BODY = document && document.body \|\| document.getElementsByTagName('body')[0];
		windowWidth = window.innerWidth;
		windowHeight = window.innerHeight;
		this.imageElements = document.querySelectorAll("".concat(this.selector, " img"));

		for (var i = 0, len = this.imageElements.length; i < len; i++) {
		this.imageElements[i].classList.add('zoom-in');
		// distribute processing function by antionType
		function handleActionFn(actionType) {
		switch (actionType) {
		case 'close':
		case 'Escape':
		handlePrviewerHide();
		break;
		case 'rotateLeft':
		handleRotateLeft();
		break;
		case 'rotateRight':
		handleRotateRight();
		break;
		case 'reset':
		handleReset();
		break;
		case 'next':
		case 'ArrowRight':
		handleNext();
		break;
		case 'prev':
		case 'ArrowLeft':
		handlePrev();
		break;
		}
		}
		function setStyle(imgElement, styleObj) {
		for (var key in styleObj) {
		imgElement.style[key] = styleObj[key];
		}
		}
		// setProperties
		function setProperties(imgElement, properties) {
		for (var key in properties) {
		imgElement.style.setProperty(key, properties[key]);
		}
		}
		function setDataset(el, key, value) {
		if (el.dataset) {
		el.dataset[key] = value;
		}
		else {
		el.setAttribute('data-' + key, value);
		}
		}
		function setImageStyles(w, h, setRotate) {
		store.endX = w / 2 - store.width / 2 - store.startX;
		store.endY = h / 2 - store.height / 2 - store.startY;
		store.scale = store._scale = getTwoNumberSmall(w, store.width, h, store.height, mergeOptions.fillRatio \|\| defaultOptions.fillRatio);
		if (setRotate) {
		store.rotate = 0;
		setProperties(store.currentImgElement, {
		'--rotate': "0"
		});
		}
		setStyle(store.currentImgElement, {
		top: "".concat(store.startY, "px"),
		left: "".concat(store.startX - 1, "px"),
		width: "".concat(store.width, "px"),
		height: "".concat(store.height, "px")
		});
		setProperties(store.currentImgElement, {
		'--offsetX': "".concat(store.endX, "px"),
		'--offsetY': "".concat(store.endY, "px"),
		'--scale': "".concat(store.scale)
		});
		}
		// mobile enable two finger scale
		function enableMobileScale(warpper) {
		var _store = {
		scale: 1
		};
		warpper === null \|\| warpper === void 0 ? void 0 : warpper.addEventListener('touchstart', function (event) {
		if (event.target.localName !== 'img')
		return;
		event.preventDefault();
		var touches = event.touches;
		var events = touches[0];
		var events2 = touches[1];
		// 第一个触摸点的坐标
		_store.pageX = events.pageX;
		_store.pageY = events.pageY;
		_store.moveable = true;
		if (events2) {
		_store.pageX2 = events2.pageX;
		_store.pageY2 = events2.pageY;
		}
		_store.originScale = _store.scale \|\| 1;
		});
		document.addEventListener('touchmove', function (event) {
		if (!_store.moveable)
		return;
		event.preventDefault();
		store.currentImgElement.classList.add('moving');
		var touches = event.touches;
		var events = touches[0];
		var events2 = touches[1];
		// two finger move
		if (events2) {
		// 第2个指头坐标在touchmove时候获取
		if (!_store.pageX2) {
		_store.pageX2 = events2.pageX;
		}
		if (!_store.pageY2) {
		_store.pageY2 = events2.pageY;
		}
		// 获取坐标之间的距离
		var getDistance = function (start, stop) {
		return Math.hypot(stop.x - start.x, stop.y - start.y);
		};
		// 双指缩放比例计算
		var zoom = getDistance({
		x: events.pageX,
		y: events.pageY
		}, {
		x: events2.pageX,
		y: events2.pageY
		}) /
		getDistance({
		x: _store.pageX,
		y: _store.pageY
		}, {
		x: _store.pageX2,
		y: _store.pageY2
		});
		// 应用在元素上的缩放比例
		var newScale = _store.originScale * zoom;
		// 最大缩放比例限制
		if (newScale > mergeOptions.zoom.max) {
		newScale = mergeOptions.zoom.max;
		}
		// 记住使用的缩放值
		_store.scale = newScale;
		// 图像应用缩放效果
		store.currentImgElement.style.setProperty('--scale', "".concat(newScale.toFixed(2)));
		}
		});
		document.addEventListener('touchend', function () {
		_store.moveable = false;
		store.currentImgElement.classList.remove('moving');
		delete _store.pageX2;
		delete _store.pageY2;
		});
		document.addEventListener('touchcancel', function () {
		_store.moveable = false;
		store.currentImgElement.classList.remove('moving');
		delete _store.pageX2;
		delete _store.pageY2;
		});
		}
		function handleReset() {
		moveable = false;
		setImageStyles(window.innerWidth, window.innerHeight, true);
		}
		function getImageSrc(el) {
		return mergeOptions.dataUrlKey && el.getAttribute(mergeOptions.dataUrlKey) \|\| el.src;
		}
		function handleNext() {
		if (store.index === store.totalIndex - 1 \|\| isRunning)
		return;
		isRunning = true;
		var index = store.index + 1;
		var div = document.createElement('div');
		var warpper = document.getElementById('J_content-warpper');
		var img = document.createElement('img');
		var currentImgWarpper = document.querySelector('#J_current-index');
		var clickEl = store.imgList[index];
		var src = getImageSrc(clickEl);
		img.src = src;
		// cache data
		store.index = index;
		store.width = clickEl.width;
		store.height = clickEl.height;
		store.currentImgElement = img;
		//
		setImageStyles(window.innerWidth, window.innerHeight, true);
		div.appendChild(img);
		div.classList.add('img-pre__img-item', 'slide-left-in');
		listenImageLoading(div, src);
		warpper.appendChild(div);
		currentImgWarpper.classList.add('slide-left-out');
		currentImgWarpper.addEventListener('animationend', function () {
		isRunning = false;
		currentImgWarpper && warpper.removeChild(currentImgWarpper);
		});
		// listen animationend and remove prev el
		div.addEventListener('animationend', function () {
		div.classList.remove('slide-left-in');
		div.classList.add('current-index');
		div.id = 'J_current-index';
		store.currentClickEl = clickEl;
		}, {
		once: true
		});
		}
		function handlePrev() {
		if (store.index === 0 \|\| isRunning)
		return;
		isRunning = true;
		var index = store.index - 1;
		var div = document.createElement('div');
		var img = document.createElement('img');
		var warpper = document.getElementById('J_content-warpper');
		var currentImgWarpper = document.querySelector('#J_current-index');
		var clickEl = store.imgList[index];
		var src = getImageSrc(clickEl);
		img.src = src;
		// cache data
		store.index = index;
		store.width = clickEl.width;
		store.height = clickEl.height;
		store.currentImgElement = img;
		//
		setImageStyles(window.innerWidth, window.innerHeight, true);
		div.appendChild(img);
		div.classList.add('img-pre__img-item', 'slide-right-in');
		listenImageLoading(div, src);
		warpper.appendChild(div);
		currentImgWarpper.classList.add('slide-right-out');
		currentImgWarpper.addEventListener('animationend', function () {
		isRunning = false;
		currentImgWarpper && warpper.removeChild(currentImgWarpper);
		});
		// listen animationend and remove next el
		div.addEventListener('animationend', function () {
		div.classList.remove('slide-right-in');
		div.classList.add('current-index');
		div.id = 'J_current-index';
		store.currentClickEl = clickEl;
		}, {
		once: true
		});
		}
		// listen image load
		function listenImageLoading(el, src) {
		var image = new Image();
		image.src = src;
		var timer = setTimeout(function () {
		el === null \|\| el === void 0 ? void 0 : el.classList.add('loading');
		}, 32);
		image.onload = function () {
		var _a;
		timer && clearTimeout(timer);
		// manually reclaim memory
		image = null;
		(_a = document.getElementById('J_current-index')) === null \|\| _a === void 0 ? void 0 : _a.classList.remove('loading');
		};
		}
		// show
		function handlePrviewershow(e, src) {
		isOpen = true;
		previewerContainer.style.display = 'block';
		document.ondragstart = preventDefault;
		document.ondragend = preventDefault;
		listenImageLoading(document.getElementById('J_current-index'), src);
		var _a = getElementRect(e.target), width = _a.width, height = _a.height, x = _a.x, y = _a.y;
		nextTick(function () {
		store.currentImgElement.src = src;
		previewerContainer.classList.remove('hide', 'fadeout');
		previewerContainer.classList.add('show');
		store.width = width;
		store.height = height;
		store.startX = x;
		store.startY = y;
		setImageStyles(window.innerWidth, window.innerHeight, true);
		});
		}
		// hide
		function handlePrviewerHide() {
		isOpen = false;
		moveable = false;
		document.ondragstart = null;
		document.ondragend = null;
		// current click image el is in viewport
		if (isElementInViewport(store.currentClickEl)) {
		var _a = getElementRect(store.currentClickEl), top = _a.top, left = _a.left, width = _a.width, height = _a.height;
		previewerContainer.classList.remove('show');
		previewerContainer.classList.add('hide');
		store.currentImgElement.style.cssText = "width:".concat(width, "px;height:").concat(height, "px;position: fixed; top: ").concat(top, "px; left: ").concat(left, "px;");
		store.currentImgElement.addEventListener('transitionend', function () {
		previewerContainer.style.display = 'none';
		store.currentImgElement.src = '';
		store.currentImgElement.style.cssText = "";
		}, { once: true });
		}
		else {
		previewerContainer.classList.remove('show');
		previewerContainer.classList.add('hide');
		store.currentImgElement.classList.add('img-pre__animated');
		store.currentImgElement.addEventListener('animationend', function () {
		previewerContainer.style.display = 'none';
		store.currentImgElement.src = '';
		store.currentImgElement.style.cssText = "";
		store.currentImgElement.classList.remove('img-pre__animated');
		}, { once: true });
		}
		}
		function handleRotateLeft() {
		store.rotate -= 90;
		setProperties(store.currentImgElement, {
		'--rotate': "".concat(store.rotate, "deg")
		});
		}
		function handleRotateRight() {
		store.rotate += 90;
		setProperties(store.currentImgElement, {
		'--rotate': "".concat(store.rotate, "deg")
		});
		}
		// listen index change,and update view
		function onIndexChange(index) {
		document.getElementById('img-pre__current-index').innerText = String(index + 1);
		var prevButton = document.getElementById('J-img-pre__prev');
		var nextButton = document.getElementById('J-img-pre__next');
		if (index === 0) {
		prevButton.disabled = true;
		}
		else {
		prevButton.disabled = false;
		}
		if (index === store.totalIndex - 1) {
		nextButton.disabled = true;
		}
		else {
		nextButton.disabled = false;
		}
		}
		function onTotalIndexChange(index) {
		document.getElementById('img-pre__total-index').innerText = String(index);
		}
		// get i18n options
		function geti18nInfo() {
		if (mergeOptions.i18n) {
		return mergeOptions.i18n;
		}
		else {
		var lang = window.navigator.language;
		// all display in English except Chinese
		return lang.indexOf('zh') !== -1 ? i18n.zh : i18n.en;
		}
		}
		// i18n translate
		function i18nTranslate(template, i18nObj) {
		return template.replace(/\{\{(.*?)\}\}/g, function (_, a) { return i18nObj[a]; });
		}
		//
		function defineReactValue(store, key, value, cal) {
		Object.defineProperty(store, key, {
		enumerable: false,
		set: function (newVal) {
		cal((value = newVal));
		},
		get: function () {
		return value;
		}
		});
		}
		//
		function render() {
		var el = document.getElementById('image-preview-container');
		var _a = mergeOptions.style, modalOpacity = _a.modalOpacity, headerOpacity = _a.headerOpacity, zIndex = _a.zIndex;
		if (!el) {
		previewerContainer = document.createElement('div');
		previewerContainer.classList.add('img-pre__container', 'img-pre__animated');
		previewerContainer.id = 'J_container';
		previewerContainer.style.setProperty('--container-opcity', String(modalOpacity));
		previewerContainer.style.setProperty('--header-bg-opcity', String(headerOpacity));
		previewerContainer.style.setProperty('--container-zIndex', String(zIndex));
		previewerContainer.innerHTML = i18nTranslate(template, geti18nInfo());
		document.body.appendChild(previewerContainer);
		}
		else {
		previewerContainer = el;
		}
		}
		function _init(selector, options) {
		if (options) {
		options.imageZoom = Object.assign({}, defaultOptions.imageZoom, options.imageZoom \|\| {});
		options.style = Object.assign({}, defaultOptions.style, options.style \|\| {});
		mergeOptions = Object.assign({}, defaultOptions, options);
		}
		else {
		mergeOptions = defaultOptions;
		}
		var rootEl = document.querySelector(selector);
		// use defineProperty to init listen index
		defineReactValue(store, 'index', 0, onIndexChange);
		defineReactValue(store, 'totalIndex', 0, onTotalIndexChange);
		// render to document
		render();
		// bind enent for el
		bindEvent(rootEl);
		// cache data
		store.currentImgElement = document.querySelector('#J_current-index img');
		store.rootEl = rootEl;
		//
		initImgList();
		}
		// get selector all img children to init totalIndex and store these
		function initImgList() {
		var imgEls = store.rootEl.querySelectorAll('img');
		store.totalIndex = imgEls.length;
		store.imgList = new Array(store.totalIndex);
		for (var i = 0, len = store.totalIndex; i < len; i++) {
		var element = imgEls[i];
		setDataset(element, 'index', String(i));
		store.imgList[i] = element;
		}
		}
		_init(selector, options);
		ImgPreviewer.prototype.update = initImgList;
		ImgPreviewer.prototype.version = '2.0.0';
		}

		this.render();
		this.updateIndex(this.index);
		this.bindEvent(this.imageElements);
		this.options.onInited && this.options.onInited();
		}
		}], [{
		key: "setImageAnimationParams",
		value: function setImageAnimationParams(historyInfo) {
		imageEl.style.setProperty('--offsetX', "".concat(historyInfo.endX, "px"));
		imageEl.style.setProperty('--offsetY', "".concat(historyInfo.endY + 30, "px"));
		imageEl.style.setProperty('--scale', "".concat(historyInfo.scale));
		imageEl.style.setProperty('--rotate', "".concat(historyInfo.rotate, "deg"));
		}
		}]);
		return ImgPreviewer;

		return ImagePreviewer;
		}();

		return ImagePreviewer;

		})));
		}));

dist/img-previewer.min.js

		/*!
		* ImgPreviewer v1.0.4
		* ImgPreviewer v2.0.0
		* https://github.com/yue1123/img-previewer
		@@ -8,4 +8,4 @@ *
		*
		* Date: 2021-05-26T06:21:22.254Z
		* Date: 2021-12-27T08:07:27.019Z
		*/
		!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e\|\|self).ImgPreviewer=t()}(this,(function(){"use strict";function e(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function t(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable\|\|!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function n(e,t){var n=null;return function(i){clearTimeout(n),n=setTimeout((function(){e(i),clearTimeout(n)}),t)}}function i(e){e.preventDefault()}function o(e,t,n){var i=window.requestAnimationFrame\|\|window.mozRequestAnimationFrame\|\|window.webkitRequestAnimationFrame\|\|window.msRequestAnimationFrame,o=window.cancelAnimationFrame\|\|window.mozCancelAnimationFrame,s=t.start\|\|0,a=t.end\|\|0,c=t.step,l=null;!function d(){c>0&&s<a\|\|c<0&&s>a?(s+=c,e.style[t.style]=t.template.replace("$",s),l=i(d)):(n&&n(),o(l))}()}function s(e,t,n){var i=un/e,o=rn/t;return i>o?o:i}function a(e,t,n,i,o){e.style.cssText="width:".concat(t,"px;height:").concat(n,"px;position:fixed; top:").concat(o,"px; left:").concat(i,"px;")}function c(e){m.style.display=e?"block":"none"}function l(e){d.style.overflow=e?"auto":"hidden"}var d,r,u,m=null,h=null,f=null,g=0,p={ratio:.7,zoom:{min:.1,max:5,step:.1},opacity:.6,scrollbar:!0};return function(){function v(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(e(this,v),this.index=0,this.selector=t,this.options=n,this.imageElements=[],n.zoom=Object.assign({},p.zoom,n.zoom\|\|{}),this.config=Object.assign({},p,n),!t\|\|"string"!=typeof t)throw new Error("ImagePreviewer plugin should css string selector that on first params,like #el,.el");var i=document.querySelector(t);if(!i)throw new Error("selector is invalid");this.init()}var y,w,x;return y=v,x=[{key:"setImageAnimationParams",value:function(e){h.style.setProperty("--offsetX","".concat(e.endX,"px")),h.style.setProperty("--offsetY","".concat(e.endY+30,"px")),h.style.setProperty("--scale","".concat(e.scale)),h.style.setProperty("--rotate","".concat(e.rotate,"deg"))}}],(w=[{key:"update",value:function(){var e=this;this.imageElements=document.querySelectorAll("".concat(this.selector," img:not(#preview-image)")),this.imageElements.forEach((function(t,n){t.onclick=null,t.onclick=function(t){e.handleOpen(t,n),c(!0),e.updateIndex(n)}}))}},{key:"bindEvent",value:function(){var e=this,t=/Android\|webOS\|iPhone\|iPad\|iPod\|BlackBerry/i.test(window.navigator.userAgent),o=t?"touchstart":"mousedown",s=t?"touchend":"mouseup",a=t?"touchmove":"mousemove";this.imageElements.forEach((function(t,n){t.onclick=function(t){e.handleOpen(t,n),c(!0),e.updateIndex(n)}})),document.getElementById("close").addEventListener("click",(function(){e.handleClose()})),document.getElementById("reset").addEventListener("click",(function(){e.handleReset()})),document.getElementById("prev").addEventListener("click",(function(){e.prev()})),document.getElementById("next").addEventListener("click",(function(){e.next()})),m.addEventListener("click",(function(t){"image-container"===t.target.classList[0]&&e.handleClose()})),h.addEventListener(o,(function(e){var t=e.clientX-h.offsetLeft,n=e.clientY-h.offsetTop;this.classList.add("moving"),this["on".concat(a)]=function(e){var i=e.clientX-t,o=e.clientY-n;this.style.left="".concat(i,"px"),this.style.top="".concat(o,"px")},this["on".concat(s)]=function(){this.classList.remove("moving"),this.onmousemove=null},this.onmouseout=function(){this.classList.remove("moving"),this.onmousemove=null}})),h.addEventListener("mousewheel",(function(t){var n=e.config.zoom,i=n.min,o=n.max,s=n.step;t.wheelDelta>0&&g<o?g+=s:g>i&&(g-=s),h.style.setProperty("--scale","".concat(g.toFixed(2)))}),!0),document.getElementById("rotate-right").addEventListener("click",(function(){e.handelRotateRight()})),document.getElementById("rotate-left").addEventListener("click",(function(){e.handelRotateLeft()})),m.addEventListener("mousewheel",i),document.ondragstart=i,document.ondragend=i,window.onresize=n.bind(null,(function(){e.handleClose(),u=window.innerWidth,r=window.innerHeight}),100)()}},{key:"handleReset",value:function(){h.style.top="".concat(f.startY,"px"),h.style.left="".concat(f.startX,"px"),h.style.setProperty("--rotate","".concat(0,"deg")),h.style.setProperty("--scale","".concat(f.scale)),f.rotate=0}},{key:"handleOpen",value:function(e,t){var n=this.config.ratio,i=this.imageElements,o=e.target,c=o.width,d=o.height,p=e.clientX-e.offsetX,y=e.clientY-e.offsetY+1;g=s(c,d,n),f={startX:p,startY:y,endX:u/2-c/2-p,endY:r/2-d/2-y,scale:g,rotate:0},h.src=i[t].src,a(h,c,d,p,y),setTimeout((function(){v.setImageAnimationParams(f)})),m.classList.add("show"),!this.config.scrollbar&&l(!1)}},{key:"handleClose",value:function(){var e,t,n,i,s,a=this.config.opacity,d=this.imageElements[this.index];if(e=d,t=window.innerHeight\|\|document.documentElement.clientHeight\|\|document.body.clientHeight,n=e.offsetTop,i=e.offsetHeight,s=document.documentElement.scrollTop,i+n>s&&n-s<=t+100){o(m,{start:a,end:0,step:-.02,style:"background",template:"rgba(0, 0, 0, $)"},(function(){h.style="",h.src="",m.style.background="",m.classList.remove("hiding"),c(!1)}));var r=function(e){return e.getBoundingClientRect()}(d),u=r.top,f=r.left,g=r.width,p=r.height;h.style.cssText="width:".concat(g,"px;height:").concat(p,"px;position: fixed; top: ").concat(u,"px; left: ").concat(f,"px;")}else h.style.display="none",o(m,{start:a,end:0,step:-.05,style:"background",template:"rgba(0, 0, 0, $)"},(function(){h.src="",h.style="",m.style="",m.classList.remove("hiding"),c(!1)}));m.classList.remove("show"),m.classList.add("hiding"),!this.config.scrollbar&&l(!0)}},{key:"handelRotateLeft",value:function(){f.rotate-=90,h.style.setProperty("--rotate","".concat(f.rotate,"deg"))}},{key:"handelRotateRight",value:function(){f.rotate+=90,h.style.setProperty("--rotate","".concat(f.rotate,"deg"))}},{key:"prev",value:function(){0!==this.index&&(this.index-=1,this.updateIndex(this.index),this.useIndexUpdateImage(this.index))}},{key:"next",value:function(){this.index<this.imageElements.length-1&&(this.index+=1,this.updateIndex(this.index),this.useIndexUpdateImage(this.index))}},{key:"useIndexUpdateImage",value:function(e){var t=this.config.ratio,n=this.imageElements[e],i=n.height,o=n.width,c=n.src;h.classList.add("moving"),a(h,o,i,u/2-o/2,r/2-i/2),f={endX:0,endY:0,scale:s(o,i,t),rotate:0},h.src=c,v.setImageAnimationParams(f),setTimeout((function(){h.classList.remove("moving")}))}},{key:"updateIndex",value:function(e){this.index=e,document.getElementById("total-nums").innerText=this.imageElements.length,document.getElementById("current-index").innerText=e+1}},{key:"render",value:function(){var e=document.getElementById("image-preview-container");e?m=e:((m=document.createElement("div")).classList.add("image-preview-container"),m.id="image-preview-container",m.innerHTML='<div class="preview-header">\n <div class="nums">\n \n <p>\n <span id="current-index"></span>\n  / \n <span id="total-nums"></span>\n </p>\n \n </div>\n <div class="tool-btn">\n <button id="rotate-left" data-tooltip="向右旋转"><i class="iconfont icon-xuanzhuan"></i></button>\n <button id="rotate-right" data-tooltip="向左旋转"><i class="iconfont icon-xuanzhuan1"></i></button>\n <button id="reset" data-tooltip="重置"><i class="iconfont icon-zhongzhi"></i></button>\n <button id="close" data-tooltip="关闭"><i class="iconfont icon-account-practice-lesson-close"></i></button>\n </div>\n </div>\n <div class="image-container">\n <button id="prev" data-tooltip="上一张"><i class="iconfont icon-shangyige"></i></button>\n <div class="img-content" id="image-content"><img id="preview-image" src="" alt="" /></div>\n <button id="next" data-tooltip="下一张"><i class="iconfont icon-xiayige"></i></button>\n </div>',d.appendChild(m)),h=document.getElementById("preview-image")}},{key:"init",value:function(){d=document&&document.body\|\|document.getElementsByTagName("body")[0],u=window.innerWidth,r=window.innerHeight,this.imageElements=document.querySelectorAll("".concat(this.selector," img"));for(var e=0,t=this.imageElements.length;e<t;e++)this.imageElements[e].classList.add("zoom-in");this.render(),this.updateIndex(this.index),this.bindEvent(this.imageElements),this.options.onInited&&this.options.onInited()}}])&&t(y.prototype,w),x&&t(y,x),v}()}));
		!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e\|\|self).ImgPreviewer=t()}(this,(function(){"use strict";function e(e){e.preventDefault()}function t(e){return e.getBoundingClientRect()}return function n(i,a){if("object"==typeof window){if(!(this instanceof n))return console.error(new Error("ImagePreviewerue is a constructor and should be called with the `new` keyword"));if(!i\|\|"string"!=typeof i)return console.error(new Error("ImagePreviewer plugin should css string selector that on first params,like #el,.el"));if(!document.querySelector(i))return console.error(new Error("selector "+i+" is invalid"));var r,o={fillRatio:.8,imageZoom:{min:1,max:5,step:.1},style:{modalOpacity:.6,headerOpacity:0,zIndex:99},dataUrlKey:"src"},c=null,l={en:{RESET:"reset",ROTATE_LEFT:"rotate left",ROTATE_RIGHT:"rotate right",CLOSE:"close",NEXT:"next",PREV:"prev"},zh:{RESET:"重置",ROTATE_LEFT:"向左旋转",ROTATE_RIGHT:"向右旋转",CLOSE:"关闭",NEXT:"下一张",PREV:"上一张"}},d={rootEl:null,container:null,imgList:[],currentImgElement:null,totalIndex:0,index:0,width:0,height:0,startX:0,startY:0,endX:0,endY:0,scale:0,_scale:0,rotate:0,currentClickEl:null},s=!1,m=!1,u=!1;!function(e,t){t?(t.imageZoom=Object.assign({},o.imageZoom,t.imageZoom\|\|{}),t.style=Object.assign({},o.style,t.style\|\|{}),r=Object.assign({},o,t)):r=o;var n=document.querySelector(e);y(d,"index",0,x),y(d,"totalIndex",0,_),L(),g(n),d.currentImgElement=document.querySelector("#J_current-index img"),d.rootEl=n,b()}(i,a),n.prototype.update=b,n.prototype.version="2.0.0"}function g(n){var i=/Android\|webOS\|iPhone\|iPad\|iPod\|BlackBerry/i.test(window.navigator.userAgent),a=document.getElementById("J_content-warpper");if(null==n\|\|n.addEventListener("click",(function(n){var i=n.target;i!==d.currentImgElement&&"img"===i.localName&&(d.currentClickEl=i,d.index=Number(i.dataset.index),function(n,i){s=!0,c.style.display="block",document.ondragstart=e,document.ondragend=e,E(document.getElementById("J_current-index"),i);var a=t(n.target),r=a.width,o=a.height,l=a.x,m=a.y;u=function(){d.currentImgElement.src=i,c.classList.remove("hide","fadeout"),c.classList.add("show"),d.width=r,d.height=o,d.startX=l,d.startY=m,v(window.innerWidth,window.innerHeight,!0)},requestAnimationFrame((function(){u&&u()}));var u}(n,w(d.imgList[d.index])))}),!1),document.getElementById("J_header-buttons").addEventListener("click",(function(e){var t=window.event\|\|e,n=(t.path\|\|t.composedPath&&t.composedPath()).find((function(e){return"button"===e.localName}));n&&!n.disabled&&p(n.dataset.action)})),document.addEventListener("keyup",(function(e){return p(e.key)})),null==a\|\|a.addEventListener("mousewheel",(function(t){if(e(t),"img"===t.target.localName){u=!0;var n=r.imageZoom,i=n.min,a=n.max,o=n.step,c=d._scale+a;if(t.wheelDelta>0){var l=o+d.scale;d.scale=l>c?c:l}else{l=d.scale-o;d.scale=l<i?i:l}d.currentImgElement.style.setProperty("--scale","".concat(d.scale.toFixed(2)))}})),null==a\|\|a.addEventListener("click",(function(e){e.target===document.getElementById("J_current-index")&&p("close")})),i){!function(e){var t={scale:1};null==e\|\|e.addEventListener("touchstart",(function(e){if("img"===e.target.localName){e.preventDefault();var n=e.touches,i=n[0],a=n[1];t.pageX=i.pageX,t.pageY=i.pageY,t.moveable=!0,a&&(t.pageX2=a.pageX,t.pageY2=a.pageY),t.originScale=t.scale\|\|1}})),document.addEventListener("touchmove",(function(e){if(t.moveable){e.preventDefault(),d.currentImgElement.classList.add("moving");var n=e.touches,i=n[0],a=n[1];if(a){t.pageX2\|\|(t.pageX2=a.pageX),t.pageY2\|\|(t.pageY2=a.pageY);var o=function(e,t){return Math.hypot(t.x-e.x,t.y-e.y)},c=o({x:i.pageX,y:i.pageY},{x:a.pageX,y:a.pageY})/o({x:t.pageX,y:t.pageY},{x:t.pageX2,y:t.pageY2}),l=t.originScalec;l>r.zoom.max&&(l=r.zoom.max),t.scale=l,d.currentImgElement.style.setProperty("--scale","".concat(l.toFixed(2)))}}})),document.addEventListener("touchend",(function(){t.moveable=!1,d.currentImgElement.classList.remove("moving"),delete t.pageX2,delete t.pageY2})),document.addEventListener("touchcancel",(function(){t.moveable=!1,d.currentImgElement.classList.remove("moving"),delete t.pageX2,delete t.pageY2}))}(a);var o=0;document.documentElement.addEventListener("touchend",(function(e){var t=Date.now();t-o<=300&&e.preventDefault(),o=t}),!1)}null==a\|\|a.addEventListener("mousedown",(function(e){if("img"===e.target.localName&&u){var t=e.clientX-e.target.offsetLeft,n=e.clientY-e.target.offsetTop;e.preventDefault(),d.currentImgElement.classList.add("moving"),a.onmousemove=function(e){var i=e.clientX-t,a=e.clientY-n;h(d.currentImgElement,{top:"".concat(a,"px"),left:"".concat(i,"px")})},a.onmouseup=function(){this.onmousemove=null,d.currentImgElement.classList.remove("moving")},a.onmouseout=function(){this.onmousemove=null,d.currentImgElement.classList.remove("moving")}}}));var l,m,g,f=(l=function(){s&&v(window.innerWidth,window.innerHeight,!1)},m=100,g=0,function(e){clearTimeout(g),g=window.setTimeout((function(){l(e),clearTimeout(g)}),m)});window.addEventListener("resize",f)}function p(e){switch(e){case"close":case"Escape":!function(){if(s=!1,u=!1,document.ondragstart=null,document.ondragend=null,function(e){var t=window.innerHeight\|\|document.documentElement.clientHeight\|\|document.body.clientHeight,n=e.offsetTop,i=e.offsetHeight,a=document.documentElement.scrollTop;return i+n>a&&n-a<=t+100}(d.currentClickEl)){var e=t(d.currentClickEl),n=e.top,i=e.left,a=e.width,r=e.height;c.classList.remove("show"),c.classList.add("hide"),d.currentImgElement.style.cssText="width:".concat(a,"px;height:").concat(r,"px;position: fixed; top: ").concat(n,"px; left: ").concat(i,"px;"),d.currentImgElement.addEventListener("transitionend",(function(){c.style.display="none",d.currentImgElement.src="",d.currentImgElement.style.cssText=""}),{once:!0})}else c.classList.remove("show"),c.classList.add("hide"),d.currentImgElement.classList.add("img-pre__animated"),d.currentImgElement.addEventListener("animationend",(function(){c.style.display="none",d.currentImgElement.src="",d.currentImgElement.style.cssText="",d.currentImgElement.classList.remove("img-pre__animated")}),{once:!0})}();break;case"rotateLeft":d.rotate-=90,f(d.currentImgElement,{"--rotate":"".concat(d.rotate,"deg")});break;case"rotateRight":d.rotate+=90,f(d.currentImgElement,{"--rotate":"".concat(d.rotate,"deg")});break;case"reset":u=!1,v(window.innerWidth,window.innerHeight,!0);break;case"next":case"ArrowRight":!function(){if(d.index===d.totalIndex-1\|\|m)return;m=!0;var e=d.index+1,t=document.createElement("div"),n=document.getElementById("J_content-warpper"),i=document.createElement("img"),a=document.querySelector("#J_current-index"),r=d.imgList[e],o=w(r);i.src=o,d.index=e,d.width=r.width,d.height=r.height,d.currentImgElement=i,v(window.innerWidth,window.innerHeight,!0),t.appendChild(i),t.classList.add("img-pre__img-item","slide-left-in"),E(t,o),n.appendChild(t),a.classList.add("slide-left-out"),a.addEventListener("animationend",(function(){m=!1,a&&n.removeChild(a)})),t.addEventListener("animationend",(function(){t.classList.remove("slide-left-in"),t.classList.add("current-index"),t.id="J_current-index",d.currentClickEl=r}),{once:!0})}();break;case"prev":case"ArrowLeft":!function(){if(0===d.index\|\|m)return;m=!0;var e=d.index-1,t=document.createElement("div"),n=document.createElement("img"),i=document.getElementById("J_content-warpper"),a=document.querySelector("#J_current-index"),r=d.imgList[e],o=w(r);n.src=o,d.index=e,d.width=r.width,d.height=r.height,d.currentImgElement=n,v(window.innerWidth,window.innerHeight,!0),t.appendChild(n),t.classList.add("img-pre__img-item","slide-right-in"),E(t,o),i.appendChild(t),a.classList.add("slide-right-out"),a.addEventListener("animationend",(function(){m=!1,a&&i.removeChild(a)})),t.addEventListener("animationend",(function(){t.classList.remove("slide-right-in"),t.classList.add("current-index"),t.id="J_current-index",d.currentClickEl=r}),{once:!0})}()}}function h(e,t){for(var n in t)e.style[n]=t[n]}function f(e,t){for(var n in t)e.style.setProperty(n,t[n])}function v(e,t,n){var i,a,c,l,s,m,u;d.endX=e/2-d.width/2-d.startX,d.endY=t/2-d.height/2-d.startY,d.scale=d._scale=(i=e,a=d.width,c=t,l=d.height,s=r.fillRatio\|\|o.fillRatio,(m=is/a)>(u=cs/l)?u:m),n&&(d.rotate=0,f(d.currentImgElement,{"--rotate":"0"})),h(d.currentImgElement,{top:"".concat(d.startY,"px"),left:"".concat(d.startX-1,"px"),width:"".concat(d.width,"px"),height:"".concat(d.height,"px")}),f(d.currentImgElement,{"--offsetX":"".concat(d.endX,"px"),"--offsetY":"".concat(d.endY,"px"),"--scale":"".concat(d.scale)})}function w(e){return r.dataUrlKey&&e.getAttribute(r.dataUrlKey)\|\|e.src}function E(e,t){var n=new Image;n.src=t;var i=setTimeout((function(){null==e\|\|e.classList.add("loading")}),32);n.onload=function(){var e;i&&clearTimeout(i),n=null,null===(e=document.getElementById("J_current-index"))\|\|void 0===e\|\|e.classList.remove("loading")}}function x(e){document.getElementById("img-pre__current-index").innerText=String(e+1);var t=document.getElementById("J-img-pre__prev"),n=document.getElementById("J-img-pre__next");t.disabled=0===e,e===d.totalIndex-1?n.disabled=!0:n.disabled=!1}function _(e){document.getElementById("img-pre__total-index").innerText=String(e)}function y(e,t,n,i){Object.defineProperty(e,t,{enumerable:!1,set:function(e){i(n=e)},get:function(){return n}})}function L(){var e=document.getElementById("image-preview-container"),t=r.style,n=t.modalOpacity,i=t.headerOpacity,a=t.zIndex;e?c=e:((c=document.createElement("div")).classList.add("img-pre__container","img-pre__animated"),c.id="J_container",c.style.setProperty("--container-opcity",String(n)),c.style.setProperty("--header-bg-opcity",String(i)),c.style.setProperty("--container-zIndex",String(a)),c.innerHTML=function(e,t){return e.replace(/\{\{(.?)\}\}/g,(function(e,n){return t[n]}))}('<div class="img-pre__header img-pre__animated"> <div class="img-pre__nums"> <p> <span id="img-pre__current-index"></span> <span class="img-pre__nums-delimiter">/</span> <span id="img-pre__total-index"></span> </p> </div> <div class="img-pre__bottons" id="J_header-buttons"> <button class="img-pre__button-item" data-action="reset" data-tooltip="{{RESET}}"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-view-list" viewBox="0 0 16 16" > <path d="M3 4.5h10a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2zm0 1a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1H3zM1 2a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 2zm0 12a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 14z" /> </svg> </button> <button class="img-pre__button-item" data-action="rotateLeft" data-tooltip="{{ROTATE_LEFT}}"> <svg t="1639647288997" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1423" width="16" height="16" > <path d="M725.996 383.57H74.558A74.782 74.782 0 0 0 0 458.126v491.315A74.782 74.782 0 0 0 74.558 1024h651.438a74.782 74.782 0 0 0 74.558-74.558V458.127a74.782 74.782 0 0 0-74.558-74.558z m10.528 565.872a10.816 10.816 0 0 1-10.528 10.528H74.558a10.816 10.816 0 0 1-10.528-10.528V458.127c0-5.6 4.928-10.528 10.528-10.528h651.438c5.6 0 10.528 4.928 10.528 10.528v491.315z" p-id="1424" fill="#ffffff" ></path> <path d="M1023.94 533.165C986.117 355.73 849.93 202.038 668.558 132.088a592.112 592.112 0 0 0-234.33-39.551l36.511-38.463A32 32 0 1 0 424.341 9.98l-96.094 101.15a32 32 0 0 0 1.184 45.278l96.062 90.974a31.935 31.935 0 0 0 45.246-1.248 32 32 0 0 0-1.216-45.279l-46.75-44.319a529.17 529.17 0 0 1 222.746 35.231c161.403 62.239 282.392 198.139 315.703 354.647a32.063 32.063 0 0 0 62.718-13.248z" p-id="1425" fill="#ffffff" ></path> </svg> </button> <button class="img-pre__button-item" data-action="rotateRight" data-tooltip="{{ROTATE_RIGHT}}"> <svg t="1639647310917" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1652" width="16" height="16" > <path d="M0.69753 525.673495a31.720891 31.720891 0 0 0 25.581364 37.860419 32.744146 32.744146 0 0 0 38.372045-23.534855 502.929616 502.929616 0 0 1 320.790305-350.464687A557.673735 557.673735 0 0 1 611.580501 154.23209l-48.092964 44.511573a28.1395 28.1395 0 0 0-10.232546 21.999973 31.209264 31.209264 0 0 0 8.697664 22.511601 33.255773 33.255773 0 0 0 46.046455 0L706.231548 154.23209a32.744146 32.744146 0 0 0 10.232546-21.999973 31.720891 31.720891 0 0 0-9.209291-22.5116L609.533992 10.464824a33.255773 33.255773 0 0 0-31.209264-9.720918 32.232519 32.232519 0 0 0-23.534855 21.488346A31.209264 31.209264 0 0 0 563.487537 51.906634l37.348791 37.860419a626.743417 626.743417 0 0 0-237.906685 38.883673 566.883026 566.883026 0 0 0-358.139095 394.97626z m269.115949 420.045996a11.767427 11.767427 0 0 0 10.744172 10.744173h665.115464a10.744173 10.744173 0 0 0 10.744173-10.744173V435.627094a10.744173 10.744173 0 0 0-10.744173-10.744173h-665.115464a11.2558 11.2558 0 0 0-10.744172 10.744173v511.627279zM281.069279 358.883002h665.115463A77.255719 77.255719 0 0 1 1023.952089 435.627094v511.627279a76.744092 76.744092 0 0 1-77.25572 76.744092h-665.115463A76.744092 76.744092 0 0 1 205.348441 945.719491V435.627094A77.255719 77.255719 0 0 1 281.069279 358.883002z" p-id="1653" fill="#ffffff" ></path> </svg> </button> <button class="img-pre__button-item" data-action="close" data-tooltip="{{CLOSE}}"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16" > <path fill-rule="evenodd" d="M13.854 2.146a.5.5 0 0 1 0 .708l-11 11a.5.5 0 0 1-.708-.708l11-11a.5.5 0 0 1 .708 0Z" /> <path fill-rule="evenodd" d="M2.146 2.146a.5.5 0 0 0 0 .708l11 11a.5.5 0 0 0 .708-.708l-11-11a.5.5 0 0 0-.708 0Z" /> </svg> </button> <button id="J-img-pre__prev" data-action="prev" data-tooltip="{{PREV}}"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/> </svg> </button> <button id="J-img-pre__next" data-action="next" data-tooltip="{{NEXT}}"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/> </svg> </button> </div> </div> <div class="img-pre__contet-warpper" id="J_content-warpper"> <div class="img-pre__img-item img-pre__animated current-index" id="J_current-index"> <img id="img-pre__imgage" src="" /> </div> </div>',r.i18n?r.i18n:-1!==window.navigator.language.indexOf("zh")?l.zh:l.en),document.body.appendChild(c))}function b(){var e,t,n,i=d.rootEl.querySelectorAll("img");d.totalIndex=i.length,d.imgList=new Array(d.totalIndex);for(var a=0,r=d.totalIndex;a<r;a++){var o=i[a];e=o,t="index",n=String(a),e.dataset?e.dataset[t]=n:e.setAttribute("data-"+t,n),d.imgList[a]=o}}}}));

package.json

		{
		"name": "img-previewer",
		"version": "1.0.5",
		"description": "A light wight javascript image viewing plugin with smooth animation",
		"main": "dist/img-previewer.js",
		"browser": "dist/img-previewer.min.js",
		"directories": {
		"doc": "docs",
		"build:js": "rollup -c"
		},
		"scripts": {
		"test": "echo \"Error: no test specified\" && exit 1",
		"build:js": "rollup -c",
		"serve": "rollup -c -w"
		},
		"repository": {
		"type": "git",
		"url": "git@github.com:yue1123/img-previewer.git"
		},
		"keywords": [
		"image",
		"viewer",
		"preview",
		"javascript-plugin"
		],
		"author": {
		"name": "dh",
		"url": "https://dhwork.top/dh"
		},
		"homepage": "https://github.com/yue1123/img-previewer",
		"license": "MIT",
		"devDependencies": {
		"@babel/core": "^7.13.8",
		"@babel/preset-env": "^7.13.8",
		"babel-preset-es2015": "^6.24.1",
		"change-case": "^4.1.2",
		"create-banner": "^2.0.0",
		"rollup": "^2.40.0",
		"rollup-plugin-babel": "^4.4.0",
		"rollup-plugin-css-only": "^3.1.0",
		"rollup-plugin-livereload": "^2.0.0",
		"rollup-plugin-node-resolve": "^5.2.0",
		"rollup-plugin-serve": "^1.1.0",
		"rollup-plugin-terser": "^7.0.2"
		}
		"name": "img-previewer",
		"version": "2.0.0",
		"description": "A light wight javascript image viewing plugin with smooth animation",
		"main": "dist/img-previewer.js",
		"browser": "dist/img-previewer.min.js",
		"scripts": {
		"test": "echo \"Error: no test specified\" && exit 1",
		"build": "rollup -c",
		"serve": "rollup -c -w"
		},
		"repository": {
		"type": "git",
		"url": "git@github.com:yue1123/img-previewer.git"
		},
		"keywords": [
		"image",
		"viewer",
		"preview",
		"javascript-plugin"
		],
		"author": {
		"name": "dh",
		"url": "https://dhwork.top/dh"
		},
		"homepage": "https://github.com/yue1123/img-previewer",
		"license": "MIT",
		"devDependencies": {
		"@babel/core": "^7.13.8",
		"@babel/preset-env": "^7.13.8",
		"babel-preset-es2015": "^6.24.1",
		"change-case": "^4.1.2",
		"create-banner": "^2.0.0",
		"rollup": "^2.60.0",
		"rollup-plugin-babel": "^4.4.0",
		"rollup-plugin-commonjs": "^10.1.0",
		"rollup-plugin-css-only": "^3.1.0",
		"rollup-plugin-livereload": "^2.0.0",
		"rollup-plugin-node-resolve": "^5.2.0",
		"rollup-plugin-scss": "^3.0.0",
		"rollup-plugin-serve": "^1.1.0",
		"rollup-plugin-terser": "^7.0.2",
		"rollup-plugin-typescript": "^1.0.1",
		"tslib": "^2.3.1",
		"typescript": "^4.5.2"
		}
		}

118

README.md

		@@ -1,74 +0,106 @@
		# img-previewer
		# Img-previewer Js

		轻巧且强大的 javascript 图片预览插件,开箱即用,无需多余的配置.适用于任何网页页面,无需改变页面 html 代码结构
		Lightweight and powerful `javascript` image preview plug-in, silky animation allows you to elegantly preview the images in your website. Out of the box, you don't need extra configuration (by default) or change the page `html` code structure, you can easily enable the plugin in any type of website and upgrade your user experience

		提供了常用的功能:
		These functions are provided:

		1. 鼠标滚轮缩放图片
		2. 图标拖动图片
		3. 流畅的过渡动画
		4. 上一张&下一张
		1. Silky, interruptible transition animation
		2. Use mouse wheel to zoom picture
		3. Icon drag picture
		4. Previous & Next
		5. Shortcut key support
		6. Support for mobile gestures (zoom in with two fingers)
		7. Multi-language internationalization support
		8. Picture loading monitor

		# demo
		Other languages: [English](./README.md), [Simplified Chinese](./README.zh_cn.md).

		[预览](https://yue1123.github.io/img-previewer/demo/)
		tips: For performance reasons, the mobile terminal does not do swiper

		# 安装
		# Example

		npm
		[Preview](https://yue1123.github.io/img-previewer/demo/)

		# how to use

		### NPM

		```bash
		npm i img-previewer
		# or
		yarn add img-previewer
		```

		或者 CDN
		`https://cdn.jsdelivr.net/npm/img-previewer@1.0.1/dist/img-previewer.min.js`
		### CDN

		# 在 vue / react 中使用
		```html
		<script src="https://cdn.jsdelivr.net/npm/img-previewer@1.0.1/dist/img-previewer.min.js"></script>
		```

		<!-- 假如你页面中有这样一段 html 结构,无需做任何改变,图片就可以拥有的展开预览并且附带平滑的动画 -->
		### Enable

		<!-- ```html
		<div id="app">
		<img src="./img/pexels-photo-1172064.jpeg" alt="" />
		<img src="./img/pexels-photo-1658967.jpeg" alt="" />
		<img src="./img/pexels-photo-210307.jpeg" alt="" />
		</div>
		```
		-->

		```js
		//js
		import ImgPreviewer from 'img-previewer'
		import ImgPreviewer from'img-previewer'
		//css
		import 'img-previewer/dist/index.css'
		import'img-previewer/dist/index.css'

		const imgpreviewer = new ImgPreviewer(id,{options...})
		const imgpreviewer = new ImgPreviewer(css selector,{options...})
		```

		# options
		# Property list

		\| \| 说明 \| 默认值 \|
		\| --------- \| ---------------------- \| --------------------------- \|
		\| ratio \| 图片铺满预览区域的比例 \| 0.9(90%) \|
		\| scrollbar \| 是否自动隐藏滚动条 \| false \|
		\| zoom \| 缩放图片的配置 \| {min: 0.1,max: 5,step: 0.1} \|
		\| onInited \| 初始化完成后触发事件 \| - \|
		\| \| Type \| Description \| Default Value \|
		\| ---------- \| ------ \| ------------------------------------------------------- \| ----------------------------------------------- \|
		\| fillRatio \| number \| The proportion of the image that fills the preview area \| 0.9(90%) \|
		\| dataUrlKey \| string \| The key of the image address value \| src \|
		\| imageZoom \| object \| Zoom image configuration \| {min: 0.1,max: 5,step: 0.1} \|
		\| style \| object \| Style configuration \| {modalOpacity: 0.6,headerOpacity: 0,zIndex: 99} \|
		\| i18n \| object \| tooltips International configuration \| zh_cn or es \|

		## options.zoom
		## options.imageZoom

		\| \| 说明 \| 默认值 \|
		\| ---- \| ---------------------- \| -------- \|
		\| min \| 最小缩放比例 \| 0.1(10%) \|
		\| max \| 最大缩放比例 \| 5(500%) \|
		\| step \| 滚轮每次滚动变化的比例 \| 0.1 \|
		\| \| Description \| Default value \|
		\| ---- \| ---------------------------------------------- \| ------------- \|
		\| min \| Minimum zoom ratio \| 0.1(10%) \|
		\| max \| Maximum zoom ratio \| 5(500%) \|
		\| step \| The change ratio of the scroll wheel each time \| 0.1 \|

		# 更新图片
		## options.style

		一些动态更新图片列表使用
		\| \| Description \| Default value \|
		\| ------------- \| ------------------------------ \| ------------- \|
		\| modalOpacity \| Preview area mask transparency \| 0.6 \|
		\| headerOpacity \| Toolbar transparency \| 0 \|
		\| zIndex \| Level of plug-in rendering \| 99 \|

		## options.i18n

		Simplified Chinese and English are supported by default, others need to be configured by themselves

		\| \| Description \|
		\| ------------ \| ------------- \|
		\| RESET \| Reset \|
		\| ROTATE_LEFT \| Rotate Left \|
		\| ROTATE_RIGHT \| Rotate right \|
		\| CLOSE \| Close preview \|
		\| NEXT \| Next \|
		\| PREV \| Previous \|

		### hot key

		\| Button \| Description \|
		\| ------ \| ------------- \|
		\| Esc \| Close preview \|
		\| <= \| Previous \|
		\| => \| Next \|

		# Update picture

		Some dynamically updated picture lists use

		```js
		const a = new ImgPreviewer('body')
		// 图片渲染到页面后调用
		// Called after the image is rendered on the page
		a.update()
		```

.babelrc

dist/bundle.css

rollup.config.js

dist/index.css

Sorry, the diff of this file is not supported yet

New alerts

Improved metrics

Worsened metrics