images-viewer-js 1.1.1 → 1.1.5

package/README.en.md

@@ -49,16 +49,49 @@ const viewer4 = new ImagesViewer({
       url: 'https://example.com/image1.jpg',
       title: 'Landscape Image',
       thumbnail: 'https://example.com/thumb1.jpg',
-      category: 'nature'
     },
     {
       url: 'https://example.com/image2.jpg',
       title: 'Architecture Image',
       thumbnail: 'https://example.com/thumb2.jpg',
-      category: 'architecture'
     }
   ]
 });
+
+// Custom property mapping
+const viewer5 = new ImagesViewer({
+  images: [
+    {
+      url2: 'https://example.com/image1.jpg',
+      title2: 'Landscape Image',
+      thumbnail2: 'https://example.com/thumb1.jpg'
+    },
+    {
+      url2: 'https://example.com/image2.jpg',
+      title2: 'Architecture Image',
+      thumbnail2: 'https://example.com/thumb2.jpg'
+    }
+  ],
+  props: {
+    url: 'url2',
+    title: 'title2',
+    thumbnail: 'thumbnail2'
+  }
+});
+
+// Function form property mapping
+const viewer6 = new ImagesViewer({
+  images: [
+    { id: 1, path: 'photos/1.jpg', alt: 'Landscape' },
+    { id: 2, path: 'photos/2.jpg', alt: 'Portrait' }
+  ],
+  props: {
+    url: (item, index) => `https://example.com/${item.path}`,
+    title: (item, index) => `${item.alt} (ID: ${item.id})`,
+    thumbnail: (item, index) => `https://example.com/thumbnails/${item.id}.jpg`
+  }
+});
+
 ```
 
 ### npm
@@ -136,6 +169,9 @@ const viewer = new ImagesViewer({
   // Maximum cache size
   maxCacheSize: 30,
 
+  // Whether to retry after failure
+  retryOnError: false,
+
   // Button configuration
   buttons: {
     zoomIn: true, // Zoom in
@@ -162,32 +198,46 @@ const viewer = new ImagesViewer({
   // Initial image index
   initialIndex: 0,
 
+  // Custom property mapping
+  props: {
+    url: 'url', // Property name or getter function for image URL
+    title: 'title', // Property name or getter function for image title
+    thumbnail: 'thumbnail' // Property name or getter function for thumbnail URL
+  },
+
   // Event callbacks
   onShow: function(container) {
-    console.log('Viewer shown');
+    console.log('Viewer shown:', container);
   },
 
   onClose: function() {
     console.log('Viewer closed');
   },
 
-  onChange: function(currentIndex, direction) {
-    console.log('Image changed:', currentIndex, direction);
+  onChange: function(data) {
+    console.log('Switched to image:', data.index);
+    console.log('From image:', data.oldIndex);
+    console.log('Direction:', data.direction);
   },
 
-  // Rotation event
   onRotate: function(data) {
-    console.log('Image rotated:', data);
+    console.log('Image rotated:', data.rotation);
   },
 
-  // Drag event
   onDrag: function(data) {
-    console.log('Image dragged:', data);
+    console.log('Image dragged:', data.translateX, data.translateY);
   },
 
-  // Zoom event
   onZoom: function(data) {
-    console.log('Image zoomed:', data);
+    console.log('Image zoomed:', data.scale);
+  },
+
+  onImageError: function(data) {
+    console.log('Image load failed:', data.url);
+  },
+
+  onThumbnailError: function(data) {
+    console.log('Thumbnail load failed:', data.url);
   },
 
   // Custom info bar function
@@ -454,13 +504,12 @@ const viewer = new ImagesViewer({
       },
     ],
   ],
-  onChange: (index, direction) => {
-    // direction: 'prev' | 'next'
-    console.log(index, direction);
+  onChange: (data) => {
+    console.log('Image changed:', data.index, data.direction);
   },
-  onShow: dom => {
+  onShow: (container) => {
     // Custom button
-    const toolbar = dom.querySelector('.images-viewer-toolbar');
+    const toolbar = container.querySelector('.images-viewer-toolbar');
     const button = document.createElement('button');
     button.className = 'images-viewer-tool-btn';
 
@@ -470,10 +519,8 @@ const viewer = new ImagesViewer({
 
     button.addEventListener('click', e => {
       console.log('test');
-      // e.stopPropagation();
     });
     toolbar.appendChild(button);
-    console.log('onShow', dom);
   },
   onClose: () => {
     console.log('close');

package/README.md

@@ -49,16 +49,49 @@ const viewer4 = new ImagesViewer({
       url: 'https://example.com/image1.jpg',
       title: '风景图片',
       thumbnail: 'https://example.com/thumb1.jpg',
-      category: 'nature'
     },
     {
       url: 'https://example.com/image2.jpg',
       title: '建筑图片',
       thumbnail: 'https://example.com/thumb2.jpg',
-      category: 'architecture'
     }
   ]
 });
+
+// 自定义属性映射
+const viewer5 = new ImagesViewer({
+  images: [
+    {
+      url2: 'https://example.com/image1.jpg',
+      title2: '风景图片',
+      thumbnail2: 'https://example.com/thumb1.jpg'
+    },
+    {
+      url2: 'https://example.com/image2.jpg',
+      title2: '建筑图片',
+      thumbnail2: 'https://example.com/thumb2.jpg'
+    }
+  ],
+  props: {
+    url: 'url2',
+    title: 'title2',
+    thumbnail: 'thumbnail2'
+  }
+});
+
+// 函数形式的属性映射
+const viewer6 = new ImagesViewer({
+  images: [
+    { id: 1, path: 'photos/1.jpg', alt: '风景' },
+    { id: 2, path: 'photos/2.jpg', alt: '人物' }
+  ],
+  props: {
+    url: (item, index) => `https://example.com/${item.path}`,
+    title: (item, index) => `${item.alt} (ID: ${item.id})`,
+    thumbnail: (item, index) => `https://example.com/thumbnails/${item.id}.jpg`
+  }
+});
+
 ```
 
 ### npm
@@ -136,6 +169,9 @@ const viewer = new ImagesViewer({
   // 最大缓存数量
   maxCacheSize: 30,
 
+  // 是否在失败后重新请求
+  retryOnError: false,
+
   // 按钮配置
   buttons: {
     zoomIn: true, // 放大
@@ -154,7 +190,7 @@ const viewer = new ImagesViewer({
     originalSize: true, // 原始尺寸
   },
 
-   // 自定义按钮
+  // 自定义按钮
   customButtons: [
     ['🔍', function() { console.log('自定义按钮点击'); }]
   ],
@@ -162,32 +198,46 @@ const viewer = new ImagesViewer({
   // 初始图片索引
   initialIndex: 0,
 
+  // 自定义属性映射
+  props: {
+    url: 'url', // 图片 URL 的属性名或获取函数
+    title: 'title', // 图片标题的属性名或获取函数
+    thumbnail: 'thumbnail' // 缩略图 URL 的属性名或获取函数
+  },
+
   // 事件回调
   onShow: function(container) {
-    console.log('查看器显示');
+    console.log('查看器显示:', container);
   },
 
   onClose: function() {
     console.log('查看器关闭');
   },
 
-  onChange: function(currentIndex, direction) {
-    console.log('图片切换:', currentIndex, direction);
+  onChange: function(data) {
+    console.log('图片切换到:', data.index);
+    console.log('从图片:', data.oldIndex);
+    console.log('切换方向:', data.direction);
   },
 
-  // 旋转事件
   onRotate: function(data) {
-    console.log('图片旋转:', data);
+    console.log('图片旋转:', data.rotation);
   },
 
-  // 拖动事件
   onDrag: function(data) {
-    console.log('图片拖动:', data);
+    console.log('图片拖动:', data.translateX, data.translateY);
   },
 
-  // 缩放事件
   onZoom: function(data) {
-    console.log('图片缩放:', data);
+    console.log('图片缩放:', data.scale);
+  },
+
+  onImageError: function(data) {
+    console.log('图片加载失败:', data.url);
+  },
+
+  onThumbnailError: function(data) {
+    console.log('缩略图加载失败:', data.url);
   },
 
   // 信息栏自定义函数
@@ -454,13 +504,12 @@ const viewer = new ImagesViewer({
       },
     ],
   ],
-  onChange: (index, direction) => {
-    // direction: 'prev' | 'next'
-    console.log(index, direction);
+  onChange: (data) => {
+    console.log('图片切换:', data.index, data.direction);
   },
-  onShow: dom => {
+  onShow: (container) => {
     // 自定义按钮
-    const toolbar = dom.querySelector('.images-viewer-toolbar');
+    const toolbar = container.querySelector('.images-viewer-toolbar');
     const button = document.createElement('button');
     button.className = 'images-viewer-tool-btn';
 
@@ -470,10 +519,8 @@ const viewer = new ImagesViewer({
 
     button.addEventListener('click', e => {
       console.log('test');
-      // e.stopPropagation();
     });
     toolbar.appendChild(button);
-    console.log('onShow', dom);
   },
   onClose: () => {
     console.log('close');

package/dist/index.esm.js

@@ -1 +1 @@
-class t{constructor(t){if(this.defaultOptions={initialIndex:0,closeOnMaskClick:!1,loop:!0,preloadCount:3,maxCacheSize:30,minScale:.1,maxScale:5,buttons:{zoomIn:!0,zoomOut:!0,rotateLeft:!0,rotateRight:!0,reset:!0,download:!0,fullscreen:!0,prev:!0,next:!0,close:!0,topClose:!0,thumbnails:!0,info:!0,originalSize:!0},imageInfo:{visible:!1,showName:!0,showDimensions:!0},i18n:{info:{name:"\u540d\u79f0:",dimensions:"\u5c3a\u5bf8:",shortcuts:"\u5feb\u6377\u952e",zoomIn:"\u653e\u5927:",zoomOut:"\u7f29\u5c0f:",prev:"\u4e0a\u4e00\u5f20:",next:"\u4e0b\u4e00\u5f20:",reset:"\u91cd\u7f6e:",fullscreen:"\u5168\u5c4f:",info:"\u4fe1\u606f:",close:"\u5173\u95ed:"},buttons:{prev:"\u4e0a\u4e00\u5f20 (\u2190)",next:"\u4e0b\u4e00\u5f20 (\u2192)",close:"\u5173\u95ed (Esc)",loading:"\u52a0\u8f7d\u4e2d..."}},theme:{viewerBgColor:"rgba(0, 0, 0, 0.4)",toolbarBgColor:"rgba(150, 150, 150, 0.7)",toolbarBorderRadius:"30px",toolbarPadding:"8px 12px",toolbarBottom:"20px",buttonBgColor:"rgba(150, 150, 150, 0.7)",buttonHoverBg:"rgba(200, 200, 200, 0.4)",buttonSize:"40px",buttonFontSize:"20px",buttonBorderRadius:"50%",navButtonBgColor:"rgba(150, 150, 150, 0.7)",navButtonHoverBg:"rgba(200, 200, 200, 0.4)",navButtonSize:"50px",navButtonFontSize:"20px",navButtonBorderRadius:"50%",topCloseBtnSize:"50px",topCloseBtnTop:"20px",topCloseBtnRight:"20px",topCloseBtnFontSize:"24px",topCloseBtnBgColor:"rgba(150, 150, 150, 0.7)",topCloseBtnHoverBg:"rgba(200, 200, 200, 0.4)",infoBgColor:"rgba(150, 150, 150, 0.7)",infoBorderRadius:"12px",infoPadding:"10px 15px",infoFontSize:"13px",infoTop:"70px",infoLeft:"20px",zoomIndicatorBg:"rgba(150, 150, 150, 0.7)",zoomIndicatorBorderRadius:"18px",zoomIndicatorPadding:"6px 12px",zoomIndicatorFontSize:"14px",zoomIndicatorTop:"20px",zoomIndicatorLeft:"20px",activeColor:"rgba(100, 150, 255, 0.8)",textColor:"rgba(255, 255, 255, 0.9)",shadowColor:"rgba(0, 0, 0, 0.2)",transitionSpeed:"0.3s",thumbItemWidth:"70px",thumbItemHeight:"45px",thumbGap:"10px",thumbPadding:"15px",thumbMaxWidth:"90%"}},this.options={...this.defaultOptions,...t,buttons:{...this.defaultOptions.buttons,...t?.buttons||{}},imageInfo:{...this.defaultOptions.imageInfo,...t?.imageInfo||{}},i18n:{...this.defaultOptions.i18n,...t?.i18n||{},info:{...this.defaultOptions.i18n.info,...t?.i18n?.info||{}},buttons:{...this.defaultOptions.i18n.buttons,...t?.i18n?.buttons||{}}},theme:{...this.defaultOptions.theme,...t?.theme||{}}},this.parseImageOptions(t),0===this.images.length)throw new Error("\u672a\u63d0\u4f9b\u6709\u6548\u7684\u56fe\u7247URL");const i=Math.max(0,Math.min(this.options.initialIndex||0,this.images.length-1));this.currentIndex=i,this.scale=1,this.rotation=0,this.translateX=0,this.translateY=0,this.isDragging=!1,this.startX=0,this.startY=0,this.startTranslateX=0,this.startTranslateY=0,this.isFullscreen=!1,this.imageInfoVisible=this.options.imageInfo.visible,this.imageMetadata=[],this.loadedImages=new Map,this.loadingImages=new Map,this.loadedThumbnails=new Map,this.loadingThumbnails=new Map,this.lastTapTime=0,this.lastScale=1,this.lastTranslateX=0,this.lastTranslateY=0,this.hasPreviousState=!1,this.isToggledState=!1,this.touchState={isDragging:!1,isPinching:!1,initialDistance:null,initialScale:null,initialTranslateX:null,initialTranslateY:null,centerX:null,centerY:null,relativeCenterX:null,relativeCenterY:null,lastTouchTime:0,startX:0,startY:0,startTranslateX:0,startTranslateY:0,minScaleChange:.005,scaleRatio:1,stabilizationThreshold:3,movementCount:0},this.eventListeners=new Map,this.injectStyles(),this.preloadImages(),this.createOptimizedElements(),this.bindEvents(),this.onShow(),this.loadCurrentImage()}injectStyles(){const t=document.createElement("style");t.id="images-viewer-styles",t.textContent=`\n        :root {\n          /* \u80cc\u666f\u76f8\u5173\u53d8\u91cf */\n          --viewer-bg-color: ${this.options.theme.viewerBgColor};\n          \n          /* \u5de5\u5177\u680f\u76f8\u5173\u53d8\u91cf */\n          --toolbar-bg-color: ${this.options.theme.toolbarBgColor};\n          --toolbar-border-radius: ${this.options.theme.toolbarBorderRadius};\n          --toolbar-padding: ${this.options.theme.toolbarPadding};\n          --toolbar-bottom: ${this.options.theme.toolbarBottom};\n          \n          /* \u6309\u94ae\u76f8\u5173\u53d8\u91cf */\n          --button-bg-color: ${this.options.theme.buttonBgColor};\n          --button-hover-bg: ${this.options.theme.buttonHoverBg};\n          --button-size: ${this.options.theme.buttonSize};\n          --button-font-size: ${this.options.theme.buttonFontSize};\n          --button-border-radius: ${this.options.theme.buttonBorderRadius};\n\n          /* \u5bfc\u822a\u6309\u94ae\u76f8\u5173\u53d8\u91cf */\n          --nav-button-bg-color: ${this.options.theme.navButtonBgColor};\n          --nav-button-hover-bg: ${this.options.theme.navButtonHoverBg};\n          --nav-button-size: ${this.options.theme.navButtonSize};\n          --nav-button-font-size: ${this.options.theme.navButtonFontSize};\n          --nav-button-border-radius: ${this.options.theme.navButtonBorderRadius};\n          \n          /* \u53f3\u4e0a\u89d2\u5173\u95ed\u6309\u94ae\u53d8\u91cf */\n          --top-close-btn-size: ${this.options.theme.topCloseBtnSize};\n          --top-close-btn-top: ${this.options.theme.topCloseBtnTop};\n          --top-close-btn-right: ${this.options.theme.topCloseBtnRight};\n          --top-close-btn-font-size: ${this.options.theme.topCloseBtnFontSize};\n          --top-close-btn-bg-color: ${this.options.theme.topCloseBtnBgColor};\n          --top-close-btn-hover-bg: ${this.options.theme.topCloseBtnHoverBg};\n          \n          /* \u4fe1\u606f\u680f\u76f8\u5173\u53d8\u91cf */\n          --info-bg-color: ${this.options.theme.infoBgColor};\n          --info-border-radius: ${this.options.theme.infoBorderRadius};\n          --info-padding: ${this.options.theme.infoPadding};\n          --info-font-size: ${this.options.theme.infoFontSize};\n          --info-top: ${this.options.theme.infoTop};\n          --info-left: ${this.options.theme.infoLeft};\n          \n          /* \u7f29\u653e\u6307\u793a\u5668\u53d8\u91cf */\n          --zoom-indicator-bg: ${this.options.theme.zoomIndicatorBg};\n          --zoom-indicator-border-radius: ${this.options.theme.zoomIndicatorBorderRadius};\n          --zoom-indicator-padding: ${this.options.theme.zoomIndicatorPadding};\n          --zoom-indicator-font-size: ${this.options.theme.zoomIndicatorFontSize};\n          --zoom-indicator-top: ${this.options.theme.zoomIndicatorTop};\n          --zoom-indicator-left: ${this.options.theme.zoomIndicatorLeft};\n          \n          /* \u901a\u7528\u53d8\u91cf */\n          --active-color: ${this.options.theme.activeColor};\n          --text-color: ${this.options.theme.textColor};\n          --shadow-color: ${this.options.theme.shadowColor};\n          --transition-speed: ${this.options.theme.transitionSpeed};\n          \n          /* \u7f29\u7565\u56fe\u76f8\u5173\u53d8\u91cf */\n          --thumb-max-width: ${this.options.theme.thumbMaxWidth};\n          --thumb-gap: ${this.options.theme.thumbGap};\n          --thumb-padding: ${this.options.theme.thumbPadding};\n          --thumb-item-width: ${this.options.theme.thumbItemWidth};\n          --thumb-item-height: ${this.options.theme.thumbItemHeight};\n        }\n\n        .images-viewer-container {\n          position: fixed;\n          left: 0;\n          top: 0;\n          inset: 0;\n          width: 100%;\n          height: 100%;\n          z-index: 9999;\n          opacity: 0;\n          transition: opacity var(--transition-speed) ease;\n          touch-action: none;\n          -webkit-user-select: none;\n          user-select: none;\n          display: none;\n          background-color: var(--viewer-bg-color);\n          overflow: hidden;\n        }\n\n        .images-viewer-container::backdrop,\n        .images-viewer-container:fullscreen {\n          background-color: var(--viewer-bg-color);\n        }\n\n        /* \u56fe\u7247\u5bb9\u5668\u6837\u5f0f */\n        .images-viewer-image-container {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100%;\n          z-index: 2;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          overflow: hidden;\n        }\n\n        /* \u56fe\u7247\u6837\u5f0f */\n        .images-viewer-image {\n          position: relative;\n          object-fit: contain;\n          cursor: grab;\n          transition: transform 0.1s ease-out, opacity var(--transition-speed) ease;\n          transform-origin: center center;\n          opacity: 0;\n          box-shadow: 0 8px 25px var(--shadow-color);\n          border-radius: 4px;\n          user-select: none;\n          touch-action: none;\n        }\n\n        .images-viewer-image.loaded {\n          opacity: 1;\n        }\n\n        .images-viewer-image.dragging {\n          cursor: grabbing;\n          transition: none;\n        }\n\n        /* \u52a0\u8f7d\u6307\u793a\u5668 */\n        .images-viewer-loading {\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          transform: translate(-50%, -50%);\n          background-color: rgba(127, 127, 127, 0.7);\n          padding: 20px 30px;\n          border-radius: 10px;\n          display: flex;\n          align-items: center;\n          gap: 15px;\n          color: var(--text-color);\n          font-size: 18px;\n          opacity: 0;\n          pointer-events: none;\n          transition: opacity var(--transition-speed) ease;\n          z-index: 3;\n        }\n\n        .images-viewer-loading.active {\n          opacity: 1;\n        }\n\n        .images-viewer-loading-spinner {\n          width: 40px;\n          height: 40px;\n          border: 4px solid rgba(255, 255, 255, 0.2);\n          border-top-color: var(--active-color);\n          border-radius: 50%;\n          animation: imageViewerSpin 1s linear infinite;\n        }\n\n        @keyframes imageViewerSpin {\n          to {\n            transform: rotate(360deg);\n          }\n        }\n\n        /* \u53f3\u4e0a\u89d2\u5173\u95ed\u6309\u94ae\u6837\u5f0f */\n        .images-viewer-top-close-btn {\n          position: absolute;\n          top: var(--top-close-btn-top);\n          right: var(--top-close-btn-right);\n          width: var(--top-close-btn-size);\n          height: var(--top-close-btn-size);\n          border-radius: 50%;\n          background-color: var(--button-bg-color);\n          color: var(--text-color);\n          border: none;\n          font-size:  var(--top-close-btn-font-size);\n          cursor: pointer;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          transition: all var(--transition-speed);\n          z-index: 10;\n          box-shadow: 0 2px 8px var(--shadow-color);\n        }\n\n        .images-viewer-top-close-btn:hover {\n          background-color: var(--top-close-btn-hover-bg);\n          transform: scale(1.1);\n        }\n\n        /* \u7f29\u653e\u6307\u793a\u5668\u6837\u5f0f */\n        .images-viewer-zoom-indicator {\n          position: absolute;\n          top: var(--zoom-indicator-top);\n          left: var(--zoom-indicator-left);\n          color: var(--text-color);\n          background-color: var(--zoom-indicator-bg);\n          padding: var(--zoom-indicator-padding);\n          border-radius: var(--zoom-indicator-border-radius);\n          font-size: var(--zoom-indicator-font-size);\n          z-index: 10;\n          min-width: 60px;\n          text-align: center;\n          box-shadow: 0 2px 8px var(--shadow-color);\n          border: 1px solid rgba(255, 255, 255, 0.1);\n        }\n\n        /* \u4fe1\u606f\u680f\u6837\u5f0f */\n        .images-viewer-image-info {\n          position: absolute;\n          top: var(--info-top);\n          left: var(--info-left);\n          color: var(--text-color);\n          background-color: var(--info-bg-color);\n          padding: var(--info-padding);\n          border-radius: var(--info-border-radius);\n          font-size: var(--info-font-size);\n          z-index: 10;\n          max-width: calc(100% - 40px);\n          box-shadow: 0 4px 12px var(--shadow-color);\n          display: none;\n          border: 1px solid rgba(255, 255, 255, 0.1);\n        }\n\n        .images-viewer-image-info.visible {\n          display: block;\n          animation: imageViewerFadeIn 0.3s ease;\n        }\n\n        .images-viewer-image-info p {\n          margin: 4px 0;\n          line-height: 1.4;\n        }\n\n        .images-viewer-image-info .info-label {\n          color: #ddd;\n          margin-right: 5px;\n        }\n\n        .images-viewer-shortcuts-title {\n          margin-top: 10px;\n          padding-top: 10px;\n          border-top: 1px solid rgba(255, 255, 255, 0.1);\n          font-weight: bold;\n          margin-bottom: 5px;\n        }\n\n        @keyframes imageViewerFadeIn {\n          from {\n            opacity: 0;\n            transform: translateY(-10px);\n          }\n          to {\n            opacity: 1;\n            transform: translateY(0);\n          }\n        }\n\n        /* \u56fe\u7247\u8ba1\u6570\u5668 */\n        .images-viewer-image-counter {\n          position: absolute;\n          top: 20px;\n          left: 50%;\n          transform: translateX(-50%);\n          color: var(--text-color);\n          background-color: var(--info-bg-color);\n          padding: 6px 12px;\n          border-radius: 18px;\n          font-size: 14px;\n          z-index: 10;\n          box-shadow: 0 2px 8px var(--shadow-color);\n        }\n\n        /* \u56fe\u7247\u6807\u9898\u663e\u793a */\n        .images-viewer-image-title {\n          position: absolute;\n          top: 60px;\n          left: 50%;\n          transform: translateX(-50%);\n          color: var(--text-color);\n          padding: 4px 12px;\n          border-radius: 18px;\n          font-size: 12px;\n          z-index: 10;\n          max-width: 80%;\n          text-align: center;\n          white-space: nowrap;\n          overflow: hidden;\n          text-overflow: ellipsis;\n        }\n\n        /* \u5bfc\u822a\u6309\u94ae */\n        .images-viewer-nav-buttons {\n          position: absolute;\n          top: 50%;\n          left: 0;\n          right: 0;\n          transform: translateY(-50%);\n          display: flex;\n          justify-content: space-between;\n          pointer-events: none;\n          z-index: 5;\n          padding: 0 10px;\n        }\n\n        .images-viewer-nav-btn {\n          width: var(--nav-button-size);\n          height: var(--nav-button-size);\n          border-radius: var(--nav-button-border-radius);\n          background-color: var(--nav-button-bg-color);\n          color: var(--text-color);\n          border: none;\n          font-size: var(--nav-button-font-size);\n          cursor: pointer;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          transition: all 0.2s;\n          pointer-events: auto;\n          opacity: 0.9;\n          box-shadow: 0 2px 8px var(--shadow-color);\n          z-index: 6;\n        }\n\n        .images-viewer-nav-btn:hover {\n          background-color: var(--nav-button-hover-bg);\n          opacity: 1;\n          transform: scale(1.1);\n        }\n\n        .images-viewer-nav-btn:disabled {\n          opacity: 0.3;\n          cursor: not-allowed;\n          transform: none;\n        }\n\n        /* \u5de5\u5177\u680f\u6837\u5f0f */\n        .images-viewer-toolbar {\n          position: absolute;\n          bottom: var(--toolbar-bottom);\n          left: 50%;\n          transform: translateX(-50%);\n          background-color: var(--toolbar-bg-color);\n          padding: var(--toolbar-padding);\n          border-radius: var(--toolbar-border-radius);\n          display: flex;\n          gap: 2px;\n          z-index: 10;\n          box-shadow: 0 6px 25px var(--shadow-color);\n          max-width: calc(100% - 40px);\n          overflow-x: auto;\n          overflow-y: hidden;\n          border: 1px solid rgba(255, 255, 255, 0.1);\n          scrollbar-width: none;\n          -ms-overflow-style: none;\n          -webkit-overflow-scrolling: touch;\n        }\n\n        .images-viewer-toolbar::-webkit-scrollbar {\n          display: none;\n        }\n\n        .images-viewer-tool-btn {\n          width: var(--button-size);\n          height: var(--button-size);\n          background-color: transparent;\n          border: none;\n          color: var(--text-color);\n          cursor: pointer;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          font-size: var(--button-font-size);\n          transition: all 0.2s;\n          flex-shrink: 0;\n          position: relative;\n          border-radius: var(--button-border-radius);\n          margin: 0 2px;\n          z-index: 11;\n          line-height: 1;\n        }\n\n        .images-viewer-tool-btn:hover {\n          background-color: var(--button-hover-bg);\n          transform: translateY(-2px);\n          box-shadow: 0 4px 10px var(--shadow-color);\n        }\n\n        .images-viewer-tool-btn:active {\n          background-color: rgba(255, 255, 255, 0.3);\n          transform: translateY(0);\n        }\n\n        .images-viewer-tool-btn:disabled {\n          opacity: 0.5;\n          cursor: not-allowed;\n        }\n\n        /* \u7f29\u7565\u56fe\u5bb9\u5668 */\n        .images-viewer-thumbnails-container {\n          position: absolute;\n          bottom: 90px;\n          left: 50%;\n          max-width: var(--thumb-max-width);\n          transform: translateX(-50%);\n          padding: 10px var(--thumb-padding);\n          background-color: var(--toolbar-bg-color);\n          border-radius: 12px;\n          display: flex;\n          gap: var(--thumb-gap);\n          overflow-x: auto;\n          scrollbar-width: none;\n          -ms-overflow-style: none;\n          z-index: 10;\n          box-shadow: 0 3px 15px var(--shadow-color);\n          -webkit-overflow-scrolling: touch;\n          border: 1px solid rgba(255, 255, 255, 0.1);\n        }\n\n        .images-viewer-thumbnails-container::-webkit-scrollbar {\n          display: none;\n        }\n\n        .images-viewer-thumbnail-item {\n          width: var(--thumb-item-width);\n          height: var(--thumb-item-height);\n          border: 2px solid transparent;\n          border-radius: 6px;\n          overflow: hidden;\n          cursor: pointer;\n          flex-shrink: 0;\n          transition: all 0.2s;\n          z-index: 11;\n          position: relative;\n          opacity: 0.6;\n        }\n\n        .images-viewer-thumbnail-item img {\n          width: 100%;\n          height: 100%;\n          object-fit: cover;\n        }\n\n        .images-viewer-thumbnail-item.active {\n          border-color: var(--active-color);\n          transform: scale(1.2);\n          opacity: 1;\n          box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);\n        }\n\n        /* \u7f29\u7565\u56fe\u52a0\u8f7d\u72b6\u6001 */\n        .images-viewer-thumbnail-loading {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100%;\n          background-color: rgba(0, 0, 0, 0.3);\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          z-index: 1;\n        }\n\n        .loading-spinner {\n          width: 20px;\n          height: 20px;\n          border: 2px solid rgba(255, 255, 255, 0.3);\n          border-top: 2px solid var(--active-color);\n          border-radius: 50%;\n          animation: spin 1s linear infinite;\n        }\n\n        .loading-error {\n          color: #ff6b6b;\n          font-size: 10px;\n          text-align: center;\n          padding: 2px;\n        }\n\n        @keyframes spin {\n          0% { transform: rotate(0deg); }\n          100% { transform: rotate(360deg); }\n        }\n\n        .images-viewer-thumbnail-item:hover {\n          transform: scale(1.2);\n          opacity: 0.9;\n        }\n      `,document.head.appendChild(t)}createOptimizedElements(){this.container=document.createElement("div"),this.container.className="images-viewer-container",document.body.appendChild(this.container),this.imageContainer=document.createElement("div"),this.imageContainer.className="images-viewer-image-container",this.container.appendChild(this.imageContainer),this.image=document.createElement("img"),this.image.className="images-viewer-image",this.image.alt="Preview image",this.image.crossOrigin="anonymous",this.imageContainer.appendChild(this.image),this.loading=document.createElement("div"),this.loading.className="images-viewer-loading",this.loading.innerHTML=`\n        <div class="images-viewer-loading-spinner"></div>\n        <div>${this.options.i18n.buttons.loading}</div>\n      `,this.imageContainer.appendChild(this.loading),this.options.buttons.topClose&&(this.topCloseBtn=document.createElement("button"),this.topCloseBtn.className="images-viewer-top-close-btn",this.topCloseBtn.textContent="\xd7",this.topCloseBtn.title=this.options.i18n.buttons.close,this.container.appendChild(this.topCloseBtn)),this.zoomIndicator=document.createElement("div"),this.zoomIndicator.className="images-viewer-zoom-indicator",this.zoomIndicator.textContent="100%",this.container.appendChild(this.zoomIndicator),this.options.buttons.info&&(this.imageInfoPanel=document.createElement("div"),this.imageInfoPanel.className="images-viewer-image-info "+(this.imageInfoVisible?"visible":""),this.container.appendChild(this.imageInfoPanel)),this.images.length>1&&(this.counter=document.createElement("div"),this.counter.className="images-viewer-image-counter",this.container.appendChild(this.counter)),this.imageTitle=document.createElement("div"),this.imageTitle.className="images-viewer-image-title",this.container.appendChild(this.imageTitle),this.images.length>1&&(this.options.buttons.prev||this.options.buttons.next)&&this.createNavButtons(),this.images.length>1&&this.options.buttons.thumbnails&&this.createThumbnails(),this.createToolbar()}createNavButtons(){const t=document.createElement("div");t.className="images-viewer-nav-buttons",this.addEvent(t,"click",t=>{t.stopPropagation()}),this.options.buttons.prev&&(this.prevBtn=document.createElement("button"),this.prevBtn.className="images-viewer-nav-btn images-viewer-prev-btn",this.prevBtn.textContent="\u2190",this.prevBtn.title=this.options.i18n.buttons.prev,this.addEvent(this.prevBtn,"click",t=>{t.stopPropagation(),this.prev()}),t.appendChild(this.prevBtn)),this.options.buttons.next&&(this.nextBtn=document.createElement("button"),this.nextBtn.className="images-viewer-nav-btn images-viewer-next-btn",this.nextBtn.textContent="\u2192",this.nextBtn.title=this.options.i18n.buttons.next,this.addEvent(this.nextBtn,"click",t=>{t.stopPropagation(),this.next()}),t.appendChild(this.nextBtn)),this.container.appendChild(t)}createToolbar(){const t=document.createElement("div");t.className="images-viewer-toolbar",this.addEvent(t,"click",t=>{t.stopPropagation()}),this.addEvent(t,"wheel",i=>{i.preventDefault(),i.stopPropagation(),t.scrollLeft+=i.deltaY}),this.images.length>1&&(this.options.buttons.prev&&(this.toolbarPrevBtn=this.createToolButton("\u2190",()=>this.prev()),t.appendChild(this.toolbarPrevBtn)),this.options.buttons.next&&(this.toolbarNextBtn=this.createToolButton("\u2192",()=>this.next()),t.appendChild(this.toolbarNextBtn))),this.options.buttons.zoomOut&&(this.zoomOutBtn=this.createToolButton("\u2212",()=>this.zoom(-.1)),t.appendChild(this.zoomOutBtn)),this.options.buttons.zoomIn&&(this.zoomInBtn=this.createToolButton("+",()=>this.zoom(.1)),t.appendChild(this.zoomInBtn)),this.options.buttons.rotateLeft&&(this.rotateLeftBtn=this.createToolButton("\u21ba",()=>this.rotate(-90)),t.appendChild(this.rotateLeftBtn)),this.options.buttons.rotateRight&&(this.rotateRightBtn=this.createToolButton("\u21bb",()=>this.rotate(90)),t.appendChild(this.rotateRightBtn)),this.options.buttons.reset&&(this.resetBtn=this.createToolButton("\u27f3",()=>this.reset()),t.appendChild(this.resetBtn)),this.options.buttons.originalSize&&(this.originalSizeBtn=this.createToolButton("1:1",()=>this.showOriginalSize()),t.appendChild(this.originalSizeBtn)),this.options.buttons.info&&(this.infoBtn=this.createToolButton("\u24d8",()=>this.toggleImageInfo()),t.appendChild(this.infoBtn)),this.options.buttons.download&&(this.downloadBtn=this.createToolButton("\u21a1",()=>this.downloadImage()),t.appendChild(this.downloadBtn)),this.options.buttons.fullscreen&&(this.fullscreenBtn=this.createToolButton("\u26f6",()=>this.toggleFullscreen()),t.appendChild(this.fullscreenBtn)),this.options.buttons.close&&(this.closeBtn=this.createToolButton("\xd7",()=>this.close()),t.appendChild(this.closeBtn)),this.options.customButtons&&this.options.customButtons.forEach(i=>{t.appendChild(this.createToolButton(i[0],i[1]))}),this.container.appendChild(t)}createToolButton(t,i){const s=document.createElement("button");s.className="images-viewer-tool-btn";const n=document.createElement("span");return n.textContent=t,s.appendChild(n),this.addEvent(s,"click",t=>{t.stopPropagation(),i()}),s}createThumbnails(){const t=document.createElement("div");t.className="images-viewer-thumbnails-container",this.addEvent(t,"click",t=>{t.stopPropagation()}),this.addEvent(t,"wheel",i=>{i.preventDefault(),i.stopPropagation(),t.scrollLeft+=i.deltaY});const i=parseInt(this.options.theme.thumbItemWidth),s=parseInt(this.options.theme.thumbGap),n=parseInt(this.options.theme.thumbPadding),e=this.options.preloadCount,o=window.innerWidth-2*n,h=Math.ceil(o/(i+s)),a=Math.min(h+e,this.images.length);for(let i=0;i<a;i++)this.createThumbnailItem(t,i);let r=a;this.addEvent(t,"scroll",()=>{const i=t.scrollLeft,s=t.clientWidth;if(i>t.scrollWidth-s-s&&r<this.images.length){const i=Math.min(h,this.images.length-r);for(let s=r;s<r+i;s++)this.createThumbnailItem(t,s);r+=i}}),this.container.appendChild(t),this.thumbContainer=t}createThumbnailItem(t,i){const s=this.getThumbnailUrl(i),n=this.getImageUrl(i),e=document.createElement("div");e.className="images-viewer-thumbnail-item "+(i===this.currentIndex?"active":""),e.dataset.index=i;const o=new Image;o.crossOrigin="anonymous";const h=document.createElement("div");h.className="images-viewer-thumbnail-loading",h.innerHTML='<div class="loading-spinner"></div>',e.appendChild(h),this.loadedThumbnails.has(s)?(o.src=this.loadedThumbnails.get(s).src,h.remove()):this.loadingThumbnails.has(s)?(h.style.display="flex",o.onload=()=>{h.remove(),o.onload=null,o.onerror=null},o.onerror=()=>{h.remove(),o.onload=null,o.onerror=null},o.src=s):this.loadedImages.has(n)?(o.src=this.loadedImages.get(n).src,h.remove()):(this.loadingThumbnails.set(s,o),h.style.display="flex",o.onload=()=>{this.loadedThumbnails.set(s,o),this.loadingThumbnails.delete(s),h.remove(),o.onload=null,o.onerror=null},o.onerror=()=>{this.loadingThumbnails.delete(s),h.remove(),o.onload=null,o.onerror=null},o.src=s),e.appendChild(o),this.addEvent(e,"click",t=>{t.stopPropagation();const i=parseInt(e.dataset.index);i!==this.currentIndex&&(this.currentIndex=i,this.loadCurrentImage(),this.updateThumbnails())}),t.appendChild(e)}updateThumbnailDisplay(t){if(!this.thumbContainer)return;const i=this.thumbContainer.querySelector(`[data-index="${t}"]`);if(i){const s=this.getThumbnailUrl(t),n=i.querySelector("img");if(n&&this.loadedThumbnails.has(s)){const t=this.loadedThumbnails.get(s);n.src=t.src;const e=i.querySelector(".images-viewer-thumbnail-loading");e&&e.remove()}}}updateImageTransform(){const t=`\n        translate(${this.translateX}px, ${this.translateY}px)\n        scale(${this.scale})\n        rotate(${this.rotation}deg)\n      `;this.image.style.transform=t}fitImageToScreen(t,i){this.scale=1,this.translateX=0,this.translateY=0;const s=this.imageContainer.clientWidth,n=this.imageContainer.clientHeight,e=this.rotation%360;let o=t,h=i;if(90!==e&&270!==e||(o=i,h=t),o>s||h>n){const t=s/o,i=n/h;this.scale=Math.min(t,i)}this.scale=Math.max(.1,this.scale),this.updateImageTransform(),this.updateZoomIndicator()}parseImageOptions(t){this.images=[],this.thumbnails=[],"string"==typeof t?this.images=[t]:Array.isArray(t)?this.images=t.filter(t=>"string"==typeof t&&""!==t.trim()):"object"==typeof t&&t.images&&Array.isArray(t.images)&&(this.images=t.images.map(t=>"string"==typeof t?t:"object"==typeof t&&t.url?(t.thumbnail&&this.thumbnails.push(t.thumbnail),t):null).filter(Boolean))}getImageUrl(t){const i=this.images[t];if("string"==typeof i)return i;if("object"==typeof i){if("function"==typeof i.url)return i.url(i,t);if(i.url)return i.url}return""}getThumbnailUrl(t){if(this.thumbnails[t]){const i=this.thumbnails[t];return"function"==typeof i?i(this.images[t],t):i}return this.getImageUrl(t)}getImageTitle(t){const i=this.images[t];if("object"==typeof i){if("function"==typeof i.title)return i.title(i,t);if(i.title)return i.title}return""}preloadImages(){const t=this.options.preloadCount;if(t<=0)return;const i=Math.max(0,this.currentIndex-t),s=Math.min(this.images.length-1,this.currentIndex+t);for(let t=i;t<=s;t++)this.loadImageAtIndex(t)}addToCache(t,i){this.loadedImages.set(t,i);const s=this.options.maxCacheSize;if(s>0&&this.loadedImages.size>s){const t=this.loadedImages.keys().next().value;this.loadedImages.delete(t)}}loadImageAtIndex(t){const i=this.getImageUrl(t);if(!i||this.loadedImages.has(i)||this.loadingImages.has(i))return;const s=new Image;s.onload=()=>{this.addToCache(i,s),this.loadingImages.delete(i),this.imageMetadata[t]={name:this.extractFileName(i),width:s.naturalWidth||s.width,height:s.naturalHeight||s.height},s.onload=null,s.onerror=null},s.onerror=()=>{this.loadingImages.delete(i),s.onload=null,s.onerror=null},s.crossOrigin="anonymous",s.src=i,this.loadingImages.set(i,s)}extractFileName(t){try{const i=new URL(t).pathname.split("/");let s=i[i.length-1];const n=s.indexOf("?");return n>-1&&(s=s.substring(0,n)),s||"unknown-image"}catch(t){return"unknown-image"}}loadCurrentImage(t){if(void 0!==t&&(this.currentIndex=t),this.hasPreviousState=!1,this.isToggledState=!1,this.images.length>1&&this.counter){let t=null;this.options.onCounter&&(t=this.options.onCounter({image:this.images[this.currentIndex],index:this.currentIndex,currentPage:this.currentIndex+1,totalPages:this.images.length,scale:this.scale,rotation:this.rotation})),t?this.counter.innerHTML=t:this.counter.textContent=`${this.currentIndex+1} / ${this.images.length}`}const i=this.getImageTitle(this.currentIndex);this.imageTitle&&i?(this.imageTitle.innerHTML=i,this.imageTitle.style.display="block"):this.imageTitle.style.display="none",this.updateNavButtons(),this.updateThumbnails(),this.scale=1,this.rotation=0,this.translateX=0,this.translateY=0;const s=this.getImageUrl(this.currentIndex);this.loadedImages.has(s)||this.loadingImages.has(s)||this.loadImageAtIndex(this.currentIndex),this.preloadAdjacentImages(),this.isImageLoaded()}preloadAdjacentImages(){const t=Math.max(0,this.currentIndex-2),i=Math.min(this.images.length-1,this.currentIndex+2);for(let s=t;s<=i;s++)this.loadThumbnailAtIndex(s);for(let s=t;s<=i;s++)this.loadImageAtIndex(s)}loadThumbnailAtIndex(t){const i=this.getThumbnailUrl(t);if(!i||this.loadedThumbnails.has(i)||this.loadingThumbnails.has(i))return;const s=new Image;s.onload=()=>{this.loadedThumbnails.set(i,s),this.loadingThumbnails.delete(i),this.updateThumbnailDisplay(t),s.onload=null,s.onerror=null},s.onerror=()=>{this.loadingThumbnails.delete(i),s.onload=null,s.onerror=null},s.crossOrigin="anonymous",s.src=i,this.loadingThumbnails.set(i,s)}isImageLoaded(){const t=this.getImageUrl(this.currentIndex),i=this.loadedImages.has(t),s=this.loadingImages.has(t);if(this.showLoading(),this.image.classList.remove("loaded"),i){this.image.src="";const i=this.loadedImages.get(t),s=document.createElement("canvas"),n=s.getContext("2d");s.width=i.naturalWidth||i.width,s.height=i.naturalHeight||i.height,n.drawImage(i,0,0),s.toBlob(t=>{if(t){const i=URL.createObjectURL(t);this.image.src=i,this.t&&(URL.revokeObjectURL(this.t),this.t=null),this.t=i}});const e=this.imageMetadata[this.currentIndex];return e&&(this.fitImageToScreen(e.width,e.height),this.updateImageInfo()),this.image.classList.add("loaded"),void this.hideLoading()}if(s){const i=()=>{this.loadedImages.has(t)?this.isImageLoaded():this.loadingImages.has(t)?setTimeout(i,100):this.hideLoading()};return void setTimeout(i,100)}const n=new Image;n.onload=()=>{this.addToCache(t,n),this.loadingImages.delete(t),this.imageMetadata[this.currentIndex]={name:this.extractFileName(t),width:n.naturalWidth||n.width,height:n.naturalHeight||n.height},this.isImageLoaded()},n.onerror=()=>{this.loadingImages.delete(t),this.hideLoading()},n.crossOrigin="anonymous",n.src=t,this.loadingImages.set(t,n)}updateZoomIndicator(){const t=Math.round(100*this.scale);if(this.options.onZoomIndicator){const i=this.options.onZoomIndicator({image:this.images[this.currentIndex],index:this.currentIndex,scale:this.scale,percentage:t,rotation:this.rotation});if(i)return void(this.zoomIndicator.innerHTML=i)}this.zoomIndicator.textContent=`${t}%`}updateImageInfo(){if(!this.options.buttons.info||!this.imageInfoPanel)return;const t=this.imageMetadata[this.currentIndex];if(!t)return;const i=this.options.i18n;let s="";this.options.onInfo&&(s=this.options.onInfo({image:this.images[this.currentIndex],index:this.currentIndex,metadata:t,scale:this.scale,rotation:this.rotation}),s)||(this.options.imageInfo.showName&&(s+=`<p><span class="info-label">${i.info.name}</span> ${t.name}</p>`),this.options.imageInfo.showDimensions&&(s+=`<p><span class="info-label">${i.info.dimensions}</span> ${t.width} \xd7 ${t.height}</p>`),s+=`\n          <div class="images-viewer-shortcuts-title">${i.info.shortcuts}</div>\n          <p><span class="info-label">${i.info.zoomIn}</span> \u2191 +</p>\n          <p><span class="info-label">${i.info.zoomOut}</span> \u2193 -</p>\n          <p><span class="info-label">${i.info.prev}</span> \u2190</p>\n          <p><span class="info-label">${i.info.next}</span> \u2192</p>\n          <p><span class="info-label">${i.info.reset}</span> 0</p>\n          <p><span class="info-label">${i.info.fullscreen}</span> F</p>\n          <p><span class="info-label">${i.info.info}</span> I</p>\n          <p><span class="info-label">${i.info.close}</span> ESC</p>\n        `),this.imageInfoPanel.innerHTML=s}toggleImageInfo(){this.options.buttons.info&&this.imageInfoPanel&&(this.imageInfoVisible=!this.imageInfoVisible,this.imageInfoVisible?this.imageInfoPanel.classList.add("visible"):this.imageInfoPanel.classList.remove("visible"))}updateNavButtons(){if(this.images.length<=1)return;const t=!!this.options.loop||this.currentIndex>0,i=!!this.options.loop||this.currentIndex<this.images.length-1;this.prevBtn&&(this.prevBtn.disabled=!t),this.nextBtn&&(this.nextBtn.disabled=!i),this.toolbarPrevBtn&&(this.toolbarPrevBtn.disabled=!t),this.toolbarNextBtn&&(this.toolbarNextBtn.disabled=!i)}updateThumbnails(){if(this.images.length<=1)return;document.querySelectorAll(".images-viewer-thumbnail-item").forEach(t=>{t.classList.remove("active")});const t=document.querySelector(`.images-viewer-thumbnail-item[data-index="${this.currentIndex}"]`);t&&(t.classList.add("active"),t.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"}))}showLoading(){this.loading&&this.loading.classList.add("active")}hideLoading(){this.loading&&this.loading.classList.remove("active")}prev(){if(this.images.length<=1)return;let t=this.currentIndex-1;t<0&&(t=this.options.loop?this.images.length-1:0),t!==this.currentIndex&&(this.currentIndex=t,this.loadCurrentImage()),this.options.onChange&&this.options.onChange(this.currentIndex,"prev")}next(){if(this.images.length<=1)return;let t=this.currentIndex+1;t>=this.images.length&&(t=this.options.loop?0:this.images.length-1),t!==this.currentIndex&&(this.currentIndex=t,this.loadCurrentImage()),this.options.onChange&&this.options.onChange(this.currentIndex,"next")}bindEvents(){this.topCloseBtn&&this.addEvent(this.topCloseBtn,"click",()=>this.close()),this.options.closeOnMaskClick&&this.addEvent(this.imageContainer,"click",t=>{t.target==this.imageContainer&&this.close()}),this.addEvent(document,"keydown",t=>this.handleKeydown(t));const t=function(t){let i,s=0;return function(...n){const e=Date.now(),o=e-s;o>300?(t.apply(this,n),s=e):(clearTimeout(i),i=setTimeout(()=>{t.apply(this,n),s=e},300-o))}}(()=>{this.handleResize()});this.addEvent(window,"resize",t),this.bindDragEvents(),this.bindTouchEvents()}addEvent(t,i,s,n){t.addEventListener(i,s,n);const e=`${i}-${Date.now()}-${Math.random()}`;this.eventListeners.set(e,{element:t,event:i,handler:s})}removeAllEvents(){this.eventListeners.forEach(({element:t,event:i,handler:s})=>{t.removeEventListener(i,s)}),this.eventListeners.clear()}rotatePoint(t,i,s){const n=s*Math.PI,e=Math.cos(n),o=Math.sin(n);return{x:t*e-i*o,y:t*o+i*e}}bindDragEvents(){this.addEvent(this.image,"mousedown",t=>{0===t.button&&(this.isDragging=!0,this.image.classList.add("dragging"),this.startX=t.clientX,this.startY=t.clientY,this.startTranslateX=this.translateX,this.startTranslateY=this.translateY,t.preventDefault())}),this.addEvent(document,"mousemove",t=>{if(!this.isDragging)return;const i=t.clientX-this.startX,s=t.clientY-this.startY,n=this.rotatePoint(i,s,-this.rotation);if(this.translateX=this.startTranslateX+n.x,this.translateY=this.startTranslateY+n.y,this.updateImageTransform(),this.options.onDrag){const t=this.images[this.currentIndex];this.options.onDrag({image:t,index:this.currentIndex,translateX:this.translateX,translateY:this.translateY})}t.preventDefault()}),this.addEvent(document,"mouseup",()=>{this.isDragging&&(this.isDragging=!1,this.image.classList.remove("dragging"))}),this.addEvent(document,"mouseleave",()=>{this.isDragging&&(this.isDragging=!1,this.image.classList.remove("dragging"))}),this.addEvent(this.imageContainer,"wheel",t=>{t.preventDefault();const i=this.imageContainer.getBoundingClientRect(),s=t.clientX-i.left,n=t.clientY-i.top,e=t.deltaY>0?-.05:.05;this.zoomAtPoint(e,s,n)}),this.addEvent(this.image,"dblclick",t=>{t.preventDefault();const i=this.imageContainer.getBoundingClientRect(),s=t.clientX-i.left,n=t.clientY-i.top;if(Math.abs(this.scale-1)<.01)if(this.hasPreviousState)this.scale=this.lastScale,this.translateX=this.lastTranslateX,this.translateY=this.lastTranslateY,this.hasPreviousState=!1;else{this.lastScale=this.scale,this.lastTranslateX=this.translateX,this.lastTranslateY=this.translateY,this.hasPreviousState=!0;const t=1.5,i=t/this.scale,e=this.imageContainer.clientWidth,o=this.imageContainer.clientHeight;this.translateX=this.translateX*i+s-e/2-i*(s-e/2),this.translateY=this.translateY*i+n-o/2-i*(n-o/2),this.scale=t}else{this.lastScale=this.scale,this.lastTranslateX=this.translateX,this.lastTranslateY=this.translateY,this.hasPreviousState=!0;const t=1,i=t/this.scale,e=this.imageContainer.clientWidth,o=this.imageContainer.clientHeight;this.translateX=this.translateX*i+s-e/2-i*(s-e/2),this.translateY=this.translateY*i+n-o/2-i*(n-o/2),this.scale=t}this.updateImageTransform(),this.updateZoomIndicator()})}bindTouchEvents(){this.addEvent(this.image,"touchstart",t=>{if(this.touchState.lastTouchTime=Date.now(),1===t.touches.length)this.touchState.isPinching||(this.touchState.isDragging=!0,this.touchState.startX=t.touches[0].clientX,this.touchState.startY=t.touches[0].clientY,this.touchState.startTranslateX=this.translateX,this.touchState.startTranslateY=this.translateY,this.image.classList.add("dragging"));else if(2===t.touches.length){this.touchState.isPinching=!0,this.touchState.isDragging=!1,this.image.classList.remove("dragging");const i=t.touches[0],s=t.touches[1];this.touchState.initialDistance=this.getDistance(i,s),this.touchState.initialScale=this.scale,this.touchState.initialTranslateX=this.translateX,this.touchState.initialTranslateY=this.translateY,this.touchState.centerX=(i.clientX+s.clientX)/2,this.touchState.centerY=(i.clientY+s.clientY)/2;const n=this.imageContainer.getBoundingClientRect(),e=this.touchState.centerX-n.left,o=this.touchState.centerY-n.top;this.calculateRelativeCenter(e,o),this.touchState.movementCount=0,this.touchState.scaleRatio=1}t.preventDefault()}),this.addEvent(this.image,"touchmove",t=>{if(!(Date.now()-this.touchState.lastTouchTime<16)){if(this.touchState.lastTouchTime=Date.now(),1===t.touches.length&&this.touchState.isDragging&&!this.touchState.isPinching){const i=t.touches[0].clientX-this.touchState.startX,s=t.touches[0].clientY-this.touchState.startY,n=this.rotatePoint(i,s,-this.rotation);if(this.touchState.movementCount++,(this.touchState.movementCount>this.touchState.stabilizationThreshold||Math.abs(i)>5||Math.abs(s)>5)&&(this.translateX=this.touchState.startTranslateX+n.x,this.translateY=this.touchState.startTranslateY+n.y,this.updateImageTransform(),this.options.drag)){const t=this.images[this.currentIndex];this.options.drag({image:t,index:this.currentIndex,translateX:this.translateX,translateY:this.translateY})}}else if(2===t.touches.length&&this.touchState.isPinching){const i=t.touches[0],s=t.touches[1],n=this.getDistance(i,s);this.touchState.scaleRatio=n/this.touchState.initialDistance;const e=this.touchState.initialScale*this.touchState.scaleRatio,o=this.options.minScale,h=this.options.maxScale,a=Math.max(o,Math.min(h,e));if(Math.abs(a-this.scale)>this.touchState.minScaleChange){const t=a/this.touchState.initialScale,i=this.imageContainer.getBoundingClientRect(),s=i.width,n=i.height;if(this.translateX=this.touchState.initialTranslateX*t+this.touchState.centerX-s/2-t*(this.touchState.centerX-s/2),this.translateY=this.touchState.initialTranslateY*t+this.touchState.centerY-n/2-t*(this.touchState.centerY-n/2),this.scale=a,this.updateImageTransform(),this.updateZoomIndicator(),this.options.onZoom){const t=this.images[this.currentIndex];this.options.onZoom({image:t,index:this.currentIndex,scale:this.scale,oldScale:this.touchState.initialScale})}}}t.preventDefault()}}),this.addEvent(this.image,"touchend",t=>{0===t.touches.length?(this.touchState.isDragging=!1,this.touchState.isPinching=!1,this.image.classList.remove("dragging")):1===t.touches.length&&this.touchState.isPinching&&(this.touchState.isPinching=!1,this.touchState.isDragging=!0,this.touchState.startX=t.touches[0].clientX,this.touchState.startY=t.touches[0].clientY,this.touchState.startTranslateX=this.translateX,this.touchState.startTranslateY=this.translateY,this.image.classList.add("dragging")),t.preventDefault()}),this.addEvent(this.image,"touchcancel",()=>{this.touchState.isDragging=!1,this.touchState.isPinching=!1,this.image.classList.remove("dragging")})}getDistance(t,i){const s=t.clientX-i.clientX,n=t.clientY-i.clientY;return Math.sqrt(s*s+n*n)}calculateRelativeCenter(t,i){if(!this.imageMetadata[this.currentIndex])return;const s=this.imageContainer.clientWidth,n=this.imageContainer.clientHeight/2,e=t-s/2-this.translateX,o=i-n-this.translateY;this.touchState.relativeCenterX=e/this.scale,this.touchState.relativeCenterY=o/this.scale}zoomAtPoint(t,i,s){const n=this.scale,e=this.options.maxScale,o=this.options.minScale,h=Math.max(o,Math.min(e,this.scale+t));if(h===this.scale)return;const a=h/n,r=this.imageContainer.clientWidth,l=this.imageContainer.clientHeight;if(this.translateX=this.translateX*a+i-r/2-a*(i-r/2),this.translateY=this.translateY*a+s-l/2-a*(s-l/2),this.scale=h,this.updateImageTransform(),this.updateZoomIndicator(),this.options.zoom){const t=this.images[this.currentIndex];this.options.zoom({image:t,index:this.currentIndex,scale:this.scale,oldScale:n})}}zoom(t){const i=this.imageContainer.clientWidth,s=this.imageContainer.clientHeight;this.zoomAtPoint(t,i/2,s/2)}rotate(t){const i=this.rotation,s=i+t;if(i===s)return;const n=this.imageContainer.getBoundingClientRect(),e=n.width/2,o=n.height/2,h=e+this.translateX,a=o+this.translateY;this.rotation=s,this.translateX=0,this.translateY=0;const r=this.imageMetadata[this.currentIndex];if(r){const t=this.calculateBoundingBox(r.width,r.height,s),i=t.width*this.scale,n=t.height*this.scale;this.translateX=(h-e)*(i/(i-this.translateX)),this.translateY=(a-o)*(n/(n-this.translateY))}if(this.updateImageTransform(),this.updateZoomIndicator(),this.options.onRotate){const t=this.images[this.currentIndex];this.options.onRotate({image:t,index:this.currentIndex,rotation:this.rotation,oldRotation:i})}}calculateBoundingBox(t,i,s){const n=s*Math.PI/180,e=Math.abs(Math.cos(n)),o=Math.abs(Math.sin(n));return{width:t*e+i*o,height:t*o+i*e}}reset(){this.rotation=0;const t=this.imageMetadata[this.currentIndex];t&&this.fitImageToScreen(t.width,t.height)}showOriginalSize(){this.rotation=0,this.scale=1,this.translateX=0,this.translateY=0,this.updateImageTransform(),this.updateZoomIndicator()}downloadImage(){const t=this.getImageUrl(this.currentIndex),i=this.imageMetadata[this.currentIndex];if(this.loadedImages.has(t)){const s=this.loadedImages.get(t);this.downloadFromImage(s,i)}}downloadFromImage(t,i){try{const s=document.createElement("canvas");s.width=t.naturalWidth||t.width,s.height=t.naturalHeight||t.height,s.getContext("2d").drawImage(t,0,0);const n=s.toDataURL("image/jpeg");this.downloadedImage(n,i)}catch(t){const s=this.getImageUrl(this.currentIndex);this.downloadedImage(s,i)}}downloadedImage(t,i){try{const s=document.createElement("a");s.href=t,s.download=i?i.name:"image.jpg",document.body.appendChild(s),s.click(),document.body.removeChild(s)}catch(t){}}toggleFullscreen(){document.fullscreenElement?document.exitFullscreen&&(document.exitFullscreen(),this.isFullscreen=!1):(this.container.requestFullscreen().catch(t=>{}),this.isFullscreen=!0)}handleKeydown(t){if("block"===this.container.style.display){switch(t.key){case"Escape":this.close();break;case"ArrowLeft":this.prev();break;case"ArrowRight":this.next();break;case"ArrowUp":case"+":case"=":this.zoom(.1);break;case"ArrowDown":case"-":this.zoom(-.1);break;case"0":this.reset();break;case"f":case"F":this.toggleFullscreen();break;case"i":case"I":this.toggleImageInfo()}t.preventDefault()}}handleResize(){const t=this.imageMetadata[this.currentIndex];if(!t)return;const i=this.imageContainer.clientWidth,s=this.imageContainer.clientHeight,n=this.rotation%360;let e=t.width,o=t.height;90!==n&&270!==n||(e=t.height,o=t.width);const h=Math.min(i/e,s/o),a=e*this.scale,r=o*this.scale,l=a>i||r>s;let c=this.scale;c=l?Math.max(.1,h):h>=1?1:h,Math.abs(c-this.scale)>.01&&(this.scale=c,this.translateX=0,this.translateY=0,this.updateImageTransform(),this.updateZoomIndicator()),this.updateThumbnailsOnResize()}updateThumbnailsOnResize(){if(!this.thumbContainer)return;const t=parseInt(this.options.theme.thumbItemWidth),i=parseInt(this.options.theme.thumbGap),s=parseInt(this.options.theme.thumbPadding),n=this.options.preloadCount,e=window.innerWidth-2*s,o=Math.ceil(e/(t+i)),h=Math.min(o+n,this.images.length),a=this.thumbContainer.querySelectorAll(".images-viewer-thumbnail-item").length;if(a<h){const t=h-a;for(let i=a;i<a+t;i++)i<this.images.length&&this.createThumbnailItem(this.thumbContainer,i)}}onShow(){this.container.style.display="block",setTimeout(()=>{this.container.style.opacity="1",this.options.onShow&&this.options.onShow(this.container)},10)}close(){this.removeAllEvents(),this.cleanup(),this.container.style.opacity="0",setTimeout(()=>{this.container.style.display="none";const t=document.getElementById("images-viewer-styles");t&&t.remove(),this.container&&this.container.remove(),this.options.onClose&&this.options.onClose()},300)}cleanup(){for(const[t,i]of this.loadingImages.entries())i.onload=null,i.onerror=null,i.src="";this.loadedImages.clear(),this.loadingImages.clear(),this.imageMetadata=[],this.t&&(URL.revokeObjectURL(this.t),this.t=null)}}export{t as default};
+class t{constructor(t){if(this.defaultOptions={initialIndex:0,closeOnMaskClick:!1,loop:!0,preloadCount:3,maxCacheSize:30,minScale:.1,maxScale:5,retryOnError:!1,props:{url:"url",title:"title",thumbnail:"thumbnail"},buttons:{zoomIn:!0,zoomOut:!0,rotateLeft:!0,rotateRight:!0,reset:!0,download:!0,fullscreen:!0,prev:!0,next:!0,close:!0,topClose:!0,thumbnails:!0,info:!0,originalSize:!0},imageInfo:{visible:!1,showName:!0,showDimensions:!0},i18n:{info:{name:"\u540d\u79f0:",dimensions:"\u5c3a\u5bf8:",shortcuts:"\u5feb\u6377\u952e",zoomIn:"\u653e\u5927:",zoomOut:"\u7f29\u5c0f:",prev:"\u4e0a\u4e00\u5f20:",next:"\u4e0b\u4e00\u5f20:",reset:"\u91cd\u7f6e:",fullscreen:"\u5168\u5c4f:",info:"\u4fe1\u606f:",close:"\u5173\u95ed:"},buttons:{prev:"\u4e0a\u4e00\u5f20 (\u2190)",next:"\u4e0b\u4e00\u5f20 (\u2192)",close:"\u5173\u95ed (Esc)",loading:"\u52a0\u8f7d\u4e2d..."}},theme:{viewerBgColor:"rgba(0, 0, 0, 0.4)",toolbarBgColor:"rgba(150, 150, 150, 0.7)",toolbarBorderRadius:"30px",toolbarPadding:"8px 12px",toolbarBottom:"20px",buttonBgColor:"rgba(150, 150, 150, 0.7)",buttonHoverBg:"rgba(200, 200, 200, 0.4)",buttonSize:"40px",buttonFontSize:"20px",buttonBorderRadius:"50%",navButtonBgColor:"rgba(150, 150, 150, 0.7)",navButtonHoverBg:"rgba(200, 200, 200, 0.4)",navButtonSize:"50px",navButtonFontSize:"20px",navButtonBorderRadius:"50%",topCloseBtnSize:"50px",topCloseBtnTop:"20px",topCloseBtnRight:"20px",topCloseBtnFontSize:"24px",topCloseBtnBgColor:"rgba(150, 150, 150, 0.7)",topCloseBtnHoverBg:"rgba(200, 200, 200, 0.4)",infoBgColor:"rgba(150, 150, 150, 0.7)",infoBorderRadius:"12px",infoPadding:"10px 15px",infoFontSize:"13px",infoTop:"70px",infoLeft:"20px",zoomIndicatorBg:"rgba(150, 150, 150, 0.7)",zoomIndicatorBorderRadius:"18px",zoomIndicatorPadding:"6px 12px",zoomIndicatorFontSize:"14px",zoomIndicatorTop:"20px",zoomIndicatorLeft:"20px",activeColor:"rgba(100, 150, 255, 0.8)",textColor:"rgba(255, 255, 255, 0.9)",shadowColor:"rgba(0, 0, 0, 0.2)",transitionSpeed:"0.3s",thumbItemWidth:"70px",thumbItemHeight:"45px",thumbGap:"10px",thumbPadding:"15px",thumbMaxWidth:"90%"}},this.options={...this.defaultOptions,...t,buttons:{...this.defaultOptions.buttons,...t?.buttons||{}},imageInfo:{...this.defaultOptions.imageInfo,...t?.imageInfo||{}},props:{...this.defaultOptions.props,...t?.props||{}},i18n:{...this.defaultOptions.i18n,...t?.i18n||{},info:{...this.defaultOptions.i18n.info,...t?.i18n?.info||{}},buttons:{...this.defaultOptions.i18n.buttons,...t?.i18n?.buttons||{}}},theme:{...this.defaultOptions.theme,...t?.theme||{}}},this.parseImageOptions(t),0===this.images.length)throw new Error("No images URL");const i=Math.max(0,Math.min(this.options.initialIndex||0,this.images.length-1));this.currentIndex=i,this.scale=1,this.rotation=0,this.translateX=0,this.translateY=0,this.isDragging=!1,this.startX=0,this.startY=0,this.startTranslateX=0,this.startTranslateY=0,this.isFullscreen=!1,this.imageInfoVisible=this.options.imageInfo.visible,this.imageMetadata=[],this.loadedImages=new Map,this.loadingImages=new Map,this.failedImages=new Set,this.loadedThumbnails=new Map,this.loadingThumbnails=new Map,this.failedThumbnails=new Set,this.lastTapTime=0,this.lastScale=1,this.lastTranslateX=0,this.lastTranslateY=0,this.hasPreviousState=!1,this.isToggledState=!1,this.touchState={isDragging:!1,isPinching:!1,initialDistance:null,initialScale:null,initialTranslateX:null,initialTranslateY:null,centerX:null,centerY:null,relativeCenterX:null,relativeCenterY:null,lastTouchTime:0,startX:0,startY:0,startTranslateX:0,startTranslateY:0,minScaleChange:.005,scaleRatio:1,stabilizationThreshold:3,movementCount:0},this.eventListeners=new Map,this.injectStyles(),this.preloadImages(),this.createOptimizedElements(),this.bindEvents(),this.onShow(),this.loadCurrentImage()}injectStyles(){const t=document.createElement("style");t.id="images-viewer-styles",t.textContent=`\n        :root {\n          /* \u80cc\u666f\u76f8\u5173\u53d8\u91cf */\n          --viewer-bg-color: ${this.options.theme.viewerBgColor};\n          \n          /* \u5de5\u5177\u680f\u76f8\u5173\u53d8\u91cf */\n          --toolbar-bg-color: ${this.options.theme.toolbarBgColor};\n          --toolbar-border-radius: ${this.options.theme.toolbarBorderRadius};\n          --toolbar-padding: ${this.options.theme.toolbarPadding};\n          --toolbar-bottom: ${this.options.theme.toolbarBottom};\n          \n          /* \u6309\u94ae\u76f8\u5173\u53d8\u91cf */\n          --button-bg-color: ${this.options.theme.buttonBgColor};\n          --button-hover-bg: ${this.options.theme.buttonHoverBg};\n          --button-size: ${this.options.theme.buttonSize};\n          --button-font-size: ${this.options.theme.buttonFontSize};\n          --button-border-radius: ${this.options.theme.buttonBorderRadius};\n\n          /* \u5bfc\u822a\u6309\u94ae\u76f8\u5173\u53d8\u91cf */\n          --nav-button-bg-color: ${this.options.theme.navButtonBgColor};\n          --nav-button-hover-bg: ${this.options.theme.navButtonHoverBg};\n          --nav-button-size: ${this.options.theme.navButtonSize};\n          --nav-button-font-size: ${this.options.theme.navButtonFontSize};\n          --nav-button-border-radius: ${this.options.theme.navButtonBorderRadius};\n          \n          /* \u53f3\u4e0a\u89d2\u5173\u95ed\u6309\u94ae\u53d8\u91cf */\n          --top-close-btn-size: ${this.options.theme.topCloseBtnSize};\n          --top-close-btn-top: ${this.options.theme.topCloseBtnTop};\n          --top-close-btn-right: ${this.options.theme.topCloseBtnRight};\n          --top-close-btn-font-size: ${this.options.theme.topCloseBtnFontSize};\n          --top-close-btn-bg-color: ${this.options.theme.topCloseBtnBgColor};\n          --top-close-btn-hover-bg: ${this.options.theme.topCloseBtnHoverBg};\n          \n          /* \u4fe1\u606f\u680f\u76f8\u5173\u53d8\u91cf */\n          --info-bg-color: ${this.options.theme.infoBgColor};\n          --info-border-radius: ${this.options.theme.infoBorderRadius};\n          --info-padding: ${this.options.theme.infoPadding};\n          --info-font-size: ${this.options.theme.infoFontSize};\n          --info-top: ${this.options.theme.infoTop};\n          --info-left: ${this.options.theme.infoLeft};\n          \n          /* \u7f29\u653e\u6307\u793a\u5668\u53d8\u91cf */\n          --zoom-indicator-bg: ${this.options.theme.zoomIndicatorBg};\n          --zoom-indicator-border-radius: ${this.options.theme.zoomIndicatorBorderRadius};\n          --zoom-indicator-padding: ${this.options.theme.zoomIndicatorPadding};\n          --zoom-indicator-font-size: ${this.options.theme.zoomIndicatorFontSize};\n          --zoom-indicator-top: ${this.options.theme.zoomIndicatorTop};\n          --zoom-indicator-left: ${this.options.theme.zoomIndicatorLeft};\n          \n          /* \u901a\u7528\u53d8\u91cf */\n          --active-color: ${this.options.theme.activeColor};\n          --text-color: ${this.options.theme.textColor};\n          --shadow-color: ${this.options.theme.shadowColor};\n          --transition-speed: ${this.options.theme.transitionSpeed};\n          \n          /* \u7f29\u7565\u56fe\u76f8\u5173\u53d8\u91cf */\n          --thumb-max-width: ${this.options.theme.thumbMaxWidth};\n          --thumb-gap: ${this.options.theme.thumbGap};\n          --thumb-padding: ${this.options.theme.thumbPadding};\n          --thumb-item-width: ${this.options.theme.thumbItemWidth};\n          --thumb-item-height: ${this.options.theme.thumbItemHeight};\n        }\n\n        .images-viewer-container {\n          position: fixed;\n          left: 0;\n          top: 0;\n          inset: 0;\n          width: 100%;\n          height: 100%;\n          z-index: 9999;\n          opacity: 0;\n          transition: opacity var(--transition-speed) ease;\n          touch-action: none;\n          -webkit-user-select: none;\n          user-select: none;\n          display: none;\n          background-color: var(--viewer-bg-color);\n          overflow: hidden;\n        }\n\n        .images-viewer-container::backdrop,\n        .images-viewer-container:fullscreen {\n          background-color: var(--viewer-bg-color);\n        }\n\n        /* \u56fe\u7247\u5bb9\u5668\u6837\u5f0f */\n        .images-viewer-image-container {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100%;\n          z-index: 2;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          overflow: hidden;\n        }\n\n        /* \u56fe\u7247\u6837\u5f0f */\n        .images-viewer-image {\n          position: relative;\n          object-fit: contain;\n          cursor: grab;\n          opacity: 0;\n          box-shadow: 0 8px 25px var(--shadow-color);\n          border-radius: 4px;\n          user-select: none;\n          touch-action: none;\n        }\n\n        .images-viewer-image.loaded {\n          opacity: 1;\n          transition: transform 0.1s ease-out, opacity var(--transition-speed) ease;\n          transform-origin: center center;\n        }\n\n        .images-viewer-image.dragging {\n          cursor: grabbing;\n          transition: none;\n        }\n\n        /* \u52a0\u8f7d\u6307\u793a\u5668 */\n        .images-viewer-loading {\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          transform: translate(-50%, -50%);\n          background-color: rgba(127, 127, 127, 0.7);\n          padding: 20px 30px;\n          border-radius: 10px;\n          display: flex;\n          align-items: center;\n          gap: 15px;\n          color: var(--text-color);\n          font-size: 18px;\n          opacity: 0;\n          pointer-events: none;\n          transition: opacity var(--transition-speed) ease;\n          z-index: 3;\n        }\n\n        .images-viewer-loading.active {\n          opacity: 1;\n        }\n\n        .images-viewer-loading-spinner {\n          width: 40px;\n          height: 40px;\n          border: 4px solid rgba(255, 255, 255, 0.2);\n          border-top-color: var(--active-color);\n          border-radius: 50%;\n          animation: imageViewerSpin 1s linear infinite;\n        }\n\n        @keyframes imageViewerSpin {\n          to {\n            transform: rotate(360deg);\n          }\n        }\n\n        /* \u53f3\u4e0a\u89d2\u5173\u95ed\u6309\u94ae\u6837\u5f0f */\n        .images-viewer-top-close-btn {\n          position: absolute;\n          top: var(--top-close-btn-top);\n          right: var(--top-close-btn-right);\n          width: var(--top-close-btn-size);\n          height: var(--top-close-btn-size);\n          border-radius: 50%;\n          background-color: var(--button-bg-color);\n          color: var(--text-color);\n          border: none;\n          font-size:  var(--top-close-btn-font-size);\n          cursor: pointer;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          transition: all var(--transition-speed);\n          z-index: 10;\n          box-shadow: 0 2px 8px var(--shadow-color);\n        }\n\n        .images-viewer-top-close-btn:hover {\n          background-color: var(--top-close-btn-hover-bg);\n          transform: scale(1.1);\n        }\n\n        /* \u7f29\u653e\u6307\u793a\u5668\u6837\u5f0f */\n        .images-viewer-zoom-indicator {\n          position: absolute;\n          top: var(--zoom-indicator-top);\n          left: var(--zoom-indicator-left);\n          color: var(--text-color);\n          background-color: var(--zoom-indicator-bg);\n          padding: var(--zoom-indicator-padding);\n          border-radius: var(--zoom-indicator-border-radius);\n          font-size: var(--zoom-indicator-font-size);\n          z-index: 10;\n          min-width: 60px;\n          text-align: center;\n          box-shadow: 0 2px 8px var(--shadow-color);\n          border: 1px solid rgba(255, 255, 255, 0.1);\n        }\n\n        /* \u4fe1\u606f\u680f\u6837\u5f0f */\n        .images-viewer-image-info {\n          position: absolute;\n          top: var(--info-top);\n          left: var(--info-left);\n          color: var(--text-color);\n          background-color: var(--info-bg-color);\n          padding: var(--info-padding);\n          border-radius: var(--info-border-radius);\n          font-size: var(--info-font-size);\n          z-index: 10;\n          max-width: calc(100% - 40px);\n          box-shadow: 0 4px 12px var(--shadow-color);\n          display: none;\n          border: 1px solid rgba(255, 255, 255, 0.1);\n        }\n\n        .images-viewer-image-info.visible {\n          display: block;\n          animation: imageViewerFadeIn 0.3s ease;\n        }\n\n        .images-viewer-image-info p {\n          margin: 4px 0;\n          line-height: 1.4;\n        }\n\n        .images-viewer-image-info .info-label {\n          color: #ddd;\n          margin-right: 5px;\n        }\n\n        .images-viewer-shortcuts-title {\n          margin-top: 10px;\n          padding-top: 10px;\n          border-top: 1px solid rgba(255, 255, 255, 0.1);\n          font-weight: bold;\n          margin-bottom: 5px;\n        }\n\n        @keyframes imageViewerFadeIn {\n          from {\n            opacity: 0;\n            transform: translateY(-10px);\n          }\n          to {\n            opacity: 1;\n            transform: translateY(0);\n          }\n        }\n\n        /* \u56fe\u7247\u8ba1\u6570\u5668 */\n        .images-viewer-image-counter {\n          position: absolute;\n          top: 20px;\n          left: 50%;\n          transform: translateX(-50%);\n          color: var(--text-color);\n          background-color: var(--info-bg-color);\n          padding: 6px 12px;\n          border-radius: 18px;\n          font-size: 14px;\n          z-index: 10;\n          box-shadow: 0 2px 8px var(--shadow-color);\n        }\n\n        /* \u56fe\u7247\u6807\u9898\u663e\u793a */\n        .images-viewer-image-title {\n          position: absolute;\n          top: 60px;\n          left: 50%;\n          transform: translateX(-50%);\n          color: var(--text-color);\n          padding: 4px 12px;\n          border-radius: 18px;\n          font-size: 12px;\n          z-index: 10;\n          max-width: 80%;\n          text-align: center;\n          white-space: nowrap;\n          overflow: hidden;\n          text-overflow: ellipsis;\n        }\n\n        /* \u5bfc\u822a\u6309\u94ae */\n        .images-viewer-nav-buttons {\n          position: absolute;\n          top: 50%;\n          left: 0;\n          right: 0;\n          transform: translateY(-50%);\n          display: flex;\n          justify-content: space-between;\n          pointer-events: none;\n          z-index: 5;\n          padding: 0 10px;\n        }\n\n        .images-viewer-nav-btn {\n          width: var(--nav-button-size);\n          height: var(--nav-button-size);\n          border-radius: var(--nav-button-border-radius);\n          background-color: var(--nav-button-bg-color);\n          color: var(--text-color);\n          border: none;\n          font-size: var(--nav-button-font-size);\n          cursor: pointer;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          transition: all 0.2s;\n          pointer-events: auto;\n          opacity: 0.9;\n          box-shadow: 0 2px 8px var(--shadow-color);\n          z-index: 6;\n        }\n\n        .images-viewer-nav-btn:hover {\n          background-color: var(--nav-button-hover-bg);\n          opacity: 1;\n          transform: scale(1.1);\n        }\n\n        .images-viewer-nav-btn:disabled {\n          opacity: 0.3;\n          cursor: not-allowed;\n          transform: none;\n        }\n\n        /* \u5de5\u5177\u680f\u6837\u5f0f */\n        .images-viewer-toolbar {\n          position: absolute;\n          bottom: var(--toolbar-bottom);\n          left: 50%;\n          transform: translateX(-50%);\n          background-color: var(--toolbar-bg-color);\n          padding: var(--toolbar-padding);\n          border-radius: var(--toolbar-border-radius);\n          display: flex;\n          gap: 2px;\n          z-index: 10;\n          box-shadow: 0 6px 25px var(--shadow-color);\n          max-width: calc(100% - 40px);\n          overflow-x: auto;\n          overflow-y: hidden;\n          border: 1px solid rgba(255, 255, 255, 0.1);\n          scrollbar-width: none;\n          -ms-overflow-style: none;\n          -webkit-overflow-scrolling: touch;\n        }\n\n        .images-viewer-toolbar::-webkit-scrollbar {\n          display: none;\n        }\n\n        .images-viewer-tool-btn {\n          width: var(--button-size);\n          height: var(--button-size);\n          background-color: transparent;\n          border: none;\n          color: var(--text-color);\n          cursor: pointer;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          font-size: var(--button-font-size);\n          transition: all 0.2s;\n          flex-shrink: 0;\n          position: relative;\n          border-radius: var(--button-border-radius);\n          margin: 0 2px;\n          z-index: 11;\n          line-height: 1;\n        }\n\n        .images-viewer-tool-btn:hover {\n          background-color: var(--button-hover-bg);\n          transform: translateY(-2px);\n          box-shadow: 0 4px 10px var(--shadow-color);\n        }\n\n        .images-viewer-tool-btn:active {\n          background-color: rgba(255, 255, 255, 0.3);\n          transform: translateY(0);\n        }\n\n        .images-viewer-tool-btn:disabled {\n          opacity: 0.5;\n          cursor: not-allowed;\n        }\n\n        /* \u7f29\u7565\u56fe\u5bb9\u5668 */\n        .images-viewer-thumbnails-container {\n          position: absolute;\n          bottom: 90px;\n          left: 50%;\n          max-width: var(--thumb-max-width);\n          transform: translateX(-50%);\n          padding: 10px var(--thumb-padding);\n          background-color: var(--toolbar-bg-color);\n          border-radius: 12px;\n          display: flex;\n          gap: var(--thumb-gap);\n          overflow-x: auto;\n          scrollbar-width: none;\n          -ms-overflow-style: none;\n          z-index: 10;\n          box-shadow: 0 3px 15px var(--shadow-color);\n          -webkit-overflow-scrolling: touch;\n          border: 1px solid rgba(255, 255, 255, 0.1);\n        }\n\n        .images-viewer-thumbnails-container::-webkit-scrollbar {\n          display: none;\n        }\n\n        .images-viewer-thumbnail-item {\n          width: var(--thumb-item-width);\n          height: var(--thumb-item-height);\n          border: 2px solid transparent;\n          border-radius: 6px;\n          overflow: hidden;\n          cursor: pointer;\n          flex-shrink: 0;\n          transition: all 0.2s;\n          z-index: 11;\n          position: relative;\n          opacity: 0.6;\n        }\n\n        .images-viewer-thumbnail-item img {\n          width: 100%;\n          height: 100%;\n          object-fit: cover;\n        }\n\n        .images-viewer-thumbnail-item.active {\n          border-color: var(--active-color);\n          transform: scale(1.2);\n          opacity: 1;\n          box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);\n        }\n\n        /* \u7f29\u7565\u56fe\u52a0\u8f7d\u72b6\u6001 */\n        .images-viewer-thumbnail-loading {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100%;\n          background-color: rgba(0, 0, 0, 0.3);\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          z-index: 1;\n        }\n\n        .loading-spinner {\n          width: 20px;\n          height: 20px;\n          border: 2px solid rgba(255, 255, 255, 0.3);\n          border-top: 2px solid var(--active-color);\n          border-radius: 50%;\n          animation: spin 1s linear infinite;\n        }\n\n        .loading-error {\n          color: #ff6b6b;\n          font-size: 10px;\n          text-align: center;\n          padding: 2px;\n        }\n\n        @keyframes spin {\n          0% { transform: rotate(0deg); }\n          100% { transform: rotate(360deg); }\n        }\n\n        .images-viewer-thumbnail-item:hover {\n          transform: scale(1.2);\n          opacity: 0.9;\n        }\n      `,document.head.appendChild(t)}createOptimizedElements(){this.container=document.createElement("div"),this.container.className="images-viewer-container",document.body.appendChild(this.container),this.imageContainer=document.createElement("div"),this.imageContainer.className="images-viewer-image-container",this.container.appendChild(this.imageContainer),this.image=document.createElement("img"),this.image.className="images-viewer-image",this.image.crossOrigin="anonymous",this.image.alt=" ",this.imageContainer.appendChild(this.image),this.loading=document.createElement("div"),this.loading.className="images-viewer-loading",this.loading.innerHTML=`\n        <div class="images-viewer-loading-spinner"></div>\n        <div>${this.options.i18n.buttons.loading}</div>\n      `,this.imageContainer.appendChild(this.loading),this.options.buttons.topClose&&(this.topCloseBtn=document.createElement("button"),this.topCloseBtn.className="images-viewer-top-close-btn",this.topCloseBtn.textContent="\xd7",this.topCloseBtn.title=this.options.i18n.buttons.close,this.container.appendChild(this.topCloseBtn)),this.zoomIndicator=document.createElement("div"),this.zoomIndicator.className="images-viewer-zoom-indicator",this.zoomIndicator.textContent="100%",this.container.appendChild(this.zoomIndicator),this.options.buttons.info&&(this.imageInfoPanel=document.createElement("div"),this.imageInfoPanel.className="images-viewer-image-info "+(this.imageInfoVisible?"visible":""),this.container.appendChild(this.imageInfoPanel)),this.images.length>1&&(this.counter=document.createElement("div"),this.counter.className="images-viewer-image-counter",this.container.appendChild(this.counter)),this.imageTitle=document.createElement("div"),this.imageTitle.className="images-viewer-image-title",this.container.appendChild(this.imageTitle),this.images.length>1&&(this.options.buttons.prev||this.options.buttons.next)&&this.createNavButtons(),this.images.length>1&&this.options.buttons.thumbnails&&this.createThumbnails(),this.createToolbar()}createNavButtons(){const t=document.createElement("div");t.className="images-viewer-nav-buttons",this.addEvent(t,"click",t=>{t.stopPropagation()}),this.options.buttons.prev&&(this.prevBtn=document.createElement("button"),this.prevBtn.className="images-viewer-nav-btn images-viewer-prev-btn",this.prevBtn.textContent="\u2190",this.prevBtn.title=this.options.i18n.buttons.prev,this.addEvent(this.prevBtn,"click",t=>{t.stopPropagation(),this.prev()}),t.appendChild(this.prevBtn)),this.options.buttons.next&&(this.nextBtn=document.createElement("button"),this.nextBtn.className="images-viewer-nav-btn images-viewer-next-btn",this.nextBtn.textContent="\u2192",this.nextBtn.title=this.options.i18n.buttons.next,this.addEvent(this.nextBtn,"click",t=>{t.stopPropagation(),this.next()}),t.appendChild(this.nextBtn)),this.container.appendChild(t)}createToolbar(){const t=document.createElement("div");t.className="images-viewer-toolbar",this.addEvent(t,"click",t=>{t.stopPropagation()}),this.addEvent(t,"wheel",i=>{i.preventDefault(),i.stopPropagation(),t.scrollLeft+=i.deltaY}),this.images.length>1&&(this.options.buttons.prev&&(this.toolbarPrevBtn=this.createToolButton("\u2190",()=>this.prev()),t.appendChild(this.toolbarPrevBtn)),this.options.buttons.next&&(this.toolbarNextBtn=this.createToolButton("\u2192",()=>this.next()),t.appendChild(this.toolbarNextBtn))),this.options.buttons.zoomOut&&(this.zoomOutBtn=this.createToolButton("\u2212",()=>this.zoom(-.1)),t.appendChild(this.zoomOutBtn)),this.options.buttons.zoomIn&&(this.zoomInBtn=this.createToolButton("+",()=>this.zoom(.1)),t.appendChild(this.zoomInBtn)),this.options.buttons.rotateLeft&&(this.rotateLeftBtn=this.createToolButton("\u21ba",()=>this.rotate(-90)),t.appendChild(this.rotateLeftBtn)),this.options.buttons.rotateRight&&(this.rotateRightBtn=this.createToolButton("\u21bb",()=>this.rotate(90)),t.appendChild(this.rotateRightBtn)),this.options.buttons.reset&&(this.resetBtn=this.createToolButton("\u27f3",()=>this.reset()),t.appendChild(this.resetBtn)),this.options.buttons.originalSize&&(this.originalSizeBtn=this.createToolButton("1:1",()=>this.showOriginalSize()),t.appendChild(this.originalSizeBtn)),this.options.buttons.info&&(this.infoBtn=this.createToolButton("\u24d8",()=>this.toggleImageInfo()),t.appendChild(this.infoBtn)),this.options.buttons.download&&(this.downloadBtn=this.createToolButton("\u21a1",()=>this.downloadImage()),t.appendChild(this.downloadBtn)),this.options.buttons.fullscreen&&(this.fullscreenBtn=this.createToolButton("\u26f6",()=>this.toggleFullscreen()),t.appendChild(this.fullscreenBtn)),this.options.buttons.close&&(this.closeBtn=this.createToolButton("\xd7",()=>this.close()),t.appendChild(this.closeBtn)),this.options.customButtons&&this.options.customButtons.forEach(i=>{t.appendChild(this.createToolButton(i[0],i[1]))}),this.container.appendChild(t)}createToolButton(t,i){const s=document.createElement("button");s.className="images-viewer-tool-btn";const n=document.createElement("span");return n.textContent=t,s.appendChild(n),this.addEvent(s,"click",t=>{t.stopPropagation(),i()}),s}createThumbnails(){const t=document.createElement("div");t.className="images-viewer-thumbnails-container",this.addEvent(t,"click",t=>{t.stopPropagation();const i=t.target.closest(".images-viewer-thumbnail-item");if(i){const t=parseInt(i.dataset.index);if(!isNaN(t)&&t!==this.currentIndex){const i=this.currentIndex;this.currentIndex=t,this.loadCurrentImage(),this.updateThumbnails(),this.options.onChange&&this.options.onChange({index:this.currentIndex,oldIndex:i,direction:this.currentIndex>i?"next":"prev",data:this.images[this.currentIndex],img:this.image,dom:this.container})}}}),this.addEvent(t,"wheel",i=>{i.preventDefault(),i.stopPropagation(),t.scrollLeft+=i.deltaY});const i=parseInt(this.options.theme.thumbItemWidth),s=parseInt(this.options.theme.thumbGap),n=parseInt(this.options.theme.thumbPadding),e=this.options.preloadCount,h=window.innerWidth-2*n,o=Math.ceil(h/(i+s)),a=Math.min(o+e,this.images.length);for(let i=0;i<a;i++)this.createThumbnailItem(t,i);let r=a;this.addEvent(t,"scroll",()=>{const i=t.scrollLeft,s=t.clientWidth;if(i>t.scrollWidth-s-s&&r<this.images.length){const i=Math.min(o,this.images.length-r);for(let s=r;s<r+i;s++)this.createThumbnailItem(t,s);r+=i}}),this.container.appendChild(t),this.thumbContainer=t}createThumbnailItem(t,i){const s=this.getThumbnailUrl(i),n=this.getImageUrl(i),e=document.createElement("div");e.className="images-viewer-thumbnail-item "+(i===this.currentIndex?"active":""),e.dataset.index=i;const h=new Image;h.crossOrigin="anonymous",h.src="";const o=document.createElement("div");o.className="images-viewer-thumbnail-loading",o.innerHTML='<div class="loading-spinner"></div>',e.appendChild(o),this.loadedThumbnails.has(s)?(h.src=this.loadedThumbnails.get(s).src,o.remove()):this.loadingThumbnails.has(s)?(o.style.display="flex",h.onload=()=>{o.remove(),h.onload=null,h.onerror=null},h.onerror=()=>{o.remove(),this.failedThumbnails.add(s),h.onload=null,h.onerror=null,this.options.onThumbnailError&&this.options.onThumbnailError({data:this.images[i],index:i,url:s,img:h})},h.src=s):this.failedThumbnails.has(s)&&!this.options.retryOnError?o.remove():this.loadedImages.has(n)?(h.src=this.loadedImages.get(n).src,o.remove()):(this.loadingThumbnails.set(s,h),o.style.display="flex",h.onload=()=>{this.loadedThumbnails.set(s,h),this.loadingThumbnails.delete(s),this.failedThumbnails.delete(s),o.remove(),h.onload=null,h.onerror=null},h.onerror=()=>{this.loadingThumbnails.delete(s),this.failedThumbnails.add(s),o.remove(),h.onload=null,h.onerror=null,this.options.onThumbnailError&&this.options.onThumbnailError({data:this.images[i],index:i,url:s,img:h})},h.src=s),e.appendChild(h),t.appendChild(e)}updateThumbnailDisplay(t){if(!this.thumbContainer)return;const i=this.thumbContainer.querySelector(`[data-index="${t}"]`);if(i){const s=this.getThumbnailUrl(t),n=i.querySelector("img");if(n&&this.loadedThumbnails.has(s)){const t=this.loadedThumbnails.get(s);n.src=t.src,n.style.display="block";const e=i.querySelector(".images-viewer-thumbnail-loading");e&&e.remove()}}}updateImageTransform(){const t=`\n        translate(${this.translateX}px, ${this.translateY}px)\n        scale(${this.scale})\n        rotate(${this.rotation}deg)\n      `;this.image.style.transform=t}fitImageToScreen(t,i){this.scale=1,this.translateX=0,this.translateY=0;const s=this.imageContainer.clientWidth,n=this.imageContainer.clientHeight,e=this.rotation%360;let h=t,o=i;if(90!==e&&270!==e||(h=i,o=t),h>s||o>n){const t=s/h,i=n/o;this.scale=Math.min(t,i)}this.scale=Math.max(.1,this.scale),this.updateImageTransform(),this.updateZoomIndicator()}parseImageOptions(t){this.images=[],"string"==typeof t?this.images=[t]:Array.isArray(t)?this.images=t.filter(t=>""!==t):"object"==typeof t&&t.images&&Array.isArray(t.images)&&(this.images=t.images.filter(t=>""!==t))}getImageUrl(t){const i=this.images[t];if("string"==typeof i)return i;if("object"==typeof i){const s=this.options.props.url;if("function"==typeof s)return s(i,t);if("string"==typeof s&&i[s])return i[s]}return""}getThumbnailUrl(t){const i=this.images[t];if("object"==typeof i){const s=this.options.props.thumbnail;if("function"==typeof s)return s(i,t);if("string"==typeof s&&i[s])return i[s]}return this.getImageUrl(t)}getImageTitle(t){const i=this.images[t];if("object"==typeof i){const s=this.options.props.title;if("function"==typeof s)return s(i,t);if("string"==typeof s&&i[s])return i[s]}return""}preloadImages(){const t=this.options.preloadCount;if(t<=0)return;const i=Math.max(0,this.currentIndex-t),s=Math.min(this.images.length-1,this.currentIndex+t);for(let t=i;t<=s;t++)this.loadImageAtIndex(t)}addToCache(t,i){this.loadedImages.set(t,i);const s=this.options.maxCacheSize;if(s>0&&this.loadedImages.size>s){const t=this.loadedImages.keys().next().value;this.loadedImages.delete(t)}}loadImageAtIndex(t){const i=this.getImageUrl(t);if(!i||this.loadedImages.has(i)||this.loadingImages.has(i)||!this.options.retryOnError&&this.failedImages.has(i))return;const s=new Image;s.onload=()=>{this.addToCache(i,s),this.loadingImages.delete(i),this.failedImages.delete(i),this.imageMetadata[t]={name:this.extractFileName(i),width:s.naturalWidth||s.width,height:s.naturalHeight||s.height},s.onload=null,s.onerror=null},s.onerror=()=>{this.loadingImages.delete(i),this.failedImages.add(i),s.onload=null,s.onerror=null;const n=this.getImageUrl(this.currentIndex);i===n&&(this.hideLoading(),this.image.classList.add("loaded"),this.options.onImageError&&this.options.onImageError({data:this.images[t],index:t,url:i,img:this.image}))},s.crossOrigin="anonymous",s.src=i,this.loadingImages.set(i,s)}extractFileName(t){try{const i=new URL(t).pathname.split("/");let s=i[i.length-1];const n=s.indexOf("?");return n>-1&&(s=s.substring(0,n)),s||"unknown-image"}catch(t){return"unknown-image"}}loadCurrentImage(t){if(void 0!==t&&(this.currentIndex=t),this.hasPreviousState=!1,this.isToggledState=!1,this.images.length>1&&this.counter){let t=null;this.options.onCounter&&(t=this.options.onCounter({data:this.images[this.currentIndex],index:this.currentIndex,currentPage:this.currentIndex+1,totalPages:this.images.length,scale:this.scale,rotation:this.rotation})),t?this.counter.innerHTML=t:this.counter.textContent=`${this.currentIndex+1} / ${this.images.length}`}const i=this.getImageTitle(this.currentIndex);this.imageTitle&&i?(this.imageTitle.innerHTML=i,this.imageTitle.style.display="block"):this.imageTitle.style.display="none",this.updateNavButtons(),this.updateThumbnails(),this.scale=1,this.rotation=0,this.translateX=0,this.translateY=0;const s=this.getImageUrl(this.currentIndex);this.loadedImages.has(s)||this.loadingImages.has(s)||this.loadImageAtIndex(this.currentIndex),this.preloadAdjacentImages(),this.isImageLoaded()}preloadAdjacentImages(){const t=Math.max(0,this.currentIndex-2),i=Math.min(this.images.length-1,this.currentIndex+2);for(let s=t;s<=i;s++)this.loadThumbnailAtIndex(s);for(let s=t;s<=i;s++)this.loadImageAtIndex(s)}loadThumbnailAtIndex(t){const i=this.getThumbnailUrl(t);if(!i||this.loadedThumbnails.has(i)||this.loadingThumbnails.has(i)||!this.options.retryOnError&&this.failedThumbnails.has(i))return;const s=new Image;s.onload=()=>{this.loadedThumbnails.set(i,s),this.loadingThumbnails.delete(i),this.failedThumbnails.delete(i),this.updateThumbnailDisplay(t),s.onload=null,s.onerror=null},s.onerror=()=>{this.loadingThumbnails.delete(i),this.failedThumbnails.add(i),s.onload=null,s.onerror=null;let n=null;if(this.thumbContainer){const i=this.thumbContainer.querySelector(`[data-index="${t}"]`);if(i){n=i.querySelector("img");const t=i.querySelector(".images-viewer-thumbnail-loading");t&&t.remove()}}this.options.onThumbnailError&&this.options.onThumbnailError({data:this.images[t],index:t,url:i,img:n})},s.crossOrigin="anonymous",s.src=i,this.loadingThumbnails.set(i,s)}isImageLoaded(){const t=this.getImageUrl(this.currentIndex),i=this.loadedImages.has(t),s=this.loadingImages.has(t),n=this.failedImages.has(t);if(this.showLoading(),this.image.classList.remove("loaded"),this.image.src="",i){const i=this.loadedImages.get(t),s=document.createElement("canvas"),n=s.getContext("2d");s.width=i.naturalWidth||i.width,s.height=i.naturalHeight||i.height,n.drawImage(i,0,0),s.toBlob(t=>{if(t){const i=URL.createObjectURL(t);this.image.onload=()=>{this.image.onload=null},this.image.src=i,this.t&&(URL.revokeObjectURL(this.t),this.t=null),this.t=i}});const e=this.imageMetadata[this.currentIndex];return e&&(this.fitImageToScreen(e.width,e.height),this.updateImageInfo()),this.image.classList.add("loaded"),void this.hideLoading()}if(n&&!this.options.retryOnError)return this.hideLoading(),this.image.classList.add("loaded"),void(this.options.onImageError&&this.options.onImageError({data:this.images[this.currentIndex],index:this.currentIndex,url:t,img:this.image}));if(s){const i=()=>{const s=this.getImageUrl(this.currentIndex);this.loadedImages.has(t)?t===s&&this.isImageLoaded():this.loadingImages.has(t)?setTimeout(i,100):(this.hideLoading(),t===s&&(this.image.classList.add("loaded"),this.options.onImageError&&this.options.onImageError({data:this.images[this.currentIndex],index:this.currentIndex,url:t,img:this.image})))};return void setTimeout(i,100)}const e=new Image;e.onload=()=>{this.addToCache(t,e),this.loadingImages.delete(t),this.imageMetadata[this.currentIndex]={name:this.extractFileName(t),width:e.naturalWidth||e.width,height:e.naturalHeight||e.height},this.isImageLoaded()},e.onerror=()=>{this.loadingImages.delete(t),this.hideLoading();const i=this.getImageUrl(this.currentIndex);t===i&&(this.image.classList.add("loaded"),this.options.onImageError&&this.options.onImageError({data:this.images[this.currentIndex],index:this.currentIndex,url:t,img:this.image}))},e.crossOrigin="anonymous",e.src=t,this.loadingImages.set(t,e)}updateZoomIndicator(){const t=Math.round(100*this.scale);if(this.options.onZoomIndicator){const i=this.options.onZoomIndicator({data:this.images[this.currentIndex],index:this.currentIndex,scale:this.scale,percentage:t,rotation:this.rotation});if(i)return void(this.zoomIndicator.innerHTML=i)}this.zoomIndicator.textContent=`${t}%`}updateImageInfo(){if(!this.options.buttons.info||!this.imageInfoPanel)return;const t=this.imageMetadata[this.currentIndex];if(!t)return;const i=this.options.i18n;let s="";this.options.onInfo&&(s=this.options.onInfo({data:this.images[this.currentIndex],index:this.currentIndex,metadata:t,scale:this.scale,rotation:this.rotation}),s)||(this.options.imageInfo.showName&&(s+=`<p><span class="info-label">${i.info.name}</span> ${t.name}</p>`),this.options.imageInfo.showDimensions&&(s+=`<p><span class="info-label">${i.info.dimensions}</span> ${t.width} \xd7 ${t.height}</p>`),s+=`\n          <div class="images-viewer-shortcuts-title">${i.info.shortcuts}</div>\n          <p><span class="info-label">${i.info.zoomIn}</span> \u2191 +</p>\n          <p><span class="info-label">${i.info.zoomOut}</span> \u2193 -</p>\n          <p><span class="info-label">${i.info.prev}</span> \u2190</p>\n          <p><span class="info-label">${i.info.next}</span> \u2192</p>\n          <p><span class="info-label">${i.info.reset}</span> 0</p>\n          <p><span class="info-label">${i.info.fullscreen}</span> F</p>\n          <p><span class="info-label">${i.info.info}</span> I</p>\n          <p><span class="info-label">${i.info.close}</span> ESC</p>\n        `),this.imageInfoPanel.innerHTML=s}toggleImageInfo(){this.options.buttons.info&&this.imageInfoPanel&&(this.imageInfoVisible=!this.imageInfoVisible,this.imageInfoVisible?this.imageInfoPanel.classList.add("visible"):this.imageInfoPanel.classList.remove("visible"))}updateNavButtons(){if(this.images.length<=1)return;const t=!!this.options.loop||this.currentIndex>0,i=!!this.options.loop||this.currentIndex<this.images.length-1;this.prevBtn&&(this.prevBtn.disabled=!t),this.nextBtn&&(this.nextBtn.disabled=!i),this.toolbarPrevBtn&&(this.toolbarPrevBtn.disabled=!t),this.toolbarNextBtn&&(this.toolbarNextBtn.disabled=!i)}updateThumbnails(){if(this.images.length<=1)return;document.querySelectorAll(".images-viewer-thumbnail-item").forEach(t=>{t.classList.remove("active")});const t=document.querySelector(`.images-viewer-thumbnail-item[data-index="${this.currentIndex}"]`);t&&(t.classList.add("active"),t.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"}))}showLoading(){this.loading&&this.loading.classList.add("active")}hideLoading(){this.loading&&this.loading.classList.remove("active")}prev(){if(this.images.length<=1)return;let t=this.currentIndex-1;t<0&&(t=this.options.loop?this.images.length-1:0);const i=this.currentIndex;t!==this.currentIndex&&(this.currentIndex=t,this.loadCurrentImage()),this.options.onChange&&this.options.onChange({oldIndex:i,index:this.currentIndex,data:this.images[this.currentIndex],direction:"prev",img:this.image,dom:this.container})}next(){if(this.images.length<=1)return;let t=this.currentIndex+1;t>=this.images.length&&(t=this.options.loop?0:this.images.length-1),t!==this.currentIndex&&(this.currentIndex=t,this.loadCurrentImage());const i=this.currentIndex;this.options.onChange&&this.options.onChange({oldIndex:i,index:this.currentIndex,data:this.images[this.currentIndex],index:this.currentIndex,direction:"next",img:this.image,dom:this.container})}bindEvents(){this.topCloseBtn&&this.addEvent(this.topCloseBtn,"click",()=>this.close()),this.options.closeOnMaskClick&&this.addEvent(this.imageContainer,"click",t=>{t.target==this.imageContainer&&this.close()}),this.addEvent(document,"keydown",t=>this.handleKeydown(t));const t=function(t){let i,s=0;return function(...n){const e=Date.now(),h=e-s;h>300?(t.apply(this,n),s=e):(clearTimeout(i),i=setTimeout(()=>{t.apply(this,n),s=e},300-h))}}(()=>{this.handleResize()});this.addEvent(window,"resize",t),this.bindDragEvents(),this.bindTouchEvents()}addEvent(t,i,s,n){t.addEventListener(i,s,n);const e=`${i}-${Date.now()}-${Math.random()}`;this.eventListeners.set(e,{element:t,event:i,handler:s})}removeAllEvents(){this.eventListeners.forEach(({element:t,event:i,handler:s})=>{t.removeEventListener(i,s)}),this.eventListeners.clear()}rotatePoint(t,i,s){const n=s*Math.PI,e=Math.cos(n),h=Math.sin(n);return{x:t*e-i*h,y:t*h+i*e}}bindDragEvents(){this.addEvent(this.image,"mousedown",t=>{0===t.button&&(this.isDragging=!0,this.image.classList.add("dragging"),this.startX=t.clientX,this.startY=t.clientY,this.startTranslateX=this.translateX,this.startTranslateY=this.translateY,t.preventDefault())}),this.addEvent(document,"mousemove",t=>{if(!this.isDragging)return;const i=t.clientX-this.startX,s=t.clientY-this.startY,n=this.rotatePoint(i,s,-this.rotation);this.translateX=this.startTranslateX+n.x,this.translateY=this.startTranslateY+n.y,this.updateImageTransform(),this.options.onDrag&&this.options.onDrag({data:his.images[this.currentIndex],index:this.currentIndex,translateX:this.translateX,translateY:this.translateY}),t.preventDefault()}),this.addEvent(document,"mouseup",()=>{this.isDragging&&(this.isDragging=!1,this.image.classList.remove("dragging"))}),this.addEvent(document,"mouseleave",()=>{this.isDragging&&(this.isDragging=!1,this.image.classList.remove("dragging"))}),this.addEvent(this.imageContainer,"wheel",t=>{t.preventDefault();const i=this.imageContainer.getBoundingClientRect(),s=t.clientX-i.left,n=t.clientY-i.top,e=t.deltaY>0?-.05:.05;this.zoomAtPoint(e,s,n)}),this.addEvent(this.image,"dblclick",t=>{t.preventDefault();const i=this.imageContainer.getBoundingClientRect(),s=t.clientX-i.left,n=t.clientY-i.top;if(Math.abs(this.scale-1)<.01)if(this.hasPreviousState)this.scale=this.lastScale,this.translateX=this.lastTranslateX,this.translateY=this.lastTranslateY,this.hasPreviousState=!1;else{this.lastScale=this.scale,this.lastTranslateX=this.translateX,this.lastTranslateY=this.translateY,this.hasPreviousState=!0;const t=1.5,i=t/this.scale,e=this.imageContainer.clientWidth,h=this.imageContainer.clientHeight;this.translateX=this.translateX*i+s-e/2-i*(s-e/2),this.translateY=this.translateY*i+n-h/2-i*(n-h/2),this.scale=t}else{this.lastScale=this.scale,this.lastTranslateX=this.translateX,this.lastTranslateY=this.translateY,this.hasPreviousState=!0;const t=1,i=t/this.scale,e=this.imageContainer.clientWidth,h=this.imageContainer.clientHeight;this.translateX=this.translateX*i+s-e/2-i*(s-e/2),this.translateY=this.translateY*i+n-h/2-i*(n-h/2),this.scale=t}this.updateImageTransform(),this.updateZoomIndicator()})}bindTouchEvents(){this.addEvent(this.image,"touchstart",t=>{if(this.touchState.lastTouchTime=Date.now(),1===t.touches.length)this.touchState.isPinching||(this.touchState.isDragging=!0,this.touchState.startX=t.touches[0].clientX,this.touchState.startY=t.touches[0].clientY,this.touchState.startTranslateX=this.translateX,this.touchState.startTranslateY=this.translateY,this.image.classList.add("dragging"));else if(2===t.touches.length){this.touchState.isPinching=!0,this.touchState.isDragging=!1,this.image.classList.remove("dragging");const i=t.touches[0],s=t.touches[1];this.touchState.initialDistance=this.getDistance(i,s),this.touchState.initialScale=this.scale,this.touchState.initialTranslateX=this.translateX,this.touchState.initialTranslateY=this.translateY,this.touchState.centerX=(i.clientX+s.clientX)/2,this.touchState.centerY=(i.clientY+s.clientY)/2;const n=this.imageContainer.getBoundingClientRect(),e=this.touchState.centerX-n.left,h=this.touchState.centerY-n.top;this.calculateRelativeCenter(e,h),this.touchState.movementCount=0,this.touchState.scaleRatio=1}t.preventDefault()}),this.addEvent(this.image,"touchmove",t=>{if(!(Date.now()-this.touchState.lastTouchTime<16)){if(this.touchState.lastTouchTime=Date.now(),1===t.touches.length&&this.touchState.isDragging&&!this.touchState.isPinching){const i=t.touches[0].clientX-this.touchState.startX,s=t.touches[0].clientY-this.touchState.startY,n=this.rotatePoint(i,s,-this.rotation);this.touchState.movementCount++,(this.touchState.movementCount>this.touchState.stabilizationThreshold||Math.abs(i)>5||Math.abs(s)>5)&&(this.translateX=this.touchState.startTranslateX+n.x,this.translateY=this.touchState.startTranslateY+n.y,this.updateImageTransform(),this.options.onDrag&&this.options.onDrag({data:this.images[this.currentIndex],index:this.currentIndex,translateX:this.translateX,translateY:this.translateY}))}else if(2===t.touches.length&&this.touchState.isPinching){const i=t.touches[0],s=t.touches[1],n=this.getDistance(i,s);this.touchState.scaleRatio=n/this.touchState.initialDistance;const e=this.touchState.initialScale*this.touchState.scaleRatio,h=this.options.minScale,o=this.options.maxScale,a=Math.max(h,Math.min(o,e));if(Math.abs(a-this.scale)>this.touchState.minScaleChange){const t=a/this.touchState.initialScale,i=this.imageContainer.getBoundingClientRect(),s=i.width,n=i.height;this.translateX=this.touchState.initialTranslateX*t+this.touchState.centerX-s/2-t*(this.touchState.centerX-s/2),this.translateY=this.touchState.initialTranslateY*t+this.touchState.centerY-n/2-t*(this.touchState.centerY-n/2),this.scale=a,this.updateImageTransform(),this.updateZoomIndicator(),this.options.onZoom&&this.options.onZoom({data:this.images[this.currentIndex],index:this.currentIndex,scale:this.scale,oldScale:this.touchState.initialScale})}}t.preventDefault()}}),this.addEvent(this.image,"touchend",t=>{0===t.touches.length?(this.touchState.isDragging=!1,this.touchState.isPinching=!1,this.image.classList.remove("dragging")):1===t.touches.length&&this.touchState.isPinching&&(this.touchState.isPinching=!1,this.touchState.isDragging=!0,this.touchState.startX=t.touches[0].clientX,this.touchState.startY=t.touches[0].clientY,this.touchState.startTranslateX=this.translateX,this.touchState.startTranslateY=this.translateY,this.image.classList.add("dragging")),t.preventDefault()}),this.addEvent(this.image,"touchcancel",()=>{this.touchState.isDragging=!1,this.touchState.isPinching=!1,this.image.classList.remove("dragging")})}getDistance(t,i){const s=t.clientX-i.clientX,n=t.clientY-i.clientY;return Math.sqrt(s*s+n*n)}calculateRelativeCenter(t,i){if(!this.imageMetadata[this.currentIndex])return;const s=this.imageContainer.clientWidth,n=this.imageContainer.clientHeight/2,e=t-s/2-this.translateX,h=i-n-this.translateY;this.touchState.relativeCenterX=e/this.scale,this.touchState.relativeCenterY=h/this.scale}zoomAtPoint(t,i,s){const n=this.scale,e=this.options.maxScale,h=this.options.minScale,o=Math.max(h,Math.min(e,this.scale+t));if(o===this.scale)return;const a=o/n,r=this.imageContainer.clientWidth,l=this.imageContainer.clientHeight;this.translateX=this.translateX*a+i-r/2-a*(i-r/2),this.translateY=this.translateY*a+s-l/2-a*(s-l/2),this.scale=o,this.updateImageTransform(),this.updateZoomIndicator(),this.options.onZoom&&this.options.onZoom({data:this.images[this.currentIndex],index:this.currentIndex,scale:this.scale,oldScale:n})}zoom(t){const i=this.imageContainer.clientWidth,s=this.imageContainer.clientHeight;this.zoomAtPoint(t,i/2,s/2)}rotate(t){const i=this.rotation,s=i+t;if(i===s)return;const n=this.imageContainer.getBoundingClientRect(),e=n.width/2,h=n.height/2,o=e+this.translateX,a=h+this.translateY;this.rotation=s,this.translateX=0,this.translateY=0;const r=this.imageMetadata[this.currentIndex];if(r){const t=this.calculateBoundingBox(r.width,r.height,s),i=t.width*this.scale,n=t.height*this.scale;this.translateX=(o-e)*(i/(i-this.translateX)),this.translateY=(a-h)*(n/(n-this.translateY))}this.updateImageTransform(),this.updateZoomIndicator(),this.options.onRotate&&this.options.onRotate({data:this.images[this.currentIndex],index:this.currentIndex,rotation:this.rotation,oldRotation:i})}calculateBoundingBox(t,i,s){const n=s*Math.PI/180,e=Math.abs(Math.cos(n)),h=Math.abs(Math.sin(n));return{width:t*e+i*h,height:t*h+i*e}}reset(){this.rotation=0;const t=this.imageMetadata[this.currentIndex];t&&this.fitImageToScreen(t.width,t.height)}showOriginalSize(){this.rotation=0,this.scale=1,this.translateX=0,this.translateY=0,this.updateImageTransform(),this.updateZoomIndicator()}downloadImage(){const t=this.getImageUrl(this.currentIndex),i=this.imageMetadata[this.currentIndex];if(this.loadedImages.has(t)){const s=this.loadedImages.get(t);this.downloadFromImage(s,i)}}downloadFromImage(t,i){try{const s=document.createElement("canvas");s.width=t.naturalWidth||t.width,s.height=t.naturalHeight||t.height,s.getContext("2d").drawImage(t,0,0);const n=s.toDataURL("image/jpeg");this.downloadedImage(n,i)}catch(t){const s=this.getImageUrl(this.currentIndex);this.downloadedImage(s,i)}}downloadedImage(t,i){try{const s=document.createElement("a");s.href=t,s.download=i?i.name:"image.jpg",document.body.appendChild(s),s.click(),document.body.removeChild(s)}catch(t){}}toggleFullscreen(){document.fullscreenElement?document.exitFullscreen&&(document.exitFullscreen(),this.isFullscreen=!1):(this.container.requestFullscreen().catch(t=>{}),this.isFullscreen=!0)}handleKeydown(t){if("block"===this.container.style.display){switch(t.key){case"Escape":this.close();break;case"ArrowLeft":this.prev();break;case"ArrowRight":this.next();break;case"ArrowUp":case"+":case"=":this.zoom(.1);break;case"ArrowDown":case"-":this.zoom(-.1);break;case"0":this.reset();break;case"f":case"F":this.toggleFullscreen();break;case"i":case"I":this.toggleImageInfo()}t.preventDefault()}}handleResize(){const t=this.imageMetadata[this.currentIndex];if(!t)return;const i=this.imageContainer.clientWidth,s=this.imageContainer.clientHeight,n=this.rotation%360;let e=t.width,h=t.height;90!==n&&270!==n||(e=t.height,h=t.width);const o=Math.min(i/e,s/h),a=e*this.scale,r=h*this.scale,l=a>i||r>s;let c=this.scale;c=l?Math.max(.1,o):o>=1?1:o,Math.abs(c-this.scale)>.01&&(this.scale=c,this.translateX=0,this.translateY=0,this.updateImageTransform(),this.updateZoomIndicator()),this.updateThumbnailsOnResize()}updateThumbnailsOnResize(){if(!this.thumbContainer)return;const t=parseInt(this.options.theme.thumbItemWidth),i=parseInt(this.options.theme.thumbGap),s=parseInt(this.options.theme.thumbPadding),n=this.options.preloadCount,e=window.innerWidth-2*s,h=Math.ceil(e/(t+i)),o=Math.min(h+n,this.images.length),a=this.thumbContainer.querySelectorAll(".images-viewer-thumbnail-item").length;if(a<o){const t=o-a;for(let i=a;i<a+t;i++)i<this.images.length&&this.createThumbnailItem(this.thumbContainer,i)}}onShow(){this.container.style.display="block",setTimeout(()=>{this.container.style.opacity="1",this.options.onShow&&this.options.onShow(this.container)},10)}close(){this.removeAllEvents(),this.cleanup(),this.container.style.opacity="0",setTimeout(()=>{this.container.style.display="none";const t=document.getElementById("images-viewer-styles");t&&t.remove(),this.container&&this.container.remove(),this.options.onClose&&this.options.onClose()},300)}cleanup(){for(const[t,i]of this.loadingImages.entries())i.onload=null,i.onerror=null,i.src="";this.loadedImages.clear(),this.loadingImages.clear(),this.imageMetadata=[],this.t&&(URL.revokeObjectURL(this.t),this.t=null)}}export{t as default};

package/dist/index.js

@@ -1 +1 @@
-var global,factory;global=this,factory=function(){return class{constructor(t){if(this.defaultOptions={initialIndex:0,closeOnMaskClick:!1,loop:!0,preloadCount:3,maxCacheSize:30,minScale:.1,maxScale:5,buttons:{zoomIn:!0,zoomOut:!0,rotateLeft:!0,rotateRight:!0,reset:!0,download:!0,fullscreen:!0,prev:!0,next:!0,close:!0,topClose:!0,thumbnails:!0,info:!0,originalSize:!0},imageInfo:{visible:!1,showName:!0,showDimensions:!0},i18n:{info:{name:"\u540d\u79f0:",dimensions:"\u5c3a\u5bf8:",shortcuts:"\u5feb\u6377\u952e",zoomIn:"\u653e\u5927:",zoomOut:"\u7f29\u5c0f:",prev:"\u4e0a\u4e00\u5f20:",next:"\u4e0b\u4e00\u5f20:",reset:"\u91cd\u7f6e:",fullscreen:"\u5168\u5c4f:",info:"\u4fe1\u606f:",close:"\u5173\u95ed:"},buttons:{prev:"\u4e0a\u4e00\u5f20 (\u2190)",next:"\u4e0b\u4e00\u5f20 (\u2192)",close:"\u5173\u95ed (Esc)",loading:"\u52a0\u8f7d\u4e2d..."}},theme:{viewerBgColor:"rgba(0, 0, 0, 0.4)",toolbarBgColor:"rgba(150, 150, 150, 0.7)",toolbarBorderRadius:"30px",toolbarPadding:"8px 12px",toolbarBottom:"20px",buttonBgColor:"rgba(150, 150, 150, 0.7)",buttonHoverBg:"rgba(200, 200, 200, 0.4)",buttonSize:"40px",buttonFontSize:"20px",buttonBorderRadius:"50%",navButtonBgColor:"rgba(150, 150, 150, 0.7)",navButtonHoverBg:"rgba(200, 200, 200, 0.4)",navButtonSize:"50px",navButtonFontSize:"20px",navButtonBorderRadius:"50%",topCloseBtnSize:"50px",topCloseBtnTop:"20px",topCloseBtnRight:"20px",topCloseBtnFontSize:"24px",topCloseBtnBgColor:"rgba(150, 150, 150, 0.7)",topCloseBtnHoverBg:"rgba(200, 200, 200, 0.4)",infoBgColor:"rgba(150, 150, 150, 0.7)",infoBorderRadius:"12px",infoPadding:"10px 15px",infoFontSize:"13px",infoTop:"70px",infoLeft:"20px",zoomIndicatorBg:"rgba(150, 150, 150, 0.7)",zoomIndicatorBorderRadius:"18px",zoomIndicatorPadding:"6px 12px",zoomIndicatorFontSize:"14px",zoomIndicatorTop:"20px",zoomIndicatorLeft:"20px",activeColor:"rgba(100, 150, 255, 0.8)",textColor:"rgba(255, 255, 255, 0.9)",shadowColor:"rgba(0, 0, 0, 0.2)",transitionSpeed:"0.3s",thumbItemWidth:"70px",thumbItemHeight:"45px",thumbGap:"10px",thumbPadding:"15px",thumbMaxWidth:"90%"}},this.options={...this.defaultOptions,...t,buttons:{...this.defaultOptions.buttons,...t?.buttons||{}},imageInfo:{...this.defaultOptions.imageInfo,...t?.imageInfo||{}},i18n:{...this.defaultOptions.i18n,...t?.i18n||{},info:{...this.defaultOptions.i18n.info,...t?.i18n?.info||{}},buttons:{...this.defaultOptions.i18n.buttons,...t?.i18n?.buttons||{}}},theme:{...this.defaultOptions.theme,...t?.theme||{}}},this.parseImageOptions(t),0===this.images.length)throw new Error("\u672a\u63d0\u4f9b\u6709\u6548\u7684\u56fe\u7247URL");const i=Math.max(0,Math.min(this.options.initialIndex||0,this.images.length-1));this.currentIndex=i,this.scale=1,this.rotation=0,this.translateX=0,this.translateY=0,this.isDragging=!1,this.startX=0,this.startY=0,this.startTranslateX=0,this.startTranslateY=0,this.isFullscreen=!1,this.imageInfoVisible=this.options.imageInfo.visible,this.imageMetadata=[],this.loadedImages=new Map,this.loadingImages=new Map,this.loadedThumbnails=new Map,this.loadingThumbnails=new Map,this.lastTapTime=0,this.lastScale=1,this.lastTranslateX=0,this.lastTranslateY=0,this.hasPreviousState=!1,this.isToggledState=!1,this.touchState={isDragging:!1,isPinching:!1,initialDistance:null,initialScale:null,initialTranslateX:null,initialTranslateY:null,centerX:null,centerY:null,relativeCenterX:null,relativeCenterY:null,lastTouchTime:0,startX:0,startY:0,startTranslateX:0,startTranslateY:0,minScaleChange:.005,scaleRatio:1,stabilizationThreshold:3,movementCount:0},this.eventListeners=new Map,this.injectStyles(),this.preloadImages(),this.createOptimizedElements(),this.bindEvents(),this.onShow(),this.loadCurrentImage()}injectStyles(){const t=document.createElement("style");t.id="images-viewer-styles",t.textContent=`\n        :root {\n          /* \u80cc\u666f\u76f8\u5173\u53d8\u91cf */\n          --viewer-bg-color: ${this.options.theme.viewerBgColor};\n          \n          /* \u5de5\u5177\u680f\u76f8\u5173\u53d8\u91cf */\n          --toolbar-bg-color: ${this.options.theme.toolbarBgColor};\n          --toolbar-border-radius: ${this.options.theme.toolbarBorderRadius};\n          --toolbar-padding: ${this.options.theme.toolbarPadding};\n          --toolbar-bottom: ${this.options.theme.toolbarBottom};\n          \n          /* \u6309\u94ae\u76f8\u5173\u53d8\u91cf */\n          --button-bg-color: ${this.options.theme.buttonBgColor};\n          --button-hover-bg: ${this.options.theme.buttonHoverBg};\n          --button-size: ${this.options.theme.buttonSize};\n          --button-font-size: ${this.options.theme.buttonFontSize};\n          --button-border-radius: ${this.options.theme.buttonBorderRadius};\n\n          /* \u5bfc\u822a\u6309\u94ae\u76f8\u5173\u53d8\u91cf */\n          --nav-button-bg-color: ${this.options.theme.navButtonBgColor};\n          --nav-button-hover-bg: ${this.options.theme.navButtonHoverBg};\n          --nav-button-size: ${this.options.theme.navButtonSize};\n          --nav-button-font-size: ${this.options.theme.navButtonFontSize};\n          --nav-button-border-radius: ${this.options.theme.navButtonBorderRadius};\n          \n          /* \u53f3\u4e0a\u89d2\u5173\u95ed\u6309\u94ae\u53d8\u91cf */\n          --top-close-btn-size: ${this.options.theme.topCloseBtnSize};\n          --top-close-btn-top: ${this.options.theme.topCloseBtnTop};\n          --top-close-btn-right: ${this.options.theme.topCloseBtnRight};\n          --top-close-btn-font-size: ${this.options.theme.topCloseBtnFontSize};\n          --top-close-btn-bg-color: ${this.options.theme.topCloseBtnBgColor};\n          --top-close-btn-hover-bg: ${this.options.theme.topCloseBtnHoverBg};\n          \n          /* \u4fe1\u606f\u680f\u76f8\u5173\u53d8\u91cf */\n          --info-bg-color: ${this.options.theme.infoBgColor};\n          --info-border-radius: ${this.options.theme.infoBorderRadius};\n          --info-padding: ${this.options.theme.infoPadding};\n          --info-font-size: ${this.options.theme.infoFontSize};\n          --info-top: ${this.options.theme.infoTop};\n          --info-left: ${this.options.theme.infoLeft};\n          \n          /* \u7f29\u653e\u6307\u793a\u5668\u53d8\u91cf */\n          --zoom-indicator-bg: ${this.options.theme.zoomIndicatorBg};\n          --zoom-indicator-border-radius: ${this.options.theme.zoomIndicatorBorderRadius};\n          --zoom-indicator-padding: ${this.options.theme.zoomIndicatorPadding};\n          --zoom-indicator-font-size: ${this.options.theme.zoomIndicatorFontSize};\n          --zoom-indicator-top: ${this.options.theme.zoomIndicatorTop};\n          --zoom-indicator-left: ${this.options.theme.zoomIndicatorLeft};\n          \n          /* \u901a\u7528\u53d8\u91cf */\n          --active-color: ${this.options.theme.activeColor};\n          --text-color: ${this.options.theme.textColor};\n          --shadow-color: ${this.options.theme.shadowColor};\n          --transition-speed: ${this.options.theme.transitionSpeed};\n          \n          /* \u7f29\u7565\u56fe\u76f8\u5173\u53d8\u91cf */\n          --thumb-max-width: ${this.options.theme.thumbMaxWidth};\n          --thumb-gap: ${this.options.theme.thumbGap};\n          --thumb-padding: ${this.options.theme.thumbPadding};\n          --thumb-item-width: ${this.options.theme.thumbItemWidth};\n          --thumb-item-height: ${this.options.theme.thumbItemHeight};\n        }\n\n        .images-viewer-container {\n          position: fixed;\n          left: 0;\n          top: 0;\n          inset: 0;\n          width: 100%;\n          height: 100%;\n          z-index: 9999;\n          opacity: 0;\n          transition: opacity var(--transition-speed) ease;\n          touch-action: none;\n          -webkit-user-select: none;\n          user-select: none;\n          display: none;\n          background-color: var(--viewer-bg-color);\n          overflow: hidden;\n        }\n\n        .images-viewer-container::backdrop,\n        .images-viewer-container:fullscreen {\n          background-color: var(--viewer-bg-color);\n        }\n\n        /* \u56fe\u7247\u5bb9\u5668\u6837\u5f0f */\n        .images-viewer-image-container {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100%;\n          z-index: 2;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          overflow: hidden;\n        }\n\n        /* \u56fe\u7247\u6837\u5f0f */\n        .images-viewer-image {\n          position: relative;\n          object-fit: contain;\n          cursor: grab;\n          transition: transform 0.1s ease-out, opacity var(--transition-speed) ease;\n          transform-origin: center center;\n          opacity: 0;\n          box-shadow: 0 8px 25px var(--shadow-color);\n          border-radius: 4px;\n          user-select: none;\n          touch-action: none;\n        }\n\n        .images-viewer-image.loaded {\n          opacity: 1;\n        }\n\n        .images-viewer-image.dragging {\n          cursor: grabbing;\n          transition: none;\n        }\n\n        /* \u52a0\u8f7d\u6307\u793a\u5668 */\n        .images-viewer-loading {\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          transform: translate(-50%, -50%);\n          background-color: rgba(127, 127, 127, 0.7);\n          padding: 20px 30px;\n          border-radius: 10px;\n          display: flex;\n          align-items: center;\n          gap: 15px;\n          color: var(--text-color);\n          font-size: 18px;\n          opacity: 0;\n          pointer-events: none;\n          transition: opacity var(--transition-speed) ease;\n          z-index: 3;\n        }\n\n        .images-viewer-loading.active {\n          opacity: 1;\n        }\n\n        .images-viewer-loading-spinner {\n          width: 40px;\n          height: 40px;\n          border: 4px solid rgba(255, 255, 255, 0.2);\n          border-top-color: var(--active-color);\n          border-radius: 50%;\n          animation: imageViewerSpin 1s linear infinite;\n        }\n\n        @keyframes imageViewerSpin {\n          to {\n            transform: rotate(360deg);\n          }\n        }\n\n        /* \u53f3\u4e0a\u89d2\u5173\u95ed\u6309\u94ae\u6837\u5f0f */\n        .images-viewer-top-close-btn {\n          position: absolute;\n          top: var(--top-close-btn-top);\n          right: var(--top-close-btn-right);\n          width: var(--top-close-btn-size);\n          height: var(--top-close-btn-size);\n          border-radius: 50%;\n          background-color: var(--button-bg-color);\n          color: var(--text-color);\n          border: none;\n          font-size:  var(--top-close-btn-font-size);\n          cursor: pointer;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          transition: all var(--transition-speed);\n          z-index: 10;\n          box-shadow: 0 2px 8px var(--shadow-color);\n        }\n\n        .images-viewer-top-close-btn:hover {\n          background-color: var(--top-close-btn-hover-bg);\n          transform: scale(1.1);\n        }\n\n        /* \u7f29\u653e\u6307\u793a\u5668\u6837\u5f0f */\n        .images-viewer-zoom-indicator {\n          position: absolute;\n          top: var(--zoom-indicator-top);\n          left: var(--zoom-indicator-left);\n          color: var(--text-color);\n          background-color: var(--zoom-indicator-bg);\n          padding: var(--zoom-indicator-padding);\n          border-radius: var(--zoom-indicator-border-radius);\n          font-size: var(--zoom-indicator-font-size);\n          z-index: 10;\n          min-width: 60px;\n          text-align: center;\n          box-shadow: 0 2px 8px var(--shadow-color);\n          border: 1px solid rgba(255, 255, 255, 0.1);\n        }\n\n        /* \u4fe1\u606f\u680f\u6837\u5f0f */\n        .images-viewer-image-info {\n          position: absolute;\n          top: var(--info-top);\n          left: var(--info-left);\n          color: var(--text-color);\n          background-color: var(--info-bg-color);\n          padding: var(--info-padding);\n          border-radius: var(--info-border-radius);\n          font-size: var(--info-font-size);\n          z-index: 10;\n          max-width: calc(100% - 40px);\n          box-shadow: 0 4px 12px var(--shadow-color);\n          display: none;\n          border: 1px solid rgba(255, 255, 255, 0.1);\n        }\n\n        .images-viewer-image-info.visible {\n          display: block;\n          animation: imageViewerFadeIn 0.3s ease;\n        }\n\n        .images-viewer-image-info p {\n          margin: 4px 0;\n          line-height: 1.4;\n        }\n\n        .images-viewer-image-info .info-label {\n          color: #ddd;\n          margin-right: 5px;\n        }\n\n        .images-viewer-shortcuts-title {\n          margin-top: 10px;\n          padding-top: 10px;\n          border-top: 1px solid rgba(255, 255, 255, 0.1);\n          font-weight: bold;\n          margin-bottom: 5px;\n        }\n\n        @keyframes imageViewerFadeIn {\n          from {\n            opacity: 0;\n            transform: translateY(-10px);\n          }\n          to {\n            opacity: 1;\n            transform: translateY(0);\n          }\n        }\n\n        /* \u56fe\u7247\u8ba1\u6570\u5668 */\n        .images-viewer-image-counter {\n          position: absolute;\n          top: 20px;\n          left: 50%;\n          transform: translateX(-50%);\n          color: var(--text-color);\n          background-color: var(--info-bg-color);\n          padding: 6px 12px;\n          border-radius: 18px;\n          font-size: 14px;\n          z-index: 10;\n          box-shadow: 0 2px 8px var(--shadow-color);\n        }\n\n        /* \u56fe\u7247\u6807\u9898\u663e\u793a */\n        .images-viewer-image-title {\n          position: absolute;\n          top: 60px;\n          left: 50%;\n          transform: translateX(-50%);\n          color: var(--text-color);\n          padding: 4px 12px;\n          border-radius: 18px;\n          font-size: 12px;\n          z-index: 10;\n          max-width: 80%;\n          text-align: center;\n          white-space: nowrap;\n          overflow: hidden;\n          text-overflow: ellipsis;\n        }\n\n        /* \u5bfc\u822a\u6309\u94ae */\n        .images-viewer-nav-buttons {\n          position: absolute;\n          top: 50%;\n          left: 0;\n          right: 0;\n          transform: translateY(-50%);\n          display: flex;\n          justify-content: space-between;\n          pointer-events: none;\n          z-index: 5;\n          padding: 0 10px;\n        }\n\n        .images-viewer-nav-btn {\n          width: var(--nav-button-size);\n          height: var(--nav-button-size);\n          border-radius: var(--nav-button-border-radius);\n          background-color: var(--nav-button-bg-color);\n          color: var(--text-color);\n          border: none;\n          font-size: var(--nav-button-font-size);\n          cursor: pointer;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          transition: all 0.2s;\n          pointer-events: auto;\n          opacity: 0.9;\n          box-shadow: 0 2px 8px var(--shadow-color);\n          z-index: 6;\n        }\n\n        .images-viewer-nav-btn:hover {\n          background-color: var(--nav-button-hover-bg);\n          opacity: 1;\n          transform: scale(1.1);\n        }\n\n        .images-viewer-nav-btn:disabled {\n          opacity: 0.3;\n          cursor: not-allowed;\n          transform: none;\n        }\n\n        /* \u5de5\u5177\u680f\u6837\u5f0f */\n        .images-viewer-toolbar {\n          position: absolute;\n          bottom: var(--toolbar-bottom);\n          left: 50%;\n          transform: translateX(-50%);\n          background-color: var(--toolbar-bg-color);\n          padding: var(--toolbar-padding);\n          border-radius: var(--toolbar-border-radius);\n          display: flex;\n          gap: 2px;\n          z-index: 10;\n          box-shadow: 0 6px 25px var(--shadow-color);\n          max-width: calc(100% - 40px);\n          overflow-x: auto;\n          overflow-y: hidden;\n          border: 1px solid rgba(255, 255, 255, 0.1);\n          scrollbar-width: none;\n          -ms-overflow-style: none;\n          -webkit-overflow-scrolling: touch;\n        }\n\n        .images-viewer-toolbar::-webkit-scrollbar {\n          display: none;\n        }\n\n        .images-viewer-tool-btn {\n          width: var(--button-size);\n          height: var(--button-size);\n          background-color: transparent;\n          border: none;\n          color: var(--text-color);\n          cursor: pointer;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          font-size: var(--button-font-size);\n          transition: all 0.2s;\n          flex-shrink: 0;\n          position: relative;\n          border-radius: var(--button-border-radius);\n          margin: 0 2px;\n          z-index: 11;\n          line-height: 1;\n        }\n\n        .images-viewer-tool-btn:hover {\n          background-color: var(--button-hover-bg);\n          transform: translateY(-2px);\n          box-shadow: 0 4px 10px var(--shadow-color);\n        }\n\n        .images-viewer-tool-btn:active {\n          background-color: rgba(255, 255, 255, 0.3);\n          transform: translateY(0);\n        }\n\n        .images-viewer-tool-btn:disabled {\n          opacity: 0.5;\n          cursor: not-allowed;\n        }\n\n        /* \u7f29\u7565\u56fe\u5bb9\u5668 */\n        .images-viewer-thumbnails-container {\n          position: absolute;\n          bottom: 90px;\n          left: 50%;\n          max-width: var(--thumb-max-width);\n          transform: translateX(-50%);\n          padding: 10px var(--thumb-padding);\n          background-color: var(--toolbar-bg-color);\n          border-radius: 12px;\n          display: flex;\n          gap: var(--thumb-gap);\n          overflow-x: auto;\n          scrollbar-width: none;\n          -ms-overflow-style: none;\n          z-index: 10;\n          box-shadow: 0 3px 15px var(--shadow-color);\n          -webkit-overflow-scrolling: touch;\n          border: 1px solid rgba(255, 255, 255, 0.1);\n        }\n\n        .images-viewer-thumbnails-container::-webkit-scrollbar {\n          display: none;\n        }\n\n        .images-viewer-thumbnail-item {\n          width: var(--thumb-item-width);\n          height: var(--thumb-item-height);\n          border: 2px solid transparent;\n          border-radius: 6px;\n          overflow: hidden;\n          cursor: pointer;\n          flex-shrink: 0;\n          transition: all 0.2s;\n          z-index: 11;\n          position: relative;\n          opacity: 0.6;\n        }\n\n        .images-viewer-thumbnail-item img {\n          width: 100%;\n          height: 100%;\n          object-fit: cover;\n        }\n\n        .images-viewer-thumbnail-item.active {\n          border-color: var(--active-color);\n          transform: scale(1.2);\n          opacity: 1;\n          box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);\n        }\n\n        /* \u7f29\u7565\u56fe\u52a0\u8f7d\u72b6\u6001 */\n        .images-viewer-thumbnail-loading {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100%;\n          background-color: rgba(0, 0, 0, 0.3);\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          z-index: 1;\n        }\n\n        .loading-spinner {\n          width: 20px;\n          height: 20px;\n          border: 2px solid rgba(255, 255, 255, 0.3);\n          border-top: 2px solid var(--active-color);\n          border-radius: 50%;\n          animation: spin 1s linear infinite;\n        }\n\n        .loading-error {\n          color: #ff6b6b;\n          font-size: 10px;\n          text-align: center;\n          padding: 2px;\n        }\n\n        @keyframes spin {\n          0% { transform: rotate(0deg); }\n          100% { transform: rotate(360deg); }\n        }\n\n        .images-viewer-thumbnail-item:hover {\n          transform: scale(1.2);\n          opacity: 0.9;\n        }\n      `,document.head.appendChild(t)}createOptimizedElements(){this.container=document.createElement("div"),this.container.className="images-viewer-container",document.body.appendChild(this.container),this.imageContainer=document.createElement("div"),this.imageContainer.className="images-viewer-image-container",this.container.appendChild(this.imageContainer),this.image=document.createElement("img"),this.image.className="images-viewer-image",this.image.alt="Preview image",this.image.crossOrigin="anonymous",this.imageContainer.appendChild(this.image),this.loading=document.createElement("div"),this.loading.className="images-viewer-loading",this.loading.innerHTML=`\n        <div class="images-viewer-loading-spinner"></div>\n        <div>${this.options.i18n.buttons.loading}</div>\n      `,this.imageContainer.appendChild(this.loading),this.options.buttons.topClose&&(this.topCloseBtn=document.createElement("button"),this.topCloseBtn.className="images-viewer-top-close-btn",this.topCloseBtn.textContent="\xd7",this.topCloseBtn.title=this.options.i18n.buttons.close,this.container.appendChild(this.topCloseBtn)),this.zoomIndicator=document.createElement("div"),this.zoomIndicator.className="images-viewer-zoom-indicator",this.zoomIndicator.textContent="100%",this.container.appendChild(this.zoomIndicator),this.options.buttons.info&&(this.imageInfoPanel=document.createElement("div"),this.imageInfoPanel.className="images-viewer-image-info "+(this.imageInfoVisible?"visible":""),this.container.appendChild(this.imageInfoPanel)),this.images.length>1&&(this.counter=document.createElement("div"),this.counter.className="images-viewer-image-counter",this.container.appendChild(this.counter)),this.imageTitle=document.createElement("div"),this.imageTitle.className="images-viewer-image-title",this.container.appendChild(this.imageTitle),this.images.length>1&&(this.options.buttons.prev||this.options.buttons.next)&&this.createNavButtons(),this.images.length>1&&this.options.buttons.thumbnails&&this.createThumbnails(),this.createToolbar()}createNavButtons(){const t=document.createElement("div");t.className="images-viewer-nav-buttons",this.addEvent(t,"click",t=>{t.stopPropagation()}),this.options.buttons.prev&&(this.prevBtn=document.createElement("button"),this.prevBtn.className="images-viewer-nav-btn images-viewer-prev-btn",this.prevBtn.textContent="\u2190",this.prevBtn.title=this.options.i18n.buttons.prev,this.addEvent(this.prevBtn,"click",t=>{t.stopPropagation(),this.prev()}),t.appendChild(this.prevBtn)),this.options.buttons.next&&(this.nextBtn=document.createElement("button"),this.nextBtn.className="images-viewer-nav-btn images-viewer-next-btn",this.nextBtn.textContent="\u2192",this.nextBtn.title=this.options.i18n.buttons.next,this.addEvent(this.nextBtn,"click",t=>{t.stopPropagation(),this.next()}),t.appendChild(this.nextBtn)),this.container.appendChild(t)}createToolbar(){const t=document.createElement("div");t.className="images-viewer-toolbar",this.addEvent(t,"click",t=>{t.stopPropagation()}),this.addEvent(t,"wheel",i=>{i.preventDefault(),i.stopPropagation(),t.scrollLeft+=i.deltaY}),this.images.length>1&&(this.options.buttons.prev&&(this.toolbarPrevBtn=this.createToolButton("\u2190",()=>this.prev()),t.appendChild(this.toolbarPrevBtn)),this.options.buttons.next&&(this.toolbarNextBtn=this.createToolButton("\u2192",()=>this.next()),t.appendChild(this.toolbarNextBtn))),this.options.buttons.zoomOut&&(this.zoomOutBtn=this.createToolButton("\u2212",()=>this.zoom(-.1)),t.appendChild(this.zoomOutBtn)),this.options.buttons.zoomIn&&(this.zoomInBtn=this.createToolButton("+",()=>this.zoom(.1)),t.appendChild(this.zoomInBtn)),this.options.buttons.rotateLeft&&(this.rotateLeftBtn=this.createToolButton("\u21ba",()=>this.rotate(-90)),t.appendChild(this.rotateLeftBtn)),this.options.buttons.rotateRight&&(this.rotateRightBtn=this.createToolButton("\u21bb",()=>this.rotate(90)),t.appendChild(this.rotateRightBtn)),this.options.buttons.reset&&(this.resetBtn=this.createToolButton("\u27f3",()=>this.reset()),t.appendChild(this.resetBtn)),this.options.buttons.originalSize&&(this.originalSizeBtn=this.createToolButton("1:1",()=>this.showOriginalSize()),t.appendChild(this.originalSizeBtn)),this.options.buttons.info&&(this.infoBtn=this.createToolButton("\u24d8",()=>this.toggleImageInfo()),t.appendChild(this.infoBtn)),this.options.buttons.download&&(this.downloadBtn=this.createToolButton("\u21a1",()=>this.downloadImage()),t.appendChild(this.downloadBtn)),this.options.buttons.fullscreen&&(this.fullscreenBtn=this.createToolButton("\u26f6",()=>this.toggleFullscreen()),t.appendChild(this.fullscreenBtn)),this.options.buttons.close&&(this.closeBtn=this.createToolButton("\xd7",()=>this.close()),t.appendChild(this.closeBtn)),this.options.customButtons&&this.options.customButtons.forEach(i=>{t.appendChild(this.createToolButton(i[0],i[1]))}),this.container.appendChild(t)}createToolButton(t,i){const s=document.createElement("button");s.className="images-viewer-tool-btn";const n=document.createElement("span");return n.textContent=t,s.appendChild(n),this.addEvent(s,"click",t=>{t.stopPropagation(),i()}),s}createThumbnails(){const t=document.createElement("div");t.className="images-viewer-thumbnails-container",this.addEvent(t,"click",t=>{t.stopPropagation()}),this.addEvent(t,"wheel",i=>{i.preventDefault(),i.stopPropagation(),t.scrollLeft+=i.deltaY});const i=parseInt(this.options.theme.thumbItemWidth),s=parseInt(this.options.theme.thumbGap),n=parseInt(this.options.theme.thumbPadding),e=this.options.preloadCount,o=window.innerWidth-2*n,h=Math.ceil(o/(i+s)),a=Math.min(h+e,this.images.length);for(let i=0;i<a;i++)this.createThumbnailItem(t,i);let r=a;this.addEvent(t,"scroll",()=>{const i=t.scrollLeft,s=t.clientWidth;if(i>t.scrollWidth-s-s&&r<this.images.length){const i=Math.min(h,this.images.length-r);for(let s=r;s<r+i;s++)this.createThumbnailItem(t,s);r+=i}}),this.container.appendChild(t),this.thumbContainer=t}createThumbnailItem(t,i){const s=this.getThumbnailUrl(i),n=this.getImageUrl(i),e=document.createElement("div");e.className="images-viewer-thumbnail-item "+(i===this.currentIndex?"active":""),e.dataset.index=i;const o=new Image;o.crossOrigin="anonymous";const h=document.createElement("div");h.className="images-viewer-thumbnail-loading",h.innerHTML='<div class="loading-spinner"></div>',e.appendChild(h),this.loadedThumbnails.has(s)?(o.src=this.loadedThumbnails.get(s).src,h.remove()):this.loadingThumbnails.has(s)?(h.style.display="flex",o.onload=()=>{h.remove(),o.onload=null,o.onerror=null},o.onerror=()=>{h.remove(),o.onload=null,o.onerror=null},o.src=s):this.loadedImages.has(n)?(o.src=this.loadedImages.get(n).src,h.remove()):(this.loadingThumbnails.set(s,o),h.style.display="flex",o.onload=()=>{this.loadedThumbnails.set(s,o),this.loadingThumbnails.delete(s),h.remove(),o.onload=null,o.onerror=null},o.onerror=()=>{this.loadingThumbnails.delete(s),h.remove(),o.onload=null,o.onerror=null},o.src=s),e.appendChild(o),this.addEvent(e,"click",t=>{t.stopPropagation();const i=parseInt(e.dataset.index);i!==this.currentIndex&&(this.currentIndex=i,this.loadCurrentImage(),this.updateThumbnails())}),t.appendChild(e)}updateThumbnailDisplay(t){if(!this.thumbContainer)return;const i=this.thumbContainer.querySelector(`[data-index="${t}"]`);if(i){const s=this.getThumbnailUrl(t),n=i.querySelector("img");if(n&&this.loadedThumbnails.has(s)){const t=this.loadedThumbnails.get(s);n.src=t.src;const e=i.querySelector(".images-viewer-thumbnail-loading");e&&e.remove()}}}updateImageTransform(){const t=`\n        translate(${this.translateX}px, ${this.translateY}px)\n        scale(${this.scale})\n        rotate(${this.rotation}deg)\n      `;this.image.style.transform=t}fitImageToScreen(t,i){this.scale=1,this.translateX=0,this.translateY=0;const s=this.imageContainer.clientWidth,n=this.imageContainer.clientHeight,e=this.rotation%360;let o=t,h=i;if(90!==e&&270!==e||(o=i,h=t),o>s||h>n){const t=s/o,i=n/h;this.scale=Math.min(t,i)}this.scale=Math.max(.1,this.scale),this.updateImageTransform(),this.updateZoomIndicator()}parseImageOptions(t){this.images=[],this.thumbnails=[],"string"==typeof t?this.images=[t]:Array.isArray(t)?this.images=t.filter(t=>"string"==typeof t&&""!==t.trim()):"object"==typeof t&&t.images&&Array.isArray(t.images)&&(this.images=t.images.map(t=>"string"==typeof t?t:"object"==typeof t&&t.url?(t.thumbnail&&this.thumbnails.push(t.thumbnail),t):null).filter(Boolean))}getImageUrl(t){const i=this.images[t];if("string"==typeof i)return i;if("object"==typeof i){if("function"==typeof i.url)return i.url(i,t);if(i.url)return i.url}return""}getThumbnailUrl(t){if(this.thumbnails[t]){const i=this.thumbnails[t];return"function"==typeof i?i(this.images[t],t):i}return this.getImageUrl(t)}getImageTitle(t){const i=this.images[t];if("object"==typeof i){if("function"==typeof i.title)return i.title(i,t);if(i.title)return i.title}return""}preloadImages(){const t=this.options.preloadCount;if(t<=0)return;const i=Math.max(0,this.currentIndex-t),s=Math.min(this.images.length-1,this.currentIndex+t);for(let t=i;t<=s;t++)this.loadImageAtIndex(t)}addToCache(t,i){this.loadedImages.set(t,i);const s=this.options.maxCacheSize;if(s>0&&this.loadedImages.size>s){const t=this.loadedImages.keys().next().value;this.loadedImages.delete(t)}}loadImageAtIndex(t){const i=this.getImageUrl(t);if(!i||this.loadedImages.has(i)||this.loadingImages.has(i))return;const s=new Image;s.onload=()=>{this.addToCache(i,s),this.loadingImages.delete(i),this.imageMetadata[t]={name:this.extractFileName(i),width:s.naturalWidth||s.width,height:s.naturalHeight||s.height},s.onload=null,s.onerror=null},s.onerror=()=>{this.loadingImages.delete(i),s.onload=null,s.onerror=null},s.crossOrigin="anonymous",s.src=i,this.loadingImages.set(i,s)}extractFileName(t){try{const i=new URL(t).pathname.split("/");let s=i[i.length-1];const n=s.indexOf("?");return n>-1&&(s=s.substring(0,n)),s||"unknown-image"}catch(t){return"unknown-image"}}loadCurrentImage(t){if(void 0!==t&&(this.currentIndex=t),this.hasPreviousState=!1,this.isToggledState=!1,this.images.length>1&&this.counter){let t=null;this.options.onCounter&&(t=this.options.onCounter({image:this.images[this.currentIndex],index:this.currentIndex,currentPage:this.currentIndex+1,totalPages:this.images.length,scale:this.scale,rotation:this.rotation})),t?this.counter.innerHTML=t:this.counter.textContent=`${this.currentIndex+1} / ${this.images.length}`}const i=this.getImageTitle(this.currentIndex);this.imageTitle&&i?(this.imageTitle.innerHTML=i,this.imageTitle.style.display="block"):this.imageTitle.style.display="none",this.updateNavButtons(),this.updateThumbnails(),this.scale=1,this.rotation=0,this.translateX=0,this.translateY=0;const s=this.getImageUrl(this.currentIndex);this.loadedImages.has(s)||this.loadingImages.has(s)||this.loadImageAtIndex(this.currentIndex),this.preloadAdjacentImages(),this.isImageLoaded()}preloadAdjacentImages(){const t=Math.max(0,this.currentIndex-2),i=Math.min(this.images.length-1,this.currentIndex+2);for(let s=t;s<=i;s++)this.loadThumbnailAtIndex(s);for(let s=t;s<=i;s++)this.loadImageAtIndex(s)}loadThumbnailAtIndex(t){const i=this.getThumbnailUrl(t);if(!i||this.loadedThumbnails.has(i)||this.loadingThumbnails.has(i))return;const s=new Image;s.onload=()=>{this.loadedThumbnails.set(i,s),this.loadingThumbnails.delete(i),this.updateThumbnailDisplay(t),s.onload=null,s.onerror=null},s.onerror=()=>{this.loadingThumbnails.delete(i),s.onload=null,s.onerror=null},s.crossOrigin="anonymous",s.src=i,this.loadingThumbnails.set(i,s)}isImageLoaded(){const t=this.getImageUrl(this.currentIndex),i=this.loadedImages.has(t),s=this.loadingImages.has(t);if(this.showLoading(),this.image.classList.remove("loaded"),i){this.image.src="";const i=this.loadedImages.get(t),s=document.createElement("canvas"),n=s.getContext("2d");s.width=i.naturalWidth||i.width,s.height=i.naturalHeight||i.height,n.drawImage(i,0,0),s.toBlob(t=>{if(t){const i=URL.createObjectURL(t);this.image.src=i,this.t&&(URL.revokeObjectURL(this.t),this.t=null),this.t=i}});const e=this.imageMetadata[this.currentIndex];return e&&(this.fitImageToScreen(e.width,e.height),this.updateImageInfo()),this.image.classList.add("loaded"),void this.hideLoading()}if(s){const i=()=>{this.loadedImages.has(t)?this.isImageLoaded():this.loadingImages.has(t)?setTimeout(i,100):this.hideLoading()};return void setTimeout(i,100)}const n=new Image;n.onload=()=>{this.addToCache(t,n),this.loadingImages.delete(t),this.imageMetadata[this.currentIndex]={name:this.extractFileName(t),width:n.naturalWidth||n.width,height:n.naturalHeight||n.height},this.isImageLoaded()},n.onerror=()=>{this.loadingImages.delete(t),this.hideLoading()},n.crossOrigin="anonymous",n.src=t,this.loadingImages.set(t,n)}updateZoomIndicator(){const t=Math.round(100*this.scale);if(this.options.onZoomIndicator){const i=this.options.onZoomIndicator({image:this.images[this.currentIndex],index:this.currentIndex,scale:this.scale,percentage:t,rotation:this.rotation});if(i)return void(this.zoomIndicator.innerHTML=i)}this.zoomIndicator.textContent=`${t}%`}updateImageInfo(){if(!this.options.buttons.info||!this.imageInfoPanel)return;const t=this.imageMetadata[this.currentIndex];if(!t)return;const i=this.options.i18n;let s="";this.options.onInfo&&(s=this.options.onInfo({image:this.images[this.currentIndex],index:this.currentIndex,metadata:t,scale:this.scale,rotation:this.rotation}),s)||(this.options.imageInfo.showName&&(s+=`<p><span class="info-label">${i.info.name}</span> ${t.name}</p>`),this.options.imageInfo.showDimensions&&(s+=`<p><span class="info-label">${i.info.dimensions}</span> ${t.width} \xd7 ${t.height}</p>`),s+=`\n          <div class="images-viewer-shortcuts-title">${i.info.shortcuts}</div>\n          <p><span class="info-label">${i.info.zoomIn}</span> \u2191 +</p>\n          <p><span class="info-label">${i.info.zoomOut}</span> \u2193 -</p>\n          <p><span class="info-label">${i.info.prev}</span> \u2190</p>\n          <p><span class="info-label">${i.info.next}</span> \u2192</p>\n          <p><span class="info-label">${i.info.reset}</span> 0</p>\n          <p><span class="info-label">${i.info.fullscreen}</span> F</p>\n          <p><span class="info-label">${i.info.info}</span> I</p>\n          <p><span class="info-label">${i.info.close}</span> ESC</p>\n        `),this.imageInfoPanel.innerHTML=s}toggleImageInfo(){this.options.buttons.info&&this.imageInfoPanel&&(this.imageInfoVisible=!this.imageInfoVisible,this.imageInfoVisible?this.imageInfoPanel.classList.add("visible"):this.imageInfoPanel.classList.remove("visible"))}updateNavButtons(){if(this.images.length<=1)return;const t=!!this.options.loop||this.currentIndex>0,i=!!this.options.loop||this.currentIndex<this.images.length-1;this.prevBtn&&(this.prevBtn.disabled=!t),this.nextBtn&&(this.nextBtn.disabled=!i),this.toolbarPrevBtn&&(this.toolbarPrevBtn.disabled=!t),this.toolbarNextBtn&&(this.toolbarNextBtn.disabled=!i)}updateThumbnails(){if(this.images.length<=1)return;document.querySelectorAll(".images-viewer-thumbnail-item").forEach(t=>{t.classList.remove("active")});const t=document.querySelector(`.images-viewer-thumbnail-item[data-index="${this.currentIndex}"]`);t&&(t.classList.add("active"),t.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"}))}showLoading(){this.loading&&this.loading.classList.add("active")}hideLoading(){this.loading&&this.loading.classList.remove("active")}prev(){if(this.images.length<=1)return;let t=this.currentIndex-1;t<0&&(t=this.options.loop?this.images.length-1:0),t!==this.currentIndex&&(this.currentIndex=t,this.loadCurrentImage()),this.options.onChange&&this.options.onChange(this.currentIndex,"prev")}next(){if(this.images.length<=1)return;let t=this.currentIndex+1;t>=this.images.length&&(t=this.options.loop?0:this.images.length-1),t!==this.currentIndex&&(this.currentIndex=t,this.loadCurrentImage()),this.options.onChange&&this.options.onChange(this.currentIndex,"next")}bindEvents(){this.topCloseBtn&&this.addEvent(this.topCloseBtn,"click",()=>this.close()),this.options.closeOnMaskClick&&this.addEvent(this.imageContainer,"click",t=>{t.target==this.imageContainer&&this.close()}),this.addEvent(document,"keydown",t=>this.handleKeydown(t));const t=function(t){let i,s=0;return function(...n){const e=Date.now(),o=e-s;o>300?(t.apply(this,n),s=e):(clearTimeout(i),i=setTimeout(()=>{t.apply(this,n),s=e},300-o))}}(()=>{this.handleResize()});this.addEvent(window,"resize",t),this.bindDragEvents(),this.bindTouchEvents()}addEvent(t,i,s,n){t.addEventListener(i,s,n);const e=`${i}-${Date.now()}-${Math.random()}`;this.eventListeners.set(e,{element:t,event:i,handler:s})}removeAllEvents(){this.eventListeners.forEach(({element:t,event:i,handler:s})=>{t.removeEventListener(i,s)}),this.eventListeners.clear()}rotatePoint(t,i,s){const n=s*Math.PI,e=Math.cos(n),o=Math.sin(n);return{x:t*e-i*o,y:t*o+i*e}}bindDragEvents(){this.addEvent(this.image,"mousedown",t=>{0===t.button&&(this.isDragging=!0,this.image.classList.add("dragging"),this.startX=t.clientX,this.startY=t.clientY,this.startTranslateX=this.translateX,this.startTranslateY=this.translateY,t.preventDefault())}),this.addEvent(document,"mousemove",t=>{if(!this.isDragging)return;const i=t.clientX-this.startX,s=t.clientY-this.startY,n=this.rotatePoint(i,s,-this.rotation);if(this.translateX=this.startTranslateX+n.x,this.translateY=this.startTranslateY+n.y,this.updateImageTransform(),this.options.onDrag){const t=this.images[this.currentIndex];this.options.onDrag({image:t,index:this.currentIndex,translateX:this.translateX,translateY:this.translateY})}t.preventDefault()}),this.addEvent(document,"mouseup",()=>{this.isDragging&&(this.isDragging=!1,this.image.classList.remove("dragging"))}),this.addEvent(document,"mouseleave",()=>{this.isDragging&&(this.isDragging=!1,this.image.classList.remove("dragging"))}),this.addEvent(this.imageContainer,"wheel",t=>{t.preventDefault();const i=this.imageContainer.getBoundingClientRect(),s=t.clientX-i.left,n=t.clientY-i.top,e=t.deltaY>0?-.05:.05;this.zoomAtPoint(e,s,n)}),this.addEvent(this.image,"dblclick",t=>{t.preventDefault();const i=this.imageContainer.getBoundingClientRect(),s=t.clientX-i.left,n=t.clientY-i.top;if(Math.abs(this.scale-1)<.01)if(this.hasPreviousState)this.scale=this.lastScale,this.translateX=this.lastTranslateX,this.translateY=this.lastTranslateY,this.hasPreviousState=!1;else{this.lastScale=this.scale,this.lastTranslateX=this.translateX,this.lastTranslateY=this.translateY,this.hasPreviousState=!0;const t=1.5,i=t/this.scale,e=this.imageContainer.clientWidth,o=this.imageContainer.clientHeight;this.translateX=this.translateX*i+s-e/2-i*(s-e/2),this.translateY=this.translateY*i+n-o/2-i*(n-o/2),this.scale=t}else{this.lastScale=this.scale,this.lastTranslateX=this.translateX,this.lastTranslateY=this.translateY,this.hasPreviousState=!0;const t=1,i=t/this.scale,e=this.imageContainer.clientWidth,o=this.imageContainer.clientHeight;this.translateX=this.translateX*i+s-e/2-i*(s-e/2),this.translateY=this.translateY*i+n-o/2-i*(n-o/2),this.scale=t}this.updateImageTransform(),this.updateZoomIndicator()})}bindTouchEvents(){this.addEvent(this.image,"touchstart",t=>{if(this.touchState.lastTouchTime=Date.now(),1===t.touches.length)this.touchState.isPinching||(this.touchState.isDragging=!0,this.touchState.startX=t.touches[0].clientX,this.touchState.startY=t.touches[0].clientY,this.touchState.startTranslateX=this.translateX,this.touchState.startTranslateY=this.translateY,this.image.classList.add("dragging"));else if(2===t.touches.length){this.touchState.isPinching=!0,this.touchState.isDragging=!1,this.image.classList.remove("dragging");const i=t.touches[0],s=t.touches[1];this.touchState.initialDistance=this.getDistance(i,s),this.touchState.initialScale=this.scale,this.touchState.initialTranslateX=this.translateX,this.touchState.initialTranslateY=this.translateY,this.touchState.centerX=(i.clientX+s.clientX)/2,this.touchState.centerY=(i.clientY+s.clientY)/2;const n=this.imageContainer.getBoundingClientRect(),e=this.touchState.centerX-n.left,o=this.touchState.centerY-n.top;this.calculateRelativeCenter(e,o),this.touchState.movementCount=0,this.touchState.scaleRatio=1}t.preventDefault()}),this.addEvent(this.image,"touchmove",t=>{if(!(Date.now()-this.touchState.lastTouchTime<16)){if(this.touchState.lastTouchTime=Date.now(),1===t.touches.length&&this.touchState.isDragging&&!this.touchState.isPinching){const i=t.touches[0].clientX-this.touchState.startX,s=t.touches[0].clientY-this.touchState.startY,n=this.rotatePoint(i,s,-this.rotation);if(this.touchState.movementCount++,(this.touchState.movementCount>this.touchState.stabilizationThreshold||Math.abs(i)>5||Math.abs(s)>5)&&(this.translateX=this.touchState.startTranslateX+n.x,this.translateY=this.touchState.startTranslateY+n.y,this.updateImageTransform(),this.options.drag)){const t=this.images[this.currentIndex];this.options.drag({image:t,index:this.currentIndex,translateX:this.translateX,translateY:this.translateY})}}else if(2===t.touches.length&&this.touchState.isPinching){const i=t.touches[0],s=t.touches[1],n=this.getDistance(i,s);this.touchState.scaleRatio=n/this.touchState.initialDistance;const e=this.touchState.initialScale*this.touchState.scaleRatio,o=this.options.minScale,h=this.options.maxScale,a=Math.max(o,Math.min(h,e));if(Math.abs(a-this.scale)>this.touchState.minScaleChange){const t=a/this.touchState.initialScale,i=this.imageContainer.getBoundingClientRect(),s=i.width,n=i.height;if(this.translateX=this.touchState.initialTranslateX*t+this.touchState.centerX-s/2-t*(this.touchState.centerX-s/2),this.translateY=this.touchState.initialTranslateY*t+this.touchState.centerY-n/2-t*(this.touchState.centerY-n/2),this.scale=a,this.updateImageTransform(),this.updateZoomIndicator(),this.options.onZoom){const t=this.images[this.currentIndex];this.options.onZoom({image:t,index:this.currentIndex,scale:this.scale,oldScale:this.touchState.initialScale})}}}t.preventDefault()}}),this.addEvent(this.image,"touchend",t=>{0===t.touches.length?(this.touchState.isDragging=!1,this.touchState.isPinching=!1,this.image.classList.remove("dragging")):1===t.touches.length&&this.touchState.isPinching&&(this.touchState.isPinching=!1,this.touchState.isDragging=!0,this.touchState.startX=t.touches[0].clientX,this.touchState.startY=t.touches[0].clientY,this.touchState.startTranslateX=this.translateX,this.touchState.startTranslateY=this.translateY,this.image.classList.add("dragging")),t.preventDefault()}),this.addEvent(this.image,"touchcancel",()=>{this.touchState.isDragging=!1,this.touchState.isPinching=!1,this.image.classList.remove("dragging")})}getDistance(t,i){const s=t.clientX-i.clientX,n=t.clientY-i.clientY;return Math.sqrt(s*s+n*n)}calculateRelativeCenter(t,i){if(!this.imageMetadata[this.currentIndex])return;const s=this.imageContainer.clientWidth,n=this.imageContainer.clientHeight/2,e=t-s/2-this.translateX,o=i-n-this.translateY;this.touchState.relativeCenterX=e/this.scale,this.touchState.relativeCenterY=o/this.scale}zoomAtPoint(t,i,s){const n=this.scale,e=this.options.maxScale,o=this.options.minScale,h=Math.max(o,Math.min(e,this.scale+t));if(h===this.scale)return;const a=h/n,r=this.imageContainer.clientWidth,l=this.imageContainer.clientHeight;if(this.translateX=this.translateX*a+i-r/2-a*(i-r/2),this.translateY=this.translateY*a+s-l/2-a*(s-l/2),this.scale=h,this.updateImageTransform(),this.updateZoomIndicator(),this.options.zoom){const t=this.images[this.currentIndex];this.options.zoom({image:t,index:this.currentIndex,scale:this.scale,oldScale:n})}}zoom(t){const i=this.imageContainer.clientWidth,s=this.imageContainer.clientHeight;this.zoomAtPoint(t,i/2,s/2)}rotate(t){const i=this.rotation,s=i+t;if(i===s)return;const n=this.imageContainer.getBoundingClientRect(),e=n.width/2,o=n.height/2,h=e+this.translateX,a=o+this.translateY;this.rotation=s,this.translateX=0,this.translateY=0;const r=this.imageMetadata[this.currentIndex];if(r){const t=this.calculateBoundingBox(r.width,r.height,s),i=t.width*this.scale,n=t.height*this.scale;this.translateX=(h-e)*(i/(i-this.translateX)),this.translateY=(a-o)*(n/(n-this.translateY))}if(this.updateImageTransform(),this.updateZoomIndicator(),this.options.onRotate){const t=this.images[this.currentIndex];this.options.onRotate({image:t,index:this.currentIndex,rotation:this.rotation,oldRotation:i})}}calculateBoundingBox(t,i,s){const n=s*Math.PI/180,e=Math.abs(Math.cos(n)),o=Math.abs(Math.sin(n));return{width:t*e+i*o,height:t*o+i*e}}reset(){this.rotation=0;const t=this.imageMetadata[this.currentIndex];t&&this.fitImageToScreen(t.width,t.height)}showOriginalSize(){this.rotation=0,this.scale=1,this.translateX=0,this.translateY=0,this.updateImageTransform(),this.updateZoomIndicator()}downloadImage(){const t=this.getImageUrl(this.currentIndex),i=this.imageMetadata[this.currentIndex];if(this.loadedImages.has(t)){const s=this.loadedImages.get(t);this.downloadFromImage(s,i)}}downloadFromImage(t,i){try{const s=document.createElement("canvas");s.width=t.naturalWidth||t.width,s.height=t.naturalHeight||t.height,s.getContext("2d").drawImage(t,0,0);const n=s.toDataURL("image/jpeg");this.downloadedImage(n,i)}catch(t){const s=this.getImageUrl(this.currentIndex);this.downloadedImage(s,i)}}downloadedImage(t,i){try{const s=document.createElement("a");s.href=t,s.download=i?i.name:"image.jpg",document.body.appendChild(s),s.click(),document.body.removeChild(s)}catch(t){}}toggleFullscreen(){document.fullscreenElement?document.exitFullscreen&&(document.exitFullscreen(),this.isFullscreen=!1):(this.container.requestFullscreen().catch(t=>{}),this.isFullscreen=!0)}handleKeydown(t){if("block"===this.container.style.display){switch(t.key){case"Escape":this.close();break;case"ArrowLeft":this.prev();break;case"ArrowRight":this.next();break;case"ArrowUp":case"+":case"=":this.zoom(.1);break;case"ArrowDown":case"-":this.zoom(-.1);break;case"0":this.reset();break;case"f":case"F":this.toggleFullscreen();break;case"i":case"I":this.toggleImageInfo()}t.preventDefault()}}handleResize(){const t=this.imageMetadata[this.currentIndex];if(!t)return;const i=this.imageContainer.clientWidth,s=this.imageContainer.clientHeight,n=this.rotation%360;let e=t.width,o=t.height;90!==n&&270!==n||(e=t.height,o=t.width);const h=Math.min(i/e,s/o),a=e*this.scale,r=o*this.scale,l=a>i||r>s;let c=this.scale;c=l?Math.max(.1,h):h>=1?1:h,Math.abs(c-this.scale)>.01&&(this.scale=c,this.translateX=0,this.translateY=0,this.updateImageTransform(),this.updateZoomIndicator()),this.updateThumbnailsOnResize()}updateThumbnailsOnResize(){if(!this.thumbContainer)return;const t=parseInt(this.options.theme.thumbItemWidth),i=parseInt(this.options.theme.thumbGap),s=parseInt(this.options.theme.thumbPadding),n=this.options.preloadCount,e=window.innerWidth-2*s,o=Math.ceil(e/(t+i)),h=Math.min(o+n,this.images.length),a=this.thumbContainer.querySelectorAll(".images-viewer-thumbnail-item").length;if(a<h){const t=h-a;for(let i=a;i<a+t;i++)i<this.images.length&&this.createThumbnailItem(this.thumbContainer,i)}}onShow(){this.container.style.display="block",setTimeout(()=>{this.container.style.opacity="1",this.options.onShow&&this.options.onShow(this.container)},10)}close(){this.removeAllEvents(),this.cleanup(),this.container.style.opacity="0",setTimeout(()=>{this.container.style.display="none";const t=document.getElementById("images-viewer-styles");t&&t.remove(),this.container&&this.container.remove(),this.options.onClose&&this.options.onClose()},300)}cleanup(){for(const[t,i]of this.loadingImages.entries())i.onload=null,i.onerror=null,i.src="";this.loadedImages.clear(),this.loadingImages.clear(),this.imageMetadata=[],this.t&&(URL.revokeObjectURL(this.t),this.t=null)}}},"object"==typeof exports&&"undefined"!=typeof module?module.exports=factory():"function"==typeof define&&define.amd?define(factory):(global="undefined"!=typeof globalThis?globalThis:global||self).ImagesViewer=factory();
+var global,factory;global=this,factory=function(){return class{constructor(t){if(this.defaultOptions={initialIndex:0,closeOnMaskClick:!1,loop:!0,preloadCount:3,maxCacheSize:30,minScale:.1,maxScale:5,retryOnError:!1,props:{url:"url",title:"title",thumbnail:"thumbnail"},buttons:{zoomIn:!0,zoomOut:!0,rotateLeft:!0,rotateRight:!0,reset:!0,download:!0,fullscreen:!0,prev:!0,next:!0,close:!0,topClose:!0,thumbnails:!0,info:!0,originalSize:!0},imageInfo:{visible:!1,showName:!0,showDimensions:!0},i18n:{info:{name:"\u540d\u79f0:",dimensions:"\u5c3a\u5bf8:",shortcuts:"\u5feb\u6377\u952e",zoomIn:"\u653e\u5927:",zoomOut:"\u7f29\u5c0f:",prev:"\u4e0a\u4e00\u5f20:",next:"\u4e0b\u4e00\u5f20:",reset:"\u91cd\u7f6e:",fullscreen:"\u5168\u5c4f:",info:"\u4fe1\u606f:",close:"\u5173\u95ed:"},buttons:{prev:"\u4e0a\u4e00\u5f20 (\u2190)",next:"\u4e0b\u4e00\u5f20 (\u2192)",close:"\u5173\u95ed (Esc)",loading:"\u52a0\u8f7d\u4e2d..."}},theme:{viewerBgColor:"rgba(0, 0, 0, 0.4)",toolbarBgColor:"rgba(150, 150, 150, 0.7)",toolbarBorderRadius:"30px",toolbarPadding:"8px 12px",toolbarBottom:"20px",buttonBgColor:"rgba(150, 150, 150, 0.7)",buttonHoverBg:"rgba(200, 200, 200, 0.4)",buttonSize:"40px",buttonFontSize:"20px",buttonBorderRadius:"50%",navButtonBgColor:"rgba(150, 150, 150, 0.7)",navButtonHoverBg:"rgba(200, 200, 200, 0.4)",navButtonSize:"50px",navButtonFontSize:"20px",navButtonBorderRadius:"50%",topCloseBtnSize:"50px",topCloseBtnTop:"20px",topCloseBtnRight:"20px",topCloseBtnFontSize:"24px",topCloseBtnBgColor:"rgba(150, 150, 150, 0.7)",topCloseBtnHoverBg:"rgba(200, 200, 200, 0.4)",infoBgColor:"rgba(150, 150, 150, 0.7)",infoBorderRadius:"12px",infoPadding:"10px 15px",infoFontSize:"13px",infoTop:"70px",infoLeft:"20px",zoomIndicatorBg:"rgba(150, 150, 150, 0.7)",zoomIndicatorBorderRadius:"18px",zoomIndicatorPadding:"6px 12px",zoomIndicatorFontSize:"14px",zoomIndicatorTop:"20px",zoomIndicatorLeft:"20px",activeColor:"rgba(100, 150, 255, 0.8)",textColor:"rgba(255, 255, 255, 0.9)",shadowColor:"rgba(0, 0, 0, 0.2)",transitionSpeed:"0.3s",thumbItemWidth:"70px",thumbItemHeight:"45px",thumbGap:"10px",thumbPadding:"15px",thumbMaxWidth:"90%"}},this.options={...this.defaultOptions,...t,buttons:{...this.defaultOptions.buttons,...t?.buttons||{}},imageInfo:{...this.defaultOptions.imageInfo,...t?.imageInfo||{}},props:{...this.defaultOptions.props,...t?.props||{}},i18n:{...this.defaultOptions.i18n,...t?.i18n||{},info:{...this.defaultOptions.i18n.info,...t?.i18n?.info||{}},buttons:{...this.defaultOptions.i18n.buttons,...t?.i18n?.buttons||{}}},theme:{...this.defaultOptions.theme,...t?.theme||{}}},this.parseImageOptions(t),0===this.images.length)throw new Error("No images URL");const i=Math.max(0,Math.min(this.options.initialIndex||0,this.images.length-1));this.currentIndex=i,this.scale=1,this.rotation=0,this.translateX=0,this.translateY=0,this.isDragging=!1,this.startX=0,this.startY=0,this.startTranslateX=0,this.startTranslateY=0,this.isFullscreen=!1,this.imageInfoVisible=this.options.imageInfo.visible,this.imageMetadata=[],this.loadedImages=new Map,this.loadingImages=new Map,this.failedImages=new Set,this.loadedThumbnails=new Map,this.loadingThumbnails=new Map,this.failedThumbnails=new Set,this.lastTapTime=0,this.lastScale=1,this.lastTranslateX=0,this.lastTranslateY=0,this.hasPreviousState=!1,this.isToggledState=!1,this.touchState={isDragging:!1,isPinching:!1,initialDistance:null,initialScale:null,initialTranslateX:null,initialTranslateY:null,centerX:null,centerY:null,relativeCenterX:null,relativeCenterY:null,lastTouchTime:0,startX:0,startY:0,startTranslateX:0,startTranslateY:0,minScaleChange:.005,scaleRatio:1,stabilizationThreshold:3,movementCount:0},this.eventListeners=new Map,this.injectStyles(),this.preloadImages(),this.createOptimizedElements(),this.bindEvents(),this.onShow(),this.loadCurrentImage()}injectStyles(){const t=document.createElement("style");t.id="images-viewer-styles",t.textContent=`\n        :root {\n          /* \u80cc\u666f\u76f8\u5173\u53d8\u91cf */\n          --viewer-bg-color: ${this.options.theme.viewerBgColor};\n          \n          /* \u5de5\u5177\u680f\u76f8\u5173\u53d8\u91cf */\n          --toolbar-bg-color: ${this.options.theme.toolbarBgColor};\n          --toolbar-border-radius: ${this.options.theme.toolbarBorderRadius};\n          --toolbar-padding: ${this.options.theme.toolbarPadding};\n          --toolbar-bottom: ${this.options.theme.toolbarBottom};\n          \n          /* \u6309\u94ae\u76f8\u5173\u53d8\u91cf */\n          --button-bg-color: ${this.options.theme.buttonBgColor};\n          --button-hover-bg: ${this.options.theme.buttonHoverBg};\n          --button-size: ${this.options.theme.buttonSize};\n          --button-font-size: ${this.options.theme.buttonFontSize};\n          --button-border-radius: ${this.options.theme.buttonBorderRadius};\n\n          /* \u5bfc\u822a\u6309\u94ae\u76f8\u5173\u53d8\u91cf */\n          --nav-button-bg-color: ${this.options.theme.navButtonBgColor};\n          --nav-button-hover-bg: ${this.options.theme.navButtonHoverBg};\n          --nav-button-size: ${this.options.theme.navButtonSize};\n          --nav-button-font-size: ${this.options.theme.navButtonFontSize};\n          --nav-button-border-radius: ${this.options.theme.navButtonBorderRadius};\n          \n          /* \u53f3\u4e0a\u89d2\u5173\u95ed\u6309\u94ae\u53d8\u91cf */\n          --top-close-btn-size: ${this.options.theme.topCloseBtnSize};\n          --top-close-btn-top: ${this.options.theme.topCloseBtnTop};\n          --top-close-btn-right: ${this.options.theme.topCloseBtnRight};\n          --top-close-btn-font-size: ${this.options.theme.topCloseBtnFontSize};\n          --top-close-btn-bg-color: ${this.options.theme.topCloseBtnBgColor};\n          --top-close-btn-hover-bg: ${this.options.theme.topCloseBtnHoverBg};\n          \n          /* \u4fe1\u606f\u680f\u76f8\u5173\u53d8\u91cf */\n          --info-bg-color: ${this.options.theme.infoBgColor};\n          --info-border-radius: ${this.options.theme.infoBorderRadius};\n          --info-padding: ${this.options.theme.infoPadding};\n          --info-font-size: ${this.options.theme.infoFontSize};\n          --info-top: ${this.options.theme.infoTop};\n          --info-left: ${this.options.theme.infoLeft};\n          \n          /* \u7f29\u653e\u6307\u793a\u5668\u53d8\u91cf */\n          --zoom-indicator-bg: ${this.options.theme.zoomIndicatorBg};\n          --zoom-indicator-border-radius: ${this.options.theme.zoomIndicatorBorderRadius};\n          --zoom-indicator-padding: ${this.options.theme.zoomIndicatorPadding};\n          --zoom-indicator-font-size: ${this.options.theme.zoomIndicatorFontSize};\n          --zoom-indicator-top: ${this.options.theme.zoomIndicatorTop};\n          --zoom-indicator-left: ${this.options.theme.zoomIndicatorLeft};\n          \n          /* \u901a\u7528\u53d8\u91cf */\n          --active-color: ${this.options.theme.activeColor};\n          --text-color: ${this.options.theme.textColor};\n          --shadow-color: ${this.options.theme.shadowColor};\n          --transition-speed: ${this.options.theme.transitionSpeed};\n          \n          /* \u7f29\u7565\u56fe\u76f8\u5173\u53d8\u91cf */\n          --thumb-max-width: ${this.options.theme.thumbMaxWidth};\n          --thumb-gap: ${this.options.theme.thumbGap};\n          --thumb-padding: ${this.options.theme.thumbPadding};\n          --thumb-item-width: ${this.options.theme.thumbItemWidth};\n          --thumb-item-height: ${this.options.theme.thumbItemHeight};\n        }\n\n        .images-viewer-container {\n          position: fixed;\n          left: 0;\n          top: 0;\n          inset: 0;\n          width: 100%;\n          height: 100%;\n          z-index: 9999;\n          opacity: 0;\n          transition: opacity var(--transition-speed) ease;\n          touch-action: none;\n          -webkit-user-select: none;\n          user-select: none;\n          display: none;\n          background-color: var(--viewer-bg-color);\n          overflow: hidden;\n        }\n\n        .images-viewer-container::backdrop,\n        .images-viewer-container:fullscreen {\n          background-color: var(--viewer-bg-color);\n        }\n\n        /* \u56fe\u7247\u5bb9\u5668\u6837\u5f0f */\n        .images-viewer-image-container {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100%;\n          z-index: 2;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          overflow: hidden;\n        }\n\n        /* \u56fe\u7247\u6837\u5f0f */\n        .images-viewer-image {\n          position: relative;\n          object-fit: contain;\n          cursor: grab;\n          opacity: 0;\n          box-shadow: 0 8px 25px var(--shadow-color);\n          border-radius: 4px;\n          user-select: none;\n          touch-action: none;\n        }\n\n        .images-viewer-image.loaded {\n          opacity: 1;\n          transition: transform 0.1s ease-out, opacity var(--transition-speed) ease;\n          transform-origin: center center;\n        }\n\n        .images-viewer-image.dragging {\n          cursor: grabbing;\n          transition: none;\n        }\n\n        /* \u52a0\u8f7d\u6307\u793a\u5668 */\n        .images-viewer-loading {\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          transform: translate(-50%, -50%);\n          background-color: rgba(127, 127, 127, 0.7);\n          padding: 20px 30px;\n          border-radius: 10px;\n          display: flex;\n          align-items: center;\n          gap: 15px;\n          color: var(--text-color);\n          font-size: 18px;\n          opacity: 0;\n          pointer-events: none;\n          transition: opacity var(--transition-speed) ease;\n          z-index: 3;\n        }\n\n        .images-viewer-loading.active {\n          opacity: 1;\n        }\n\n        .images-viewer-loading-spinner {\n          width: 40px;\n          height: 40px;\n          border: 4px solid rgba(255, 255, 255, 0.2);\n          border-top-color: var(--active-color);\n          border-radius: 50%;\n          animation: imageViewerSpin 1s linear infinite;\n        }\n\n        @keyframes imageViewerSpin {\n          to {\n            transform: rotate(360deg);\n          }\n        }\n\n        /* \u53f3\u4e0a\u89d2\u5173\u95ed\u6309\u94ae\u6837\u5f0f */\n        .images-viewer-top-close-btn {\n          position: absolute;\n          top: var(--top-close-btn-top);\n          right: var(--top-close-btn-right);\n          width: var(--top-close-btn-size);\n          height: var(--top-close-btn-size);\n          border-radius: 50%;\n          background-color: var(--button-bg-color);\n          color: var(--text-color);\n          border: none;\n          font-size:  var(--top-close-btn-font-size);\n          cursor: pointer;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          transition: all var(--transition-speed);\n          z-index: 10;\n          box-shadow: 0 2px 8px var(--shadow-color);\n        }\n\n        .images-viewer-top-close-btn:hover {\n          background-color: var(--top-close-btn-hover-bg);\n          transform: scale(1.1);\n        }\n\n        /* \u7f29\u653e\u6307\u793a\u5668\u6837\u5f0f */\n        .images-viewer-zoom-indicator {\n          position: absolute;\n          top: var(--zoom-indicator-top);\n          left: var(--zoom-indicator-left);\n          color: var(--text-color);\n          background-color: var(--zoom-indicator-bg);\n          padding: var(--zoom-indicator-padding);\n          border-radius: var(--zoom-indicator-border-radius);\n          font-size: var(--zoom-indicator-font-size);\n          z-index: 10;\n          min-width: 60px;\n          text-align: center;\n          box-shadow: 0 2px 8px var(--shadow-color);\n          border: 1px solid rgba(255, 255, 255, 0.1);\n        }\n\n        /* \u4fe1\u606f\u680f\u6837\u5f0f */\n        .images-viewer-image-info {\n          position: absolute;\n          top: var(--info-top);\n          left: var(--info-left);\n          color: var(--text-color);\n          background-color: var(--info-bg-color);\n          padding: var(--info-padding);\n          border-radius: var(--info-border-radius);\n          font-size: var(--info-font-size);\n          z-index: 10;\n          max-width: calc(100% - 40px);\n          box-shadow: 0 4px 12px var(--shadow-color);\n          display: none;\n          border: 1px solid rgba(255, 255, 255, 0.1);\n        }\n\n        .images-viewer-image-info.visible {\n          display: block;\n          animation: imageViewerFadeIn 0.3s ease;\n        }\n\n        .images-viewer-image-info p {\n          margin: 4px 0;\n          line-height: 1.4;\n        }\n\n        .images-viewer-image-info .info-label {\n          color: #ddd;\n          margin-right: 5px;\n        }\n\n        .images-viewer-shortcuts-title {\n          margin-top: 10px;\n          padding-top: 10px;\n          border-top: 1px solid rgba(255, 255, 255, 0.1);\n          font-weight: bold;\n          margin-bottom: 5px;\n        }\n\n        @keyframes imageViewerFadeIn {\n          from {\n            opacity: 0;\n            transform: translateY(-10px);\n          }\n          to {\n            opacity: 1;\n            transform: translateY(0);\n          }\n        }\n\n        /* \u56fe\u7247\u8ba1\u6570\u5668 */\n        .images-viewer-image-counter {\n          position: absolute;\n          top: 20px;\n          left: 50%;\n          transform: translateX(-50%);\n          color: var(--text-color);\n          background-color: var(--info-bg-color);\n          padding: 6px 12px;\n          border-radius: 18px;\n          font-size: 14px;\n          z-index: 10;\n          box-shadow: 0 2px 8px var(--shadow-color);\n        }\n\n        /* \u56fe\u7247\u6807\u9898\u663e\u793a */\n        .images-viewer-image-title {\n          position: absolute;\n          top: 60px;\n          left: 50%;\n          transform: translateX(-50%);\n          color: var(--text-color);\n          padding: 4px 12px;\n          border-radius: 18px;\n          font-size: 12px;\n          z-index: 10;\n          max-width: 80%;\n          text-align: center;\n          white-space: nowrap;\n          overflow: hidden;\n          text-overflow: ellipsis;\n        }\n\n        /* \u5bfc\u822a\u6309\u94ae */\n        .images-viewer-nav-buttons {\n          position: absolute;\n          top: 50%;\n          left: 0;\n          right: 0;\n          transform: translateY(-50%);\n          display: flex;\n          justify-content: space-between;\n          pointer-events: none;\n          z-index: 5;\n          padding: 0 10px;\n        }\n\n        .images-viewer-nav-btn {\n          width: var(--nav-button-size);\n          height: var(--nav-button-size);\n          border-radius: var(--nav-button-border-radius);\n          background-color: var(--nav-button-bg-color);\n          color: var(--text-color);\n          border: none;\n          font-size: var(--nav-button-font-size);\n          cursor: pointer;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          transition: all 0.2s;\n          pointer-events: auto;\n          opacity: 0.9;\n          box-shadow: 0 2px 8px var(--shadow-color);\n          z-index: 6;\n        }\n\n        .images-viewer-nav-btn:hover {\n          background-color: var(--nav-button-hover-bg);\n          opacity: 1;\n          transform: scale(1.1);\n        }\n\n        .images-viewer-nav-btn:disabled {\n          opacity: 0.3;\n          cursor: not-allowed;\n          transform: none;\n        }\n\n        /* \u5de5\u5177\u680f\u6837\u5f0f */\n        .images-viewer-toolbar {\n          position: absolute;\n          bottom: var(--toolbar-bottom);\n          left: 50%;\n          transform: translateX(-50%);\n          background-color: var(--toolbar-bg-color);\n          padding: var(--toolbar-padding);\n          border-radius: var(--toolbar-border-radius);\n          display: flex;\n          gap: 2px;\n          z-index: 10;\n          box-shadow: 0 6px 25px var(--shadow-color);\n          max-width: calc(100% - 40px);\n          overflow-x: auto;\n          overflow-y: hidden;\n          border: 1px solid rgba(255, 255, 255, 0.1);\n          scrollbar-width: none;\n          -ms-overflow-style: none;\n          -webkit-overflow-scrolling: touch;\n        }\n\n        .images-viewer-toolbar::-webkit-scrollbar {\n          display: none;\n        }\n\n        .images-viewer-tool-btn {\n          width: var(--button-size);\n          height: var(--button-size);\n          background-color: transparent;\n          border: none;\n          color: var(--text-color);\n          cursor: pointer;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          font-size: var(--button-font-size);\n          transition: all 0.2s;\n          flex-shrink: 0;\n          position: relative;\n          border-radius: var(--button-border-radius);\n          margin: 0 2px;\n          z-index: 11;\n          line-height: 1;\n        }\n\n        .images-viewer-tool-btn:hover {\n          background-color: var(--button-hover-bg);\n          transform: translateY(-2px);\n          box-shadow: 0 4px 10px var(--shadow-color);\n        }\n\n        .images-viewer-tool-btn:active {\n          background-color: rgba(255, 255, 255, 0.3);\n          transform: translateY(0);\n        }\n\n        .images-viewer-tool-btn:disabled {\n          opacity: 0.5;\n          cursor: not-allowed;\n        }\n\n        /* \u7f29\u7565\u56fe\u5bb9\u5668 */\n        .images-viewer-thumbnails-container {\n          position: absolute;\n          bottom: 90px;\n          left: 50%;\n          max-width: var(--thumb-max-width);\n          transform: translateX(-50%);\n          padding: 10px var(--thumb-padding);\n          background-color: var(--toolbar-bg-color);\n          border-radius: 12px;\n          display: flex;\n          gap: var(--thumb-gap);\n          overflow-x: auto;\n          scrollbar-width: none;\n          -ms-overflow-style: none;\n          z-index: 10;\n          box-shadow: 0 3px 15px var(--shadow-color);\n          -webkit-overflow-scrolling: touch;\n          border: 1px solid rgba(255, 255, 255, 0.1);\n        }\n\n        .images-viewer-thumbnails-container::-webkit-scrollbar {\n          display: none;\n        }\n\n        .images-viewer-thumbnail-item {\n          width: var(--thumb-item-width);\n          height: var(--thumb-item-height);\n          border: 2px solid transparent;\n          border-radius: 6px;\n          overflow: hidden;\n          cursor: pointer;\n          flex-shrink: 0;\n          transition: all 0.2s;\n          z-index: 11;\n          position: relative;\n          opacity: 0.6;\n        }\n\n        .images-viewer-thumbnail-item img {\n          width: 100%;\n          height: 100%;\n          object-fit: cover;\n        }\n\n        .images-viewer-thumbnail-item.active {\n          border-color: var(--active-color);\n          transform: scale(1.2);\n          opacity: 1;\n          box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);\n        }\n\n        /* \u7f29\u7565\u56fe\u52a0\u8f7d\u72b6\u6001 */\n        .images-viewer-thumbnail-loading {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100%;\n          background-color: rgba(0, 0, 0, 0.3);\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          z-index: 1;\n        }\n\n        .loading-spinner {\n          width: 20px;\n          height: 20px;\n          border: 2px solid rgba(255, 255, 255, 0.3);\n          border-top: 2px solid var(--active-color);\n          border-radius: 50%;\n          animation: spin 1s linear infinite;\n        }\n\n        .loading-error {\n          color: #ff6b6b;\n          font-size: 10px;\n          text-align: center;\n          padding: 2px;\n        }\n\n        @keyframes spin {\n          0% { transform: rotate(0deg); }\n          100% { transform: rotate(360deg); }\n        }\n\n        .images-viewer-thumbnail-item:hover {\n          transform: scale(1.2);\n          opacity: 0.9;\n        }\n      `,document.head.appendChild(t)}createOptimizedElements(){this.container=document.createElement("div"),this.container.className="images-viewer-container",document.body.appendChild(this.container),this.imageContainer=document.createElement("div"),this.imageContainer.className="images-viewer-image-container",this.container.appendChild(this.imageContainer),this.image=document.createElement("img"),this.image.className="images-viewer-image",this.image.crossOrigin="anonymous",this.image.alt=" ",this.imageContainer.appendChild(this.image),this.loading=document.createElement("div"),this.loading.className="images-viewer-loading",this.loading.innerHTML=`\n        <div class="images-viewer-loading-spinner"></div>\n        <div>${this.options.i18n.buttons.loading}</div>\n      `,this.imageContainer.appendChild(this.loading),this.options.buttons.topClose&&(this.topCloseBtn=document.createElement("button"),this.topCloseBtn.className="images-viewer-top-close-btn",this.topCloseBtn.textContent="\xd7",this.topCloseBtn.title=this.options.i18n.buttons.close,this.container.appendChild(this.topCloseBtn)),this.zoomIndicator=document.createElement("div"),this.zoomIndicator.className="images-viewer-zoom-indicator",this.zoomIndicator.textContent="100%",this.container.appendChild(this.zoomIndicator),this.options.buttons.info&&(this.imageInfoPanel=document.createElement("div"),this.imageInfoPanel.className="images-viewer-image-info "+(this.imageInfoVisible?"visible":""),this.container.appendChild(this.imageInfoPanel)),this.images.length>1&&(this.counter=document.createElement("div"),this.counter.className="images-viewer-image-counter",this.container.appendChild(this.counter)),this.imageTitle=document.createElement("div"),this.imageTitle.className="images-viewer-image-title",this.container.appendChild(this.imageTitle),this.images.length>1&&(this.options.buttons.prev||this.options.buttons.next)&&this.createNavButtons(),this.images.length>1&&this.options.buttons.thumbnails&&this.createThumbnails(),this.createToolbar()}createNavButtons(){const t=document.createElement("div");t.className="images-viewer-nav-buttons",this.addEvent(t,"click",t=>{t.stopPropagation()}),this.options.buttons.prev&&(this.prevBtn=document.createElement("button"),this.prevBtn.className="images-viewer-nav-btn images-viewer-prev-btn",this.prevBtn.textContent="\u2190",this.prevBtn.title=this.options.i18n.buttons.prev,this.addEvent(this.prevBtn,"click",t=>{t.stopPropagation(),this.prev()}),t.appendChild(this.prevBtn)),this.options.buttons.next&&(this.nextBtn=document.createElement("button"),this.nextBtn.className="images-viewer-nav-btn images-viewer-next-btn",this.nextBtn.textContent="\u2192",this.nextBtn.title=this.options.i18n.buttons.next,this.addEvent(this.nextBtn,"click",t=>{t.stopPropagation(),this.next()}),t.appendChild(this.nextBtn)),this.container.appendChild(t)}createToolbar(){const t=document.createElement("div");t.className="images-viewer-toolbar",this.addEvent(t,"click",t=>{t.stopPropagation()}),this.addEvent(t,"wheel",i=>{i.preventDefault(),i.stopPropagation(),t.scrollLeft+=i.deltaY}),this.images.length>1&&(this.options.buttons.prev&&(this.toolbarPrevBtn=this.createToolButton("\u2190",()=>this.prev()),t.appendChild(this.toolbarPrevBtn)),this.options.buttons.next&&(this.toolbarNextBtn=this.createToolButton("\u2192",()=>this.next()),t.appendChild(this.toolbarNextBtn))),this.options.buttons.zoomOut&&(this.zoomOutBtn=this.createToolButton("\u2212",()=>this.zoom(-.1)),t.appendChild(this.zoomOutBtn)),this.options.buttons.zoomIn&&(this.zoomInBtn=this.createToolButton("+",()=>this.zoom(.1)),t.appendChild(this.zoomInBtn)),this.options.buttons.rotateLeft&&(this.rotateLeftBtn=this.createToolButton("\u21ba",()=>this.rotate(-90)),t.appendChild(this.rotateLeftBtn)),this.options.buttons.rotateRight&&(this.rotateRightBtn=this.createToolButton("\u21bb",()=>this.rotate(90)),t.appendChild(this.rotateRightBtn)),this.options.buttons.reset&&(this.resetBtn=this.createToolButton("\u27f3",()=>this.reset()),t.appendChild(this.resetBtn)),this.options.buttons.originalSize&&(this.originalSizeBtn=this.createToolButton("1:1",()=>this.showOriginalSize()),t.appendChild(this.originalSizeBtn)),this.options.buttons.info&&(this.infoBtn=this.createToolButton("\u24d8",()=>this.toggleImageInfo()),t.appendChild(this.infoBtn)),this.options.buttons.download&&(this.downloadBtn=this.createToolButton("\u21a1",()=>this.downloadImage()),t.appendChild(this.downloadBtn)),this.options.buttons.fullscreen&&(this.fullscreenBtn=this.createToolButton("\u26f6",()=>this.toggleFullscreen()),t.appendChild(this.fullscreenBtn)),this.options.buttons.close&&(this.closeBtn=this.createToolButton("\xd7",()=>this.close()),t.appendChild(this.closeBtn)),this.options.customButtons&&this.options.customButtons.forEach(i=>{t.appendChild(this.createToolButton(i[0],i[1]))}),this.container.appendChild(t)}createToolButton(t,i){const s=document.createElement("button");s.className="images-viewer-tool-btn";const n=document.createElement("span");return n.textContent=t,s.appendChild(n),this.addEvent(s,"click",t=>{t.stopPropagation(),i()}),s}createThumbnails(){const t=document.createElement("div");t.className="images-viewer-thumbnails-container",this.addEvent(t,"click",t=>{t.stopPropagation();const i=t.target.closest(".images-viewer-thumbnail-item");if(i){const t=parseInt(i.dataset.index);if(!isNaN(t)&&t!==this.currentIndex){const i=this.currentIndex;this.currentIndex=t,this.loadCurrentImage(),this.updateThumbnails(),this.options.onChange&&this.options.onChange({index:this.currentIndex,oldIndex:i,direction:this.currentIndex>i?"next":"prev",data:this.images[this.currentIndex],img:this.image,dom:this.container})}}}),this.addEvent(t,"wheel",i=>{i.preventDefault(),i.stopPropagation(),t.scrollLeft+=i.deltaY});const i=parseInt(this.options.theme.thumbItemWidth),s=parseInt(this.options.theme.thumbGap),n=parseInt(this.options.theme.thumbPadding),e=this.options.preloadCount,o=window.innerWidth-2*n,h=Math.ceil(o/(i+s)),a=Math.min(h+e,this.images.length);for(let i=0;i<a;i++)this.createThumbnailItem(t,i);let r=a;this.addEvent(t,"scroll",()=>{const i=t.scrollLeft,s=t.clientWidth;if(i>t.scrollWidth-s-s&&r<this.images.length){const i=Math.min(h,this.images.length-r);for(let s=r;s<r+i;s++)this.createThumbnailItem(t,s);r+=i}}),this.container.appendChild(t),this.thumbContainer=t}createThumbnailItem(t,i){const s=this.getThumbnailUrl(i),n=this.getImageUrl(i),e=document.createElement("div");e.className="images-viewer-thumbnail-item "+(i===this.currentIndex?"active":""),e.dataset.index=i;const o=new Image;o.crossOrigin="anonymous",o.src="";const h=document.createElement("div");h.className="images-viewer-thumbnail-loading",h.innerHTML='<div class="loading-spinner"></div>',e.appendChild(h),this.loadedThumbnails.has(s)?(o.src=this.loadedThumbnails.get(s).src,h.remove()):this.loadingThumbnails.has(s)?(h.style.display="flex",o.onload=()=>{h.remove(),o.onload=null,o.onerror=null},o.onerror=()=>{h.remove(),this.failedThumbnails.add(s),o.onload=null,o.onerror=null,this.options.onThumbnailError&&this.options.onThumbnailError({data:this.images[i],index:i,url:s,img:o})},o.src=s):this.failedThumbnails.has(s)&&!this.options.retryOnError?h.remove():this.loadedImages.has(n)?(o.src=this.loadedImages.get(n).src,h.remove()):(this.loadingThumbnails.set(s,o),h.style.display="flex",o.onload=()=>{this.loadedThumbnails.set(s,o),this.loadingThumbnails.delete(s),this.failedThumbnails.delete(s),h.remove(),o.onload=null,o.onerror=null},o.onerror=()=>{this.loadingThumbnails.delete(s),this.failedThumbnails.add(s),h.remove(),o.onload=null,o.onerror=null,this.options.onThumbnailError&&this.options.onThumbnailError({data:this.images[i],index:i,url:s,img:o})},o.src=s),e.appendChild(o),t.appendChild(e)}updateThumbnailDisplay(t){if(!this.thumbContainer)return;const i=this.thumbContainer.querySelector(`[data-index="${t}"]`);if(i){const s=this.getThumbnailUrl(t),n=i.querySelector("img");if(n&&this.loadedThumbnails.has(s)){const t=this.loadedThumbnails.get(s);n.src=t.src,n.style.display="block";const e=i.querySelector(".images-viewer-thumbnail-loading");e&&e.remove()}}}updateImageTransform(){const t=`\n        translate(${this.translateX}px, ${this.translateY}px)\n        scale(${this.scale})\n        rotate(${this.rotation}deg)\n      `;this.image.style.transform=t}fitImageToScreen(t,i){this.scale=1,this.translateX=0,this.translateY=0;const s=this.imageContainer.clientWidth,n=this.imageContainer.clientHeight,e=this.rotation%360;let o=t,h=i;if(90!==e&&270!==e||(o=i,h=t),o>s||h>n){const t=s/o,i=n/h;this.scale=Math.min(t,i)}this.scale=Math.max(.1,this.scale),this.updateImageTransform(),this.updateZoomIndicator()}parseImageOptions(t){this.images=[],"string"==typeof t?this.images=[t]:Array.isArray(t)?this.images=t.filter(t=>""!==t):"object"==typeof t&&t.images&&Array.isArray(t.images)&&(this.images=t.images.filter(t=>""!==t))}getImageUrl(t){const i=this.images[t];if("string"==typeof i)return i;if("object"==typeof i){const s=this.options.props.url;if("function"==typeof s)return s(i,t);if("string"==typeof s&&i[s])return i[s]}return""}getThumbnailUrl(t){const i=this.images[t];if("object"==typeof i){const s=this.options.props.thumbnail;if("function"==typeof s)return s(i,t);if("string"==typeof s&&i[s])return i[s]}return this.getImageUrl(t)}getImageTitle(t){const i=this.images[t];if("object"==typeof i){const s=this.options.props.title;if("function"==typeof s)return s(i,t);if("string"==typeof s&&i[s])return i[s]}return""}preloadImages(){const t=this.options.preloadCount;if(t<=0)return;const i=Math.max(0,this.currentIndex-t),s=Math.min(this.images.length-1,this.currentIndex+t);for(let t=i;t<=s;t++)this.loadImageAtIndex(t)}addToCache(t,i){this.loadedImages.set(t,i);const s=this.options.maxCacheSize;if(s>0&&this.loadedImages.size>s){const t=this.loadedImages.keys().next().value;this.loadedImages.delete(t)}}loadImageAtIndex(t){const i=this.getImageUrl(t);if(!i||this.loadedImages.has(i)||this.loadingImages.has(i)||!this.options.retryOnError&&this.failedImages.has(i))return;const s=new Image;s.onload=()=>{this.addToCache(i,s),this.loadingImages.delete(i),this.failedImages.delete(i),this.imageMetadata[t]={name:this.extractFileName(i),width:s.naturalWidth||s.width,height:s.naturalHeight||s.height},s.onload=null,s.onerror=null},s.onerror=()=>{this.loadingImages.delete(i),this.failedImages.add(i),s.onload=null,s.onerror=null;const n=this.getImageUrl(this.currentIndex);i===n&&(this.hideLoading(),this.image.classList.add("loaded"),this.options.onImageError&&this.options.onImageError({data:this.images[t],index:t,url:i,img:this.image}))},s.crossOrigin="anonymous",s.src=i,this.loadingImages.set(i,s)}extractFileName(t){try{const i=new URL(t).pathname.split("/");let s=i[i.length-1];const n=s.indexOf("?");return n>-1&&(s=s.substring(0,n)),s||"unknown-image"}catch(t){return"unknown-image"}}loadCurrentImage(t){if(void 0!==t&&(this.currentIndex=t),this.hasPreviousState=!1,this.isToggledState=!1,this.images.length>1&&this.counter){let t=null;this.options.onCounter&&(t=this.options.onCounter({data:this.images[this.currentIndex],index:this.currentIndex,currentPage:this.currentIndex+1,totalPages:this.images.length,scale:this.scale,rotation:this.rotation})),t?this.counter.innerHTML=t:this.counter.textContent=`${this.currentIndex+1} / ${this.images.length}`}const i=this.getImageTitle(this.currentIndex);this.imageTitle&&i?(this.imageTitle.innerHTML=i,this.imageTitle.style.display="block"):this.imageTitle.style.display="none",this.updateNavButtons(),this.updateThumbnails(),this.scale=1,this.rotation=0,this.translateX=0,this.translateY=0;const s=this.getImageUrl(this.currentIndex);this.loadedImages.has(s)||this.loadingImages.has(s)||this.loadImageAtIndex(this.currentIndex),this.preloadAdjacentImages(),this.isImageLoaded()}preloadAdjacentImages(){const t=Math.max(0,this.currentIndex-2),i=Math.min(this.images.length-1,this.currentIndex+2);for(let s=t;s<=i;s++)this.loadThumbnailAtIndex(s);for(let s=t;s<=i;s++)this.loadImageAtIndex(s)}loadThumbnailAtIndex(t){const i=this.getThumbnailUrl(t);if(!i||this.loadedThumbnails.has(i)||this.loadingThumbnails.has(i)||!this.options.retryOnError&&this.failedThumbnails.has(i))return;const s=new Image;s.onload=()=>{this.loadedThumbnails.set(i,s),this.loadingThumbnails.delete(i),this.failedThumbnails.delete(i),this.updateThumbnailDisplay(t),s.onload=null,s.onerror=null},s.onerror=()=>{this.loadingThumbnails.delete(i),this.failedThumbnails.add(i),s.onload=null,s.onerror=null;let n=null;if(this.thumbContainer){const i=this.thumbContainer.querySelector(`[data-index="${t}"]`);if(i){n=i.querySelector("img");const t=i.querySelector(".images-viewer-thumbnail-loading");t&&t.remove()}}this.options.onThumbnailError&&this.options.onThumbnailError({data:this.images[t],index:t,url:i,img:n})},s.crossOrigin="anonymous",s.src=i,this.loadingThumbnails.set(i,s)}isImageLoaded(){const t=this.getImageUrl(this.currentIndex),i=this.loadedImages.has(t),s=this.loadingImages.has(t),n=this.failedImages.has(t);if(this.showLoading(),this.image.classList.remove("loaded"),this.image.src="",i){const i=this.loadedImages.get(t),s=document.createElement("canvas"),n=s.getContext("2d");s.width=i.naturalWidth||i.width,s.height=i.naturalHeight||i.height,n.drawImage(i,0,0),s.toBlob(t=>{if(t){const i=URL.createObjectURL(t);this.image.onload=()=>{this.image.onload=null},this.image.src=i,this.t&&(URL.revokeObjectURL(this.t),this.t=null),this.t=i}});const e=this.imageMetadata[this.currentIndex];return e&&(this.fitImageToScreen(e.width,e.height),this.updateImageInfo()),this.image.classList.add("loaded"),void this.hideLoading()}if(n&&!this.options.retryOnError)return this.hideLoading(),this.image.classList.add("loaded"),void(this.options.onImageError&&this.options.onImageError({data:this.images[this.currentIndex],index:this.currentIndex,url:t,img:this.image}));if(s){const i=()=>{const s=this.getImageUrl(this.currentIndex);this.loadedImages.has(t)?t===s&&this.isImageLoaded():this.loadingImages.has(t)?setTimeout(i,100):(this.hideLoading(),t===s&&(this.image.classList.add("loaded"),this.options.onImageError&&this.options.onImageError({data:this.images[this.currentIndex],index:this.currentIndex,url:t,img:this.image})))};return void setTimeout(i,100)}const e=new Image;e.onload=()=>{this.addToCache(t,e),this.loadingImages.delete(t),this.imageMetadata[this.currentIndex]={name:this.extractFileName(t),width:e.naturalWidth||e.width,height:e.naturalHeight||e.height},this.isImageLoaded()},e.onerror=()=>{this.loadingImages.delete(t),this.hideLoading();const i=this.getImageUrl(this.currentIndex);t===i&&(this.image.classList.add("loaded"),this.options.onImageError&&this.options.onImageError({data:this.images[this.currentIndex],index:this.currentIndex,url:t,img:this.image}))},e.crossOrigin="anonymous",e.src=t,this.loadingImages.set(t,e)}updateZoomIndicator(){const t=Math.round(100*this.scale);if(this.options.onZoomIndicator){const i=this.options.onZoomIndicator({data:this.images[this.currentIndex],index:this.currentIndex,scale:this.scale,percentage:t,rotation:this.rotation});if(i)return void(this.zoomIndicator.innerHTML=i)}this.zoomIndicator.textContent=`${t}%`}updateImageInfo(){if(!this.options.buttons.info||!this.imageInfoPanel)return;const t=this.imageMetadata[this.currentIndex];if(!t)return;const i=this.options.i18n;let s="";this.options.onInfo&&(s=this.options.onInfo({data:this.images[this.currentIndex],index:this.currentIndex,metadata:t,scale:this.scale,rotation:this.rotation}),s)||(this.options.imageInfo.showName&&(s+=`<p><span class="info-label">${i.info.name}</span> ${t.name}</p>`),this.options.imageInfo.showDimensions&&(s+=`<p><span class="info-label">${i.info.dimensions}</span> ${t.width} \xd7 ${t.height}</p>`),s+=`\n          <div class="images-viewer-shortcuts-title">${i.info.shortcuts}</div>\n          <p><span class="info-label">${i.info.zoomIn}</span> \u2191 +</p>\n          <p><span class="info-label">${i.info.zoomOut}</span> \u2193 -</p>\n          <p><span class="info-label">${i.info.prev}</span> \u2190</p>\n          <p><span class="info-label">${i.info.next}</span> \u2192</p>\n          <p><span class="info-label">${i.info.reset}</span> 0</p>\n          <p><span class="info-label">${i.info.fullscreen}</span> F</p>\n          <p><span class="info-label">${i.info.info}</span> I</p>\n          <p><span class="info-label">${i.info.close}</span> ESC</p>\n        `),this.imageInfoPanel.innerHTML=s}toggleImageInfo(){this.options.buttons.info&&this.imageInfoPanel&&(this.imageInfoVisible=!this.imageInfoVisible,this.imageInfoVisible?this.imageInfoPanel.classList.add("visible"):this.imageInfoPanel.classList.remove("visible"))}updateNavButtons(){if(this.images.length<=1)return;const t=!!this.options.loop||this.currentIndex>0,i=!!this.options.loop||this.currentIndex<this.images.length-1;this.prevBtn&&(this.prevBtn.disabled=!t),this.nextBtn&&(this.nextBtn.disabled=!i),this.toolbarPrevBtn&&(this.toolbarPrevBtn.disabled=!t),this.toolbarNextBtn&&(this.toolbarNextBtn.disabled=!i)}updateThumbnails(){if(this.images.length<=1)return;document.querySelectorAll(".images-viewer-thumbnail-item").forEach(t=>{t.classList.remove("active")});const t=document.querySelector(`.images-viewer-thumbnail-item[data-index="${this.currentIndex}"]`);t&&(t.classList.add("active"),t.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"}))}showLoading(){this.loading&&this.loading.classList.add("active")}hideLoading(){this.loading&&this.loading.classList.remove("active")}prev(){if(this.images.length<=1)return;let t=this.currentIndex-1;t<0&&(t=this.options.loop?this.images.length-1:0);const i=this.currentIndex;t!==this.currentIndex&&(this.currentIndex=t,this.loadCurrentImage()),this.options.onChange&&this.options.onChange({oldIndex:i,index:this.currentIndex,data:this.images[this.currentIndex],direction:"prev",img:this.image,dom:this.container})}next(){if(this.images.length<=1)return;let t=this.currentIndex+1;t>=this.images.length&&(t=this.options.loop?0:this.images.length-1),t!==this.currentIndex&&(this.currentIndex=t,this.loadCurrentImage());const i=this.currentIndex;this.options.onChange&&this.options.onChange({oldIndex:i,index:this.currentIndex,data:this.images[this.currentIndex],index:this.currentIndex,direction:"next",img:this.image,dom:this.container})}bindEvents(){this.topCloseBtn&&this.addEvent(this.topCloseBtn,"click",()=>this.close()),this.options.closeOnMaskClick&&this.addEvent(this.imageContainer,"click",t=>{t.target==this.imageContainer&&this.close()}),this.addEvent(document,"keydown",t=>this.handleKeydown(t));const t=function(t){let i,s=0;return function(...n){const e=Date.now(),o=e-s;o>300?(t.apply(this,n),s=e):(clearTimeout(i),i=setTimeout(()=>{t.apply(this,n),s=e},300-o))}}(()=>{this.handleResize()});this.addEvent(window,"resize",t),this.bindDragEvents(),this.bindTouchEvents()}addEvent(t,i,s,n){t.addEventListener(i,s,n);const e=`${i}-${Date.now()}-${Math.random()}`;this.eventListeners.set(e,{element:t,event:i,handler:s})}removeAllEvents(){this.eventListeners.forEach(({element:t,event:i,handler:s})=>{t.removeEventListener(i,s)}),this.eventListeners.clear()}rotatePoint(t,i,s){const n=s*Math.PI,e=Math.cos(n),o=Math.sin(n);return{x:t*e-i*o,y:t*o+i*e}}bindDragEvents(){this.addEvent(this.image,"mousedown",t=>{0===t.button&&(this.isDragging=!0,this.image.classList.add("dragging"),this.startX=t.clientX,this.startY=t.clientY,this.startTranslateX=this.translateX,this.startTranslateY=this.translateY,t.preventDefault())}),this.addEvent(document,"mousemove",t=>{if(!this.isDragging)return;const i=t.clientX-this.startX,s=t.clientY-this.startY,n=this.rotatePoint(i,s,-this.rotation);this.translateX=this.startTranslateX+n.x,this.translateY=this.startTranslateY+n.y,this.updateImageTransform(),this.options.onDrag&&this.options.onDrag({data:his.images[this.currentIndex],index:this.currentIndex,translateX:this.translateX,translateY:this.translateY}),t.preventDefault()}),this.addEvent(document,"mouseup",()=>{this.isDragging&&(this.isDragging=!1,this.image.classList.remove("dragging"))}),this.addEvent(document,"mouseleave",()=>{this.isDragging&&(this.isDragging=!1,this.image.classList.remove("dragging"))}),this.addEvent(this.imageContainer,"wheel",t=>{t.preventDefault();const i=this.imageContainer.getBoundingClientRect(),s=t.clientX-i.left,n=t.clientY-i.top,e=t.deltaY>0?-.05:.05;this.zoomAtPoint(e,s,n)}),this.addEvent(this.image,"dblclick",t=>{t.preventDefault();const i=this.imageContainer.getBoundingClientRect(),s=t.clientX-i.left,n=t.clientY-i.top;if(Math.abs(this.scale-1)<.01)if(this.hasPreviousState)this.scale=this.lastScale,this.translateX=this.lastTranslateX,this.translateY=this.lastTranslateY,this.hasPreviousState=!1;else{this.lastScale=this.scale,this.lastTranslateX=this.translateX,this.lastTranslateY=this.translateY,this.hasPreviousState=!0;const t=1.5,i=t/this.scale,e=this.imageContainer.clientWidth,o=this.imageContainer.clientHeight;this.translateX=this.translateX*i+s-e/2-i*(s-e/2),this.translateY=this.translateY*i+n-o/2-i*(n-o/2),this.scale=t}else{this.lastScale=this.scale,this.lastTranslateX=this.translateX,this.lastTranslateY=this.translateY,this.hasPreviousState=!0;const t=1,i=t/this.scale,e=this.imageContainer.clientWidth,o=this.imageContainer.clientHeight;this.translateX=this.translateX*i+s-e/2-i*(s-e/2),this.translateY=this.translateY*i+n-o/2-i*(n-o/2),this.scale=t}this.updateImageTransform(),this.updateZoomIndicator()})}bindTouchEvents(){this.addEvent(this.image,"touchstart",t=>{if(this.touchState.lastTouchTime=Date.now(),1===t.touches.length)this.touchState.isPinching||(this.touchState.isDragging=!0,this.touchState.startX=t.touches[0].clientX,this.touchState.startY=t.touches[0].clientY,this.touchState.startTranslateX=this.translateX,this.touchState.startTranslateY=this.translateY,this.image.classList.add("dragging"));else if(2===t.touches.length){this.touchState.isPinching=!0,this.touchState.isDragging=!1,this.image.classList.remove("dragging");const i=t.touches[0],s=t.touches[1];this.touchState.initialDistance=this.getDistance(i,s),this.touchState.initialScale=this.scale,this.touchState.initialTranslateX=this.translateX,this.touchState.initialTranslateY=this.translateY,this.touchState.centerX=(i.clientX+s.clientX)/2,this.touchState.centerY=(i.clientY+s.clientY)/2;const n=this.imageContainer.getBoundingClientRect(),e=this.touchState.centerX-n.left,o=this.touchState.centerY-n.top;this.calculateRelativeCenter(e,o),this.touchState.movementCount=0,this.touchState.scaleRatio=1}t.preventDefault()}),this.addEvent(this.image,"touchmove",t=>{if(!(Date.now()-this.touchState.lastTouchTime<16)){if(this.touchState.lastTouchTime=Date.now(),1===t.touches.length&&this.touchState.isDragging&&!this.touchState.isPinching){const i=t.touches[0].clientX-this.touchState.startX,s=t.touches[0].clientY-this.touchState.startY,n=this.rotatePoint(i,s,-this.rotation);this.touchState.movementCount++,(this.touchState.movementCount>this.touchState.stabilizationThreshold||Math.abs(i)>5||Math.abs(s)>5)&&(this.translateX=this.touchState.startTranslateX+n.x,this.translateY=this.touchState.startTranslateY+n.y,this.updateImageTransform(),this.options.onDrag&&this.options.onDrag({data:this.images[this.currentIndex],index:this.currentIndex,translateX:this.translateX,translateY:this.translateY}))}else if(2===t.touches.length&&this.touchState.isPinching){const i=t.touches[0],s=t.touches[1],n=this.getDistance(i,s);this.touchState.scaleRatio=n/this.touchState.initialDistance;const e=this.touchState.initialScale*this.touchState.scaleRatio,o=this.options.minScale,h=this.options.maxScale,a=Math.max(o,Math.min(h,e));if(Math.abs(a-this.scale)>this.touchState.minScaleChange){const t=a/this.touchState.initialScale,i=this.imageContainer.getBoundingClientRect(),s=i.width,n=i.height;this.translateX=this.touchState.initialTranslateX*t+this.touchState.centerX-s/2-t*(this.touchState.centerX-s/2),this.translateY=this.touchState.initialTranslateY*t+this.touchState.centerY-n/2-t*(this.touchState.centerY-n/2),this.scale=a,this.updateImageTransform(),this.updateZoomIndicator(),this.options.onZoom&&this.options.onZoom({data:this.images[this.currentIndex],index:this.currentIndex,scale:this.scale,oldScale:this.touchState.initialScale})}}t.preventDefault()}}),this.addEvent(this.image,"touchend",t=>{0===t.touches.length?(this.touchState.isDragging=!1,this.touchState.isPinching=!1,this.image.classList.remove("dragging")):1===t.touches.length&&this.touchState.isPinching&&(this.touchState.isPinching=!1,this.touchState.isDragging=!0,this.touchState.startX=t.touches[0].clientX,this.touchState.startY=t.touches[0].clientY,this.touchState.startTranslateX=this.translateX,this.touchState.startTranslateY=this.translateY,this.image.classList.add("dragging")),t.preventDefault()}),this.addEvent(this.image,"touchcancel",()=>{this.touchState.isDragging=!1,this.touchState.isPinching=!1,this.image.classList.remove("dragging")})}getDistance(t,i){const s=t.clientX-i.clientX,n=t.clientY-i.clientY;return Math.sqrt(s*s+n*n)}calculateRelativeCenter(t,i){if(!this.imageMetadata[this.currentIndex])return;const s=this.imageContainer.clientWidth,n=this.imageContainer.clientHeight/2,e=t-s/2-this.translateX,o=i-n-this.translateY;this.touchState.relativeCenterX=e/this.scale,this.touchState.relativeCenterY=o/this.scale}zoomAtPoint(t,i,s){const n=this.scale,e=this.options.maxScale,o=this.options.minScale,h=Math.max(o,Math.min(e,this.scale+t));if(h===this.scale)return;const a=h/n,r=this.imageContainer.clientWidth,l=this.imageContainer.clientHeight;this.translateX=this.translateX*a+i-r/2-a*(i-r/2),this.translateY=this.translateY*a+s-l/2-a*(s-l/2),this.scale=h,this.updateImageTransform(),this.updateZoomIndicator(),this.options.onZoom&&this.options.onZoom({data:this.images[this.currentIndex],index:this.currentIndex,scale:this.scale,oldScale:n})}zoom(t){const i=this.imageContainer.clientWidth,s=this.imageContainer.clientHeight;this.zoomAtPoint(t,i/2,s/2)}rotate(t){const i=this.rotation,s=i+t;if(i===s)return;const n=this.imageContainer.getBoundingClientRect(),e=n.width/2,o=n.height/2,h=e+this.translateX,a=o+this.translateY;this.rotation=s,this.translateX=0,this.translateY=0;const r=this.imageMetadata[this.currentIndex];if(r){const t=this.calculateBoundingBox(r.width,r.height,s),i=t.width*this.scale,n=t.height*this.scale;this.translateX=(h-e)*(i/(i-this.translateX)),this.translateY=(a-o)*(n/(n-this.translateY))}this.updateImageTransform(),this.updateZoomIndicator(),this.options.onRotate&&this.options.onRotate({data:this.images[this.currentIndex],index:this.currentIndex,rotation:this.rotation,oldRotation:i})}calculateBoundingBox(t,i,s){const n=s*Math.PI/180,e=Math.abs(Math.cos(n)),o=Math.abs(Math.sin(n));return{width:t*e+i*o,height:t*o+i*e}}reset(){this.rotation=0;const t=this.imageMetadata[this.currentIndex];t&&this.fitImageToScreen(t.width,t.height)}showOriginalSize(){this.rotation=0,this.scale=1,this.translateX=0,this.translateY=0,this.updateImageTransform(),this.updateZoomIndicator()}downloadImage(){const t=this.getImageUrl(this.currentIndex),i=this.imageMetadata[this.currentIndex];if(this.loadedImages.has(t)){const s=this.loadedImages.get(t);this.downloadFromImage(s,i)}}downloadFromImage(t,i){try{const s=document.createElement("canvas");s.width=t.naturalWidth||t.width,s.height=t.naturalHeight||t.height,s.getContext("2d").drawImage(t,0,0);const n=s.toDataURL("image/jpeg");this.downloadedImage(n,i)}catch(t){const s=this.getImageUrl(this.currentIndex);this.downloadedImage(s,i)}}downloadedImage(t,i){try{const s=document.createElement("a");s.href=t,s.download=i?i.name:"image.jpg",document.body.appendChild(s),s.click(),document.body.removeChild(s)}catch(t){}}toggleFullscreen(){document.fullscreenElement?document.exitFullscreen&&(document.exitFullscreen(),this.isFullscreen=!1):(this.container.requestFullscreen().catch(t=>{}),this.isFullscreen=!0)}handleKeydown(t){if("block"===this.container.style.display){switch(t.key){case"Escape":this.close();break;case"ArrowLeft":this.prev();break;case"ArrowRight":this.next();break;case"ArrowUp":case"+":case"=":this.zoom(.1);break;case"ArrowDown":case"-":this.zoom(-.1);break;case"0":this.reset();break;case"f":case"F":this.toggleFullscreen();break;case"i":case"I":this.toggleImageInfo()}t.preventDefault()}}handleResize(){const t=this.imageMetadata[this.currentIndex];if(!t)return;const i=this.imageContainer.clientWidth,s=this.imageContainer.clientHeight,n=this.rotation%360;let e=t.width,o=t.height;90!==n&&270!==n||(e=t.height,o=t.width);const h=Math.min(i/e,s/o),a=e*this.scale,r=o*this.scale,l=a>i||r>s;let c=this.scale;c=l?Math.max(.1,h):h>=1?1:h,Math.abs(c-this.scale)>.01&&(this.scale=c,this.translateX=0,this.translateY=0,this.updateImageTransform(),this.updateZoomIndicator()),this.updateThumbnailsOnResize()}updateThumbnailsOnResize(){if(!this.thumbContainer)return;const t=parseInt(this.options.theme.thumbItemWidth),i=parseInt(this.options.theme.thumbGap),s=parseInt(this.options.theme.thumbPadding),n=this.options.preloadCount,e=window.innerWidth-2*s,o=Math.ceil(e/(t+i)),h=Math.min(o+n,this.images.length),a=this.thumbContainer.querySelectorAll(".images-viewer-thumbnail-item").length;if(a<h){const t=h-a;for(let i=a;i<a+t;i++)i<this.images.length&&this.createThumbnailItem(this.thumbContainer,i)}}onShow(){this.container.style.display="block",setTimeout(()=>{this.container.style.opacity="1",this.options.onShow&&this.options.onShow(this.container)},10)}close(){this.removeAllEvents(),this.cleanup(),this.container.style.opacity="0",setTimeout(()=>{this.container.style.display="none";const t=document.getElementById("images-viewer-styles");t&&t.remove(),this.container&&this.container.remove(),this.options.onClose&&this.options.onClose()},300)}cleanup(){for(const[t,i]of this.loadingImages.entries())i.onload=null,i.onerror=null,i.src="";this.loadedImages.clear(),this.loadingImages.clear(),this.imageMetadata=[],this.t&&(URL.revokeObjectURL(this.t),this.t=null)}}},"object"==typeof exports&&"undefined"!=typeof module?module.exports=factory():"function"==typeof define&&define.amd?define(factory):(global="undefined"!=typeof globalThis?globalThis:global||self).ImagesViewer=factory();

package/index.d.ts

@@ -27,7 +27,7 @@ export interface RotateEventData {
   /**
    * 当前图片数据
    */
-  image: string | ImageObject;
+  data: string | ImageObject;
   /**
    * 当前图片索引
    */
@@ -49,7 +49,7 @@ export interface DragEventData {
   /**
    * 当前图片数据
    */
-  image: string | ImageObject;
+  data: string | ImageObject;
   /**
    * 当前图片索引
    */
@@ -71,7 +71,7 @@ export interface ZoomEventData {
   /**
    * 当前图片数据
    */
-  image: string | ImageObject;
+  data: string | ImageObject;
   /**
    * 当前图片索引
    */
@@ -86,6 +86,36 @@ export interface ZoomEventData {
   oldScale: number;
 }
 
+/**
+ * 切换事件参数
+ */
+export interface ChangeEventData {
+  /**
+   * 当前图片索引
+   */
+  index: number;
+  /**
+   * 旧的图片索引
+   */
+  oldIndex: number;
+  /**
+   * 切换方向
+   */
+  direction: 'next' | 'prev';
+  /**
+   * 当前图片数据
+   */
+  data: string | ImageObject;
+  /**
+   * 当前图片 DOM 元素
+   */
+  img: HTMLImageElement;
+  /**
+   * 查看器容器 DOM 元素
+   */
+  dom: HTMLDivElement;
+}
+
 /**
  * 信息栏自定义函数参数
  */
@@ -93,7 +123,7 @@ export interface InfoTextParams {
   /**
    * 当前图片数据
    */
-  image: string | ImageObject;
+  data: string | ImageObject;
   /**
    * 当前图片索引
    */
@@ -123,7 +153,7 @@ export interface CounterParams {
   /**
    * 当前图片数据
    */
-  image: string | ImageObject;
+  data: string | ImageObject;
   /**
    * 当前图片索引
    */
@@ -153,7 +183,7 @@ export interface ZoomIndicatorParams {
   /**
    * 当前图片数据
    */
-  image: string | ImageObject;
+  data: string | ImageObject;
   /**
    * 当前图片索引
    */
@@ -172,6 +202,28 @@ export interface ZoomIndicatorParams {
   rotation: number;
 }
 
+/**
+ * 错误回调参数
+ */
+export interface ErrorCallbackParams {
+  /**
+   * 当前图片数据
+   */
+  data: string | ImageObject;
+  /**
+   * 当前图片索引
+   */
+  index: number;
+  /**
+   * 加载失败的图片 URL
+   */
+  url: string;
+  /**
+   * 对应的图片或缩略图 DOM 元素
+   */
+  img: HTMLImageElement | null;
+}
+
 /**
  * ImagesViewer 配置选项
  */
@@ -275,6 +327,79 @@ interface ImagesViewerOptions {
     showDimensions?: boolean;
   };
 
+  /**
+   * 图片信息显示配置
+   */
+  props?: {
+    /** 图片 URL 的属性名或获取函数 */
+    url?: string | ((item: any, index: number) => string);
+    /** 图片标题的属性名或获取函数 */
+    title?: string | ((item: any, index: number) => string);
+    /** 缩略图 URL 的属性名或获取函数 */
+    thumbnail?: string | ((item: any, index: number) => string);
+  };
+
+  /**
+   * 是否在失败后重新请求
+   * @default false
+   */
+  retryOnError?: boolean;
+
+  /**
+   * 图片加载失败回调
+   */
+  onImageError?: (data: ErrorCallbackParams) => void;
+
+  /**
+   * 缩略图加载失败回调
+   */
+  onThumbnailError?: (data: ErrorCallbackParams) => void;
+
+  /**
+   * 查看器显示时的回调
+   */
+  onShow?: (container: HTMLDivElement) => void;
+
+  /**
+   * 查看器关闭时的回调
+   */
+  onClose?: () => void;
+
+  /**
+   * 图片切换时的回调
+   */
+  onChange?: (data: ChangeEventData) => void;
+
+  /**
+   * 图片拖动时的回调
+   */
+  onDrag?: (data: DragEventData) => void;
+
+  /**
+   * 图片缩放时的回调
+   */
+  onZoom?: (data: ZoomEventData) => void;
+
+  /**
+   * 图片旋转时的回调
+   */
+  onRotate?: (data: RotateEventData) => void;
+
+  /**
+   * 自定义信息栏文本
+   */
+  onInfo?: (data: InfoTextParams) => string | null | undefined;
+
+  /**
+   * 自定义页数显示
+   */
+  onCounter?: (data: CounterParams) => string | null | undefined;
+
+  /**
+   * 自定义缩放指示器
+   */
+  onZoomIndicator?: (data: ZoomIndicatorParams) => string | null | undefined;
+
   /**
    * 国际化配置
    */
@@ -319,30 +444,30 @@ interface ImagesViewerOptions {
    * 主题配置
    */
   theme?: {
-    // 背景相关
+    /** 背景相关 */
     viewerBgColor?: string;
 
-    // 工具栏相关
+    /** 工具栏相关 */
     toolbarBgColor?: string;
     toolbarBorderRadius?: string;
     toolbarPadding?: string;
     toolbarBottom?: string;
 
-    // 按钮相关
+    /** 按钮相关 */
     buttonBgColor?: string;
     buttonHoverBg?: string;
     buttonSize?: string;
     buttonFontSize?: string;
     buttonBorderRadius?: string;
 
-    // 导航按钮相关
+    /** 导航按钮相关 */
     navButtonBgColor?: string;
     navButtonHoverBg?: string;
     navButtonSize?: string;
     navButtonFontSize?: string;
     navButtonBorderRadius?: string;
 
-    // 右上角关闭按钮
+    /** 右上角关闭按钮 */
     topCloseBtnSize?: string;
     topCloseBtnTop?: string;
     topCloseBtnRight?: string;
@@ -350,7 +475,7 @@ interface ImagesViewerOptions {
     topCloseBtnBgColor?: string;
     topCloseBtnHoverBg?: string;
 
-    // 信息栏相关
+    /** 信息栏相关 */
     infoBgColor?: string;
     infoBorderRadius?: string;
     infoPadding?: string;
@@ -358,7 +483,7 @@ interface ImagesViewerOptions {
     infoTop?: string;
     infoLeft?: string;
 
-    // 缩放指示器
+    /** 缩放指示器 */
     zoomIndicatorBg?: string;
     zoomIndicatorBorderRadius?: string;
     zoomIndicatorPadding?: string;
@@ -366,66 +491,19 @@ interface ImagesViewerOptions {
     zoomIndicatorTop?: string;
     zoomIndicatorLeft?: string;
 
-    // 通用
+    /** 通用 */
     activeColor?: string;
     textColor?: string;
     shadowColor?: string;
     transitionSpeed?: string;
 
-    // 缩略图
+    /** 缩略图 */
     thumbItemWidth?: string;
     thumbItemHeight?: string;
     thumbGap?: string;
     thumbPadding?: string;
     thumbMaxWidth?: string;
   };
-
-  /**
-   * 回调函数 - 查看器显示时触发
-   */
-  onShow?: (container: HTMLElement) => void;
-
-  /**
-   * 回调函数 - 查看器关闭时触发
-   */
-  onClose?: () => void;
-
-  /**
-   * 回调函数 - 图片切换时触发
-   * @param currentIndex 当前图片索引
-   * @param direction 切换方向 'prev' | 'next'
-   */
-  onChange?: (currentIndex: number, direction: 'prev' | 'next') => void;
-
-  /**
-   * 旋转事件回调
-   */
-  onRotate?: (data: RotateEventData) => void;
-
-  /**
-   * 拖动事件回调
-   */
-  onDrag?: (data: DragEventData) => void;
-
-  /**
-   * 缩放事件回调
-   */
-  onZoom?: (data: ZoomEventData) => void;
-
-  /**
-   * 信息栏自定义函数
-   */
-  onInfo?: (data: InfoTextParams) => string | null | undefined;
-
-  /**
-   * 页数显示自定义函数
-   */
-  onCounter?: (data: CounterParams) => string | null | undefined;
-
-  /**
-   * 缩放指数自定义函数
-   */
-  onZoomIndicator?: (data: ZoomIndicatorParams) => string | null | undefined;
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "images-viewer-js",
-  "version": "1.1.1",
+  "version": "1.1.5",
   "description": "images-viewer-js一个功能丰富的图片查看器，支持缩放、旋转、导航等操作。原生javascript实现。不局限于框架使用",
   "main": "dist/index.js",
   "type": "module",