├── LICENSE ├── index.html ├── README.md └── dist ├── img-previewer.css └── img-previewer.js /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Luc Thien Phong 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Demo 9 | 10 | 11 | 16 | 17 | 18 | 19 |

Img Previewer

20 |

A light wight javascript image viewing plugin with silky preview animation and dependence free 21 | Download on Github 22 |

23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 |
42 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Img-previewer Js 2 | 3 | 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 4 | 5 | These functions are provided: 6 | 7 | 1. Silky, interruptible transition animation 8 | 2. Use mouse wheel to zoom picture 9 | 3. Icon drag picture 10 | 4. Previous & Next 11 | 5. Shortcut key support 12 | 6. Support for mobile gestures (zoom in with two fingers) 13 | 7. Multi-language internationalization support 14 | 8. Picture loading monitor 15 | 16 | **tips: For performance reasons, the mobile terminal does not do swiper** 17 | 18 | # Example 19 | 20 | [Preview](https://www.ltp110.tk/img-previewer/) 21 | 22 | # How to use 23 | 24 | ```html 25 | 26 | 27 | 32 | ``` 33 | 34 | # Property list 35 | 36 | | | Type | Description | Default Value | 37 | | ------------- | ------ | ----------------------------------------------------------------------------------- | ----------------------------------------------- | 38 | | fillRatio | number | The proportion of the image that fills the preview area | 0.9(90%) | 39 | | dataUrlKey | string | The key of the image address value | src | 40 | | triggerEvent | string | trigger event | click | 41 | | imageZoom | object | Zoom image configuration | {min: 0.1,max: 5,step: 0.1} | 42 | | style | object | Style configuration | {modalOpacity: 0.6,headerOpacity: 0,zIndex: 99} | 43 | | i18n | object | tooltips International configuration | null | 44 | | bubblingLevel | number | Bubble to detect whether the parent element of the image is hidden by the css style | 0 | 45 | 46 | > Optional values for triggerEvent are: click and dblclick 47 | ## bubblingLevel Description 48 | You should try to use this property when you notice an abnormal image hide animation. Because when the image or the parent element of the image is hidden by some CSS styles, it cannot be detected through the js api, so you need to pass in the correct upward lookup level according to the actual situation to help the plug-in complete the correct hiding animation. As shown below, the correct bubblingLevel is at least 3 49 | 50 | **for performance considerations, it is not recommended to fill in this attribute value at will** 51 | 52 | ```html 53 |
54 |
55 | 56 |
57 |
58 | ``` 59 | 60 | **Notice:** 61 | Currently detecting that an element or parent element is hidden by a css style only supports the following styles: 62 | 63 | - opacity: 0; 64 | - height: 0; 65 | - width: 0; 66 | - visibility: hidden; 67 | 68 | ## options.imageZoom 69 | 70 | | | Description | Default value | 71 | | ---- | ---------------------------------------------- | ------------- | 72 | | min | Minimum zoom ratio | 0.1(10%) | 73 | | max | Maximum zoom ratio | 5(500%) | 74 | | step | The change ratio of the scroll wheel each time | 0.1 | 75 | 76 | ## options.style 77 | 78 | | | Description | Default value | 79 | | ------------- | ------------------------------ | ------------- | 80 | | modalOpacity | Preview area mask transparency | 0.6 | 81 | | headerOpacity | Toolbar transparency | 0 | 82 | | zIndex | Level of plug-in rendering | 99 | 83 | 84 | ## options.i18n 85 | 86 | Simplified Chinese and English are supported by default, others need to be configured by themselves 87 | 88 | | | Description | 89 | | ------------ | ------------- | 90 | | RESET | Reset | 91 | | ROTATE_LEFT | Rotate Left | 92 | | ROTATE_RIGHT | Rotate right | 93 | | CLOSE | Close preview | 94 | | NEXT | Next | 95 | | PREV | Previous | 96 | 97 | ## api methods 98 | 99 | | Method name | Description | 100 | | ------------------ | -------------------------- | 101 | | update() | update image els | 102 | | getTotalIndex() | get total image el numbers | 103 | | show(index:number) | show index image | 104 | | next() | goto next | 105 | | prev() | goto prev | 106 | 107 | ### hot key 108 | 109 | | Button | Description | 110 | | ------ | ------------- | 111 | | Esc | Close preview | 112 | | <= | Previous | 113 | | => | Next | 114 | 115 | # Update picture 116 | 117 | Some dynamically updated picture lists use 118 | 119 | ```js 120 | const imgPreviewer = new ImgPreviewer('body') 121 | // Called after the image is rendered on the page 122 | imgPreviewer.update() 123 | ``` 124 | 125 | # play slideshow 126 | 127 | ```js 128 | let timer = null 129 | function play() { 130 | timer && clearInterval(timer) 131 | let index = 0 132 | a.show(index) 133 | timer = setInterval(() => { 134 | if (index < a.getTotalIndex()) { 135 | index++ 136 | } else { 137 | index = 0 138 | } 139 | a.show(index) 140 | }, 2000) 141 | } 142 | play() 143 | ``` 144 | -------------------------------------------------------------------------------- /dist/img-previewer.css: -------------------------------------------------------------------------------- 1 | .image-preview-container { 2 | position: fixed; 3 | top: 0; 4 | left: 0; 5 | z-index: 9999; 6 | width: 100vw; 7 | height: 100vh; 8 | background: rgba(0, 0, 0, .6); 9 | transition: all .3s; 10 | display: none; 11 | color: #fff; 12 | will-change: transform; 13 | user-select: none 14 | } 15 | 16 | .image-preview-container.show { 17 | animation: show .5s forwards; 18 | -webkit-animation: show .5s forwards 19 | } 20 | 21 | .image-preview-container.hiding .preview-header { 22 | animation: opacityAnimation .5s forwards reverse 23 | } 24 | 25 | .image-preview-container img { 26 | transition: all .5s; 27 | transform: translateX(var(--offsetX)) translateY(var(--offsetY)) translateZ(0) scale(var(--scale), var(--scale)) rotate(var(--rotate)) 28 | } 29 | 30 | .image-preview-container .image-container { 31 | width: 100% !important; 32 | height: 100% !important; 33 | overflow: hidden 34 | } 35 | 36 | .image-preview-container .preview-header { 37 | height: 60px; 38 | background: rgba(0, 0, 0, .2); 39 | display: flex; 40 | justify-content: space-between; 41 | align-items: center; 42 | padding: 0 2vw 0 1vw; 43 | position: relative; 44 | z-index: 90; 45 | animation: opacityAnimation .5s forwards 46 | } 47 | 48 | .image-preview-container .preview-header .nums { 49 | display: flex; 50 | justify-content: flex-start; 51 | align-items: center 52 | } 53 | 54 | .image-preview-container .preview-header .nums p { 55 | font-weight: 300; 56 | padding: 4px 8px; 57 | font-size: 16px 58 | } 59 | 60 | .image-preview-container .preview-header button { 61 | background: 0 0; 62 | border: none; 63 | outline: none; 64 | font-size: 18px; 65 | color: #fff; 66 | padding: 4px 8px; 67 | border-radius: 4px; 68 | -webkit-border-radius: 4px; 69 | -moz-border-radius: 4px; 70 | -ms-border-radius: 4px; 71 | -o-border-radius: 4px; 72 | position: relative 73 | } 74 | 75 | .image-preview-container .preview-header .tool-btn button { 76 | margin-left: 2vw 77 | } 78 | 79 | .image-preview-container .preview-header button:hover::after, 80 | .image-preview-container .preview-header button:hover::before { 81 | display: block 82 | } 83 | 84 | .image-preview-container .preview-header button::before { 85 | content: ''; 86 | position: absolute; 87 | left: 50%; 88 | top: calc(130% - 5px); 89 | transform: translateX(-50%); 90 | border-right: 5px solid transparent; 91 | border-left: 5px solid transparent; 92 | border-bottom: 5px solid #000; 93 | display: none 94 | } 95 | 96 | .image-preview-container .preview-header button::after { 97 | content: attr(data-tooltip); 98 | font-size: 12px; 99 | position: absolute; 100 | left: 50%; 101 | top: 130%; 102 | transform: translateX(-50%); 103 | background: #000; 104 | padding: 2px 5px; 105 | white-space: nowrap; 106 | -webkit-transform: translateX(-50%); 107 | -moz-transform: translateX(-50%); 108 | -ms-transform: translateX(-50%); 109 | -o-transform: translateX(-50%); 110 | border-radius: 2px; 111 | -webkit-border-radius: 2px; 112 | -moz-border-radius: 2px; 113 | -ms-border-radius: 2px; 114 | -o-border-radius: 2px; 115 | display: none 116 | } 117 | 118 | .image-preview-container .preview-header button:hover { 119 | background: rgba(0, 0, 0, .2); 120 | cursor: pointer 121 | } 122 | 123 | .zoom-in { 124 | cursor: zoom-in 125 | } 126 | 127 | .moving { 128 | transition: none !important; 129 | -webkit-transition: none !important; 130 | -moz-transition: none !important; 131 | -ms-transition: none !important; 132 | -o-transition: none !important 133 | } 134 | 135 | @keyframes show { 136 | 0% { 137 | background: transparent 138 | } 139 | 140 | 100% { 141 | background: rgba(0, 0, 0, .6) 142 | } 143 | } 144 | 145 | @keyframes opacityAnimation { 146 | 0% { 147 | opacity: 0 148 | } 149 | 150 | 100% { 151 | opacity: 1 152 | } 153 | } 154 | 155 | @font-face { 156 | font-family: iconfont; 157 | src: url(//at.alicdn.com/t/font_2387568_7n96d4x0sva.eot?t=1614436212405); 158 | src: url(//at.alicdn.com/t/font_2387568_7n96d4x0sva.eot?t=1614436212405#iefix) format('embedded-opentype'), url(data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAT4AAsAAAAACjAAAASqAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDXgqGXIUtATYCJAMcCxAABCAFhG0HgQEbpggRFaRXkP0ocPcUUIQJE35oLZsytsFlXASH/P8RD//tx7pvZr5g2iCR4Ee6SRMNieSNBom6Ftqmsknrnm272avZT+9ZL5kSyYL4OoAruFgmd66mB+uXQDZXayVUeGYizL6S8eBfX0r6fOmkWbj7n2OmS2uw/GubS2VStY2Ge+MBDSj7ovRADvhO7OjUTwN23crPBD1NoNe0MMTq2MmzoVUomwJxWlKUA23IouSQQ6uvU04WiPvA16YB8ixwz/75+CwmRCCpMijP2j4Zkw+L7+B5CdJxOkjPRtC154JwjowOKMRdqucWkJvpIL2f38mzj0GtpH7nOfl84rnP88DnJRxHuFMZDYNqI1lRSfP650UNjKYf2ONszTvQ+WTekXwK72g+Fe981PK0gTAJaEugtaroRjfYQ+4XiC1gO03ah+KQ5TFC3eUXpVJ4eStVbZRJRxfkGzdsYh2LrHqHQgtDtdFmHZVfQKaNTFilT3OzdF0G0kGdnyuv4KJps6gqMFSOWW9us9rXr6UkV1/Pvn498caNJPbaDAmzUbeJllq3OBKWzX6YguvX3+Rr1xLeW6dgjjqR+Ji/csMJV2Q/nm6iFBYHpLdKlayZzmngvuuzh1ntmxlqtgnTCWZ2i91h6I2EisXmdRuWpJmwqXJswnMjYfLQkUnViZa9TjZ6yPXZHewsMNNK1kogvUWiMFFkVoByzJnUHd29/jiBVpzQ1LmB3RWXlpSWWkWjXbHRiI3NBuNGVxuEP3KDAVcmGbfJMNfmuhEG34wYcdbnLOiqEUrsrPdZlRc66nNUFZSkSDNvhEFXse7f92aFE849J7fOIZajy6/QclVoCo1DyYvHD52t8HH3ubj5oY98sztTkT54wvaE4iPo188M5RFWiMesI9+99FgG1zjWCyvfDOGP7Ed7JhXnrGMXiN+UBD6r34Y8Jrr3HrnSH18T0ozGDoijnXFWvsXWn5Vqc9V+mTe1grLglsj1h50bB08xXwW46p6Z0gd7tm3Y3xRSEVzPl1ldfVxwTrLNpT87727g9KijCa2oNqQ36vB5X0a0TrQA8xJ4/yv8QbxAzKlJ2OuskoO7nvjjWfgPm6Ed/H+TnuYAlvolz0Ey6tN8CA3K3fIQ0j97L/M45NqZLOXgbyIpD+BtdnM9LNz/ch4jwAOkVVr6pJkKkYP4p/jKFWtT3n10UeklCDQWZUol9KpDPF+BUffb0070JjF9rQkfksYUZK0ZZMF2UOkzD7XWAvSaM+58nzG1sihiYFYPQRi2A5JBTyAbdg5ZsPegMukd1IaxgUAiMbQ3SgVEiRrFqAU/8P6HYKhazS7KKb2h27PmoNymvJB7iMMaERXNX7Eit7Gnf90mYsEyFbjQ8zBngsYU0cjkRdp5jixM+6TJUBmUURjSBPoAb/9AYJDKmuOFin3/DXJ2mcY5PT+CL4h1YXqwmiwlkFdNLdVzLPO7L2cjhGXXWYwU4AIXymqGgJa+LEKGmPgaqeZsZgbZspqpf105zhPQS/lgEylylKiijiZawuug/4PDY53X1bmzTtoY2quMjUm0XzfhmLF3qqPJ1PHQ6qk6oygcm3ddbREMynWvwwAA) format('woff2'), url(//at.alicdn.com/t/font_2387568_7n96d4x0sva.woff?t=1614436212405) format('woff'), url(//at.alicdn.com/t/font_2387568_7n96d4x0sva.ttf?t=1614436212405) format('truetype'), url(//at.alicdn.com/t/font_2387568_7n96d4x0sva.svg?t=1614436212405#iconfont) format('svg') 159 | } 160 | 161 | .iconfont { 162 | font-family: iconfont !important; 163 | font-size: 16px; 164 | font-style: normal; 165 | -webkit-font-smoothing: antialiased; 166 | -moz-osx-font-smoothing: grayscale 167 | } 168 | 169 | .icon-xiayige:before { 170 | content: '\e627' 171 | } 172 | 173 | .icon-shangyige:before { 174 | content: '\e622' 175 | } 176 | 177 | .icon-account-practice-lesson-close:before { 178 | content: '\e600' 179 | } 180 | 181 | .icon-zhongzhi:before { 182 | content: '\e602' 183 | } 184 | 185 | .icon-xuanzhuan:before { 186 | content: '\e615' 187 | } 188 | 189 | .icon-xuanzhuan1:before { 190 | content: '\e669' 191 | } 192 | 193 | @media screen and (max-width:768px) { 194 | 195 | .preview-header .nums p, 196 | .preview-header .iconfont { 197 | font-size: 12px !important 198 | } 199 | } -------------------------------------------------------------------------------- /dist/img-previewer.js: -------------------------------------------------------------------------------- 1 | ! function (e, t) { 2 | "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() 3 | }(this, function () { 4 | "use strict"; 5 | 6 | function e(e, t) { 7 | for (var n = 0; n < t.length; n++) { 8 | var i = t[n]; 9 | i.enumerable = i.enumerable || !1, i.configurable = !0, "value" in i && (i.writable = !0), Object.defineProperty(e, i.key, i) 10 | } 11 | } 12 | 13 | function t(e) { 14 | e.preventDefault() 15 | } 16 | 17 | function n(e, t, n) { 18 | var i = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame, 19 | o = window.cancelAnimationFrame || window.mozCancelAnimationFrame, 20 | s = t.start || 0, 21 | a = t.end || 0, 22 | c = t.step, 23 | l = null; 24 | ! function d() { 25 | 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)) 26 | }() 27 | } 28 | 29 | function i(e, t, n) { 30 | var i = d * n / e, 31 | o = l * n / t; 32 | return i > o ? o : i 33 | } 34 | 35 | function o(e, t, n, i, o) { 36 | e.style.cssText = "width: 220px;height: unset;position:fixed; top:".concat(o, "px; left:").concat(i, "px;") 37 | } 38 | 39 | function s(e) { 40 | r.style.display = e ? "block" : "none" 41 | } 42 | 43 | function a(e) { 44 | c.style.overflow = e ? "auto" : "hidden" 45 | } 46 | var c, l, d, r = null, 47 | u = null, 48 | m = null, 49 | h = 0, 50 | f = { 51 | ratio: .9, 52 | zoom: { 53 | min: .1, 54 | max: 5, 55 | step: .1 56 | }, 57 | opacity: .6, 58 | scrollbar: !1 59 | }; 60 | return function () { 61 | function g(e) { 62 | var t = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {}; 63 | if (function (e, t) { 64 | if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function") 65 | }(this, g), this.selector = e, this.options = t, this.config = Object.assign({}, f, t), this.index = 0, this.imageElements = [], !e || "string" != typeof e) throw new Error("ImagePreviewer plugin should css string selector that on first params,like #el,.el"); 66 | if (!document.querySelector(e)) throw new Error("selector is invalid"); 67 | this.init() 68 | } 69 | var p, v, y; 70 | return p = g, y = [{ 71 | key: "setImageAnimationParams", 72 | value: function (e) { 73 | u.style.setProperty("--offsetX", "".concat(e.endX, "px")), u.style.setProperty("--offsetY", "".concat(e.endY + 30, "px")), u.style.setProperty("--scale", "".concat(e.scale)), u.style.setProperty("--rotate", "".concat(e.rotate, "deg")) 74 | } 75 | }], (v = [{ 76 | key: "update", 77 | value: function () { 78 | var e = this; 79 | this.imageElements = document.querySelectorAll("".concat(this.selector, " img:not(#preview-image)")), this.imageElements.forEach(function (t, n) { 80 | t.onclick = null, t.onclick = function (t) { 81 | e.handleOpen(t, n), s(!0), e.updateIndex(n) 82 | } 83 | }) 84 | } 85 | }, { 86 | key: "bindEvent", 87 | value: function () { 88 | var e = this, 89 | n = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(window.navigator.userAgent), 90 | i = n ? "touchstart" : "mousedown", 91 | o = n ? "touchend" : "mouseup", 92 | a = n ? "touchmove" : "mousemove"; 93 | this.imageElements.forEach(function (t, n) { 94 | t.onclick = function (t) { 95 | e.handleOpen(t, n), s(!0), e.updateIndex(n) 96 | } 97 | }), document.getElementById("close").addEventListener("click", function () { 98 | e.handleClose() 99 | }), document.getElementById("reset").addEventListener("click", function () { 100 | e.handleReset() 101 | }), document.getElementById("prev").addEventListener("click", function () { 102 | e.prev() 103 | }), document.getElementById("next").addEventListener("click", function () { 104 | e.next() 105 | }), r.addEventListener("click", function (t) { 106 | "image-container" === t.target.classList[0] && e.handleClose() 107 | }), u.addEventListener(i, function (e) { 108 | var t = e.clientX - u.offsetLeft, 109 | n = e.clientY - u.offsetTop; 110 | this.classList.add("moving"), this["on".concat(a)] = function (e) { 111 | var i = e.clientX - t, 112 | o = e.clientY - n; 113 | this.style.left = "".concat(i, "px"), this.style.top = "".concat(o, "px") 114 | }, this["on".concat(o)] = function () { 115 | this.classList.remove("moving"), this.onmousemove = null 116 | }, this.onmouseout = function () { 117 | this.classList.remove("moving"), this.onmousemove = null 118 | } 119 | }), u.addEventListener("mousewheel", function (t) { 120 | var n = e.config.zoom, 121 | i = n.min, 122 | o = n.max, 123 | s = n.step; 124 | t.wheelDelta > 0 && h < o ? h += s : h > i && (h -= s), u.style.setProperty("--scale", "".concat(h.toFixed(2))) 125 | }, !0), document.getElementById("rotate-right").addEventListener("click", function () { 126 | e.handelRotateRight() 127 | }), document.getElementById("rotate-left").addEventListener("click", function () { 128 | e.handelRotateLeft() 129 | }), r.addEventListener("mousewheel", t), document.ondragstart = t, document.ondragend = t, window.onresize = function (e, t) { 130 | var n = null; 131 | return function (i) { 132 | clearTimeout(n), n = setTimeout(function () { 133 | e(i), clearTimeout(n) 134 | }, t) 135 | } 136 | }.bind(null, function () { 137 | e.handleClose(), d = window.innerWidth, l = window.innerHeight 138 | }, 100)() 139 | } 140 | }, { 141 | key: "handleReset", 142 | value: function () { 143 | u.style.top = "".concat(m.startY, "px"), u.style.left = "".concat(m.startX, "px"), u.style.setProperty("--rotate", "".concat(0, "deg")), u.style.setProperty("--scale", "".concat(m.scale)) 144 | } 145 | }, { 146 | key: "handleOpen", 147 | value: function (e, t) { 148 | var n = this.config.ratio, 149 | s = this.imageElements, 150 | c = e.target, 151 | f = c.width, 152 | p = c.height, 153 | v = e.clientX - e.offsetX, 154 | y = e.clientY - e.offsetY + 1; 155 | h = i(f, p, n), m = { 156 | startX: v, 157 | startY: y, 158 | endX: d / 2 - f / 2 - v, 159 | endY: l / 2 - p / 2 - y, 160 | scale: h, 161 | rotate: 0 162 | }, u.src = s[t].src, o(u, f, p, v, y), setTimeout(function () { 163 | g.setImageAnimationParams(m) 164 | }), r.classList.add("show"), !this.config.scrollbar && a(!1) 165 | } 166 | }, { 167 | key: "handleClose", 168 | value: function () { 169 | var e, t, i, o, c, l = this.config.opacity, 170 | d = this.imageElements[this.index]; 171 | if (e = d, t = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight, i = e.offsetTop, o = e.offsetHeight, c = document.documentElement.scrollTop, o + i > c && i - c <= t + 100) { 172 | n(r, { 173 | start: l, 174 | end: 0, 175 | step: -.02, 176 | style: "background", 177 | template: "rgba(0, 0, 0, $)" 178 | }, function () { 179 | u.style = "", u.src = "", r.style.background = "", r.classList.remove("hiding"), s(!1) 180 | }); 181 | var m = function (e) { 182 | return e.getBoundingClientRect() 183 | }(d), 184 | h = m.top, 185 | f = m.left, 186 | g = m.width, 187 | p = m.height; 188 | u.style.cssText = "width: 220px;height: unset;position:fixed; top:".concat(h, "px; left: ").concat(f, "px;") 189 | } else u.style.display = "none", n(r, { 190 | start: l, 191 | end: 0, 192 | step: -.05, 193 | style: "background", 194 | template: "rgba(0, 0, 0, $)" 195 | }, function () { 196 | u.src = "", u.style = "", r.style = "", r.classList.remove("hiding"), s(!1) 197 | }); 198 | r.classList.remove("show"), r.classList.add("hiding"), !this.config.scrollbar && a(!0) 199 | } 200 | }, { 201 | key: "handelRotateLeft", 202 | value: function () { 203 | m.rotate -= 90, u.style.setProperty("--rotate", "".concat(m.rotate, "deg")) 204 | } 205 | }, { 206 | key: "handelRotateRight", 207 | value: function () { 208 | m.rotate += 90, u.style.setProperty("--rotate", "".concat(m.rotate, "deg")) 209 | } 210 | }, { 211 | key: "prev", 212 | value: function () { 213 | 0 !== this.index && (this.index -= 1, this.updateIndex(this.index), this.useIndexUpdateImage(this.index)) 214 | } 215 | }, { 216 | key: "next", 217 | value: function () { 218 | this.index < this.imageElements.length - 1 && (this.index += 1, this.updateIndex(this.index), this.useIndexUpdateImage(this.index)) 219 | } 220 | }, { 221 | key: "useIndexUpdateImage", 222 | value: function (e) { 223 | var t = this.config.ratio, 224 | n = this.imageElements[e], 225 | s = n.height, 226 | a = n.width, 227 | c = n.src; 228 | u.classList.add("moving"), o(u, a, s, d / 2 - a / 2, l / 2 - s / 2), m = { 229 | endX: 0, 230 | endY: 0, 231 | scale: i(a, s, t), 232 | rotate: 0 233 | }, u.src = c, g.setImageAnimationParams(m), setTimeout(function () { 234 | u.classList.remove("moving") 235 | }) 236 | } 237 | }, { 238 | key: "updateIndex", 239 | value: function (e) { 240 | this.index = e, document.getElementById("total-nums").innerText = this.imageElements.length, document.getElementById("current-index").innerText = e + 1 241 | } 242 | }, { 243 | key: "render", 244 | value: function () { 245 | var e = document.getElementById("image-preview-container"); 246 | e ? r = e : ((r = document.createElement("div")).classList.add("image-preview-container"), r.id = "image-preview-container", 247 | r.innerHTML = ` 248 |
249 |
250 | 251 |

252 | 253 |  /  254 | 255 |

256 | 257 |
258 |
259 | 260 | 261 | 262 | 263 |
264 |
265 |
266 |
267 |
`, 268 | c.appendChild(r)), u = document.getElementById("preview-image") 269 | } 270 | }, { 271 | key: "init", 272 | value: function () { 273 | c = document && document.body || document.getElementsByTagName("body")[0], d = window.innerWidth, l = window.innerHeight, this.imageElements = document.querySelectorAll("".concat(this.selector, " img")); 274 | for (var e = 0, t = this.imageElements.length; e < t; e++) this.imageElements[e].classList.add("zoom-in"); 275 | this.render(), this.updateIndex(this.index), this.bindEvent(this.imageElements), this.options.onInited && this.options.onInited() 276 | } 277 | }]) && e(p.prototype, v), y && e(p, y), g 278 | }() 279 | }); --------------------------------------------------------------------------------