images-viewer-js 1.0.8 → 1.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +34 -37
  2. package/dist/index.esm.js +4 -4
  3. package/dist/index.js +4 -4
  4. package/dist/index.umd.js +4 -4
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -56,7 +56,7 @@ npm install images-viewer-js
56
56
 
57
57
  ```html
58
58
  <!-- 引入脚本 -->
59
- <script src="image-viewer.js"></script>
59
+ <script src="images-viewer.js"></script>
60
60
 
61
61
  <script>
62
62
  // 使用全局变量 ImagesViewer
@@ -69,7 +69,7 @@ npm install images-viewer-js
69
69
  ### CommonJS/Node.js
70
70
 
71
71
  ```javascript
72
- const ImagesViewer = require('./image-viewer');
72
+ const ImagesViewer = require('./images-viewer-js');
73
73
 
74
74
  const viewer = new ImagesViewer({
75
75
  images: ['image1.jpg', 'image2.jpg', 'image3.jpg'],
@@ -79,7 +79,7 @@ const viewer = new ImagesViewer({
79
79
  ### AMD
80
80
 
81
81
  ```javascript
82
- define(['image-viewer'], function (ImagesViewer) {
82
+ define(['images-viewer-js'], function (ImagesViewer) {
83
83
  const viewer = new ImagesViewer({
84
84
  images: ['image1.jpg', 'image2.jpg', 'image3.jpg'],
85
85
  });
@@ -128,23 +128,48 @@ const viewer = new ImagesViewer({
128
128
 
129
129
  // 主题配置
130
130
  theme: {
131
- // 背景颜色
131
+ // 背景相关
132
132
  viewerBgColor: 'rgba(0, 0, 0, 0.4)',
133
133
 
134
- // 工具栏样式
134
+ // 工具栏相关
135
135
  toolbarBgColor: 'rgba(150, 150, 150, 0.7)',
136
136
  toolbarBorderRadius: '30px',
137
137
  toolbarPadding: '8px 12px',
138
138
  toolbarBottom: '20px',
139
139
 
140
- // 按钮样式
140
+ // 按钮相关（半透明中灰）
141
141
  buttonBgColor: 'rgba(150, 150, 150, 0.7)',
142
142
  buttonHoverBg: 'rgba(200, 200, 200, 0.4)',
143
143
  buttonSize: '50px',
144
144
  buttonFontSize: '20px',
145
145
  buttonBorderRadius: '50%',
146
146
 
147
- // 更多主题配置...
147
+ // 右上角关闭按钮
148
+ topCloseBtnSize: '44px',
149
+ topCloseBtnTop: '20px',
150
+ topCloseBtnRight: '20px',
151
+
152
+ // 信息栏相关（半透明浅灰）
153
+ infoBgColor: 'rgba(150, 150, 150, 0.7)',
154
+ infoBorderRadius: '12px',
155
+ infoPadding: '10px 15px',
156
+ infoFontSize: '13px',
157
+ infoTop: '70px',
158
+ infoLeft: '20px',
159
+
160
+ // 缩放指示器
161
+ zoomIndicatorBg: 'rgba(150, 150, 150, 0.7)',
162
+ zoomIndicatorBorderRadius: '18px',
163
+ zoomIndicatorPadding: '6px 12px',
164
+ zoomIndicatorFontSize: '14px',
165
+ zoomIndicatorTop: '20px',
166
+ zoomIndicatorLeft: '20px',
167
+
168
+ // 通用
169
+ activeColor: 'rgba(100, 150, 255, 0.8)',
170
+ textColor: 'rgba(255, 255, 255, 0.9)',
171
+ shadowColor: 'rgba(0, 0, 0, 0.2)',
172
+ transitionSpeed: '0.3s',
148
173
  },
149
174
  });
150
175
  ```
@@ -223,7 +248,6 @@ viewer.downloadImage();
223
248
  - **拖动**: 按住鼠标左键拖动图片
224
249
  - **缩放**: 鼠标滚轮
225
250
  - **双击**: 切换缩放状态
226
- - **右键**: 无操作（避免上下文菜单）
227
251
 
228
252
  ### 触摸操作
229
253
 
@@ -231,27 +255,6 @@ viewer.downloadImage();
231
255
  - **双指捏合**: 缩放图片
232
256
  - **双击**: 切换缩放状态
233
257
 
234
- ## 主题定制
235
-
236
- ### CSS 变量
237
-
238
- 查看器使用 CSS 变量进行样式定制，可以通过主题配置修改：
239
-
240
- ```css
241
- :root {
242
- --viewer-bg-color: rgba(0, 0, 0, 0.4);
243
- --toolbar-bg-color: rgba(150, 150, 150, 0.7);
244
- --button-bg-color: rgba(150, 150, 150, 0.7);
245
- --button-hover-bg: rgba(200, 200, 200, 0.4);
246
- --text-color: rgba(255, 255, 255, 0.9);
247
- --active-color: rgba(100, 150, 255, 0.8);
248
- --shadow-color: rgba(0, 0, 0, 0.2);
249
- --transition-speed: 0.3s;
250
- }
251
- ```
252
-
253
- ### 自定义主题示例
254
-
255
258
  ```javascript
256
259
  const viewer = new ImagesViewer({
257
260
  images: ['image1.jpg', 'image2.jpg'],
@@ -281,12 +284,6 @@ const viewer = new ImagesViewer({
281
284
  - Safari 12+
282
285
  - Edge 79+
283
286
 
284
- ## 注意事项
285
-
286
- 1. **跨域图片**: 对于跨域图片，下载功能可能受限
287
- 2. **大图片**: 建议对超大图片进行适当压缩
288
- 3. **性能**: 大量图片时建议使用缩略图预加载
289
-
290
287
  ## 示例
291
288
 
292
289
  ### 基本示例
@@ -300,7 +297,7 @@ const viewer = new ImagesViewer({
300
297
  <body>
301
298
  <button onclick="openViewer()">查看图片</button>
302
299
 
303
- <script src="image-viewer.js"></script>
300
+ <script src="images-viewer.js"></script>
304
301
  <script>
305
302
  function openViewer() {
306
303
  const viewer = new ImagesViewer({
@@ -323,7 +320,7 @@ const viewer = new ImagesViewer({
323
320
  ### 高级定制示例
324
321
 
325
322
  ```javascript
326
- const advancedViewer = new ImagesViewer({
323
+ const viewer = new ImagesViewer({
327
324
  images: imageArray,
328
325
  buttons: {
329
326
  zoomIn: true,
package/dist/index.esm.js CHANGED
@@ -4,7 +4,7 @@ function getDefaultExportFromCjs (x) {
4
4
  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
5
5
  }
6
6
 
7
- var imageViewer = {exports: {}};
7
+ var imagesViewer = {exports: {}};
8
8
 
9
9
  (function (module, exports) {
10
10
  (function (global, factory) {
@@ -1819,9 +1819,9 @@ var imageViewer = {exports: {}};
1819
1819
 
1820
1820
  return ImagesViewer;
1821
1821
  });
1822
- } (imageViewer));
1822
+ } (imagesViewer));
1823
1823
 
1824
- var imageViewerExports = imageViewer.exports;
1825
- var index = /*@__PURE__*/getDefaultExportFromCjs(imageViewerExports);
1824
+ var imagesViewerExports = imagesViewer.exports;
1825
+ var index = /*@__PURE__*/getDefaultExportFromCjs(imagesViewerExports);
1826
1826
 
1827
1827
  export { index as default };
package/dist/index.js CHANGED
@@ -6,7 +6,7 @@ function getDefaultExportFromCjs (x) {
6
6
  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
7
7
  }
8
8
 
9
- var imageViewer = {exports: {}};
9
+ var imagesViewer = {exports: {}};
10
10
 
11
11
  (function (module, exports) {
12
12
  (function (global, factory) {
@@ -1821,9 +1821,9 @@ var imageViewer = {exports: {}};
1821
1821
 
1822
1822
  return ImagesViewer;
1823
1823
  });
1824
- } (imageViewer));
1824
+ } (imagesViewer));
1825
1825
 
1826
- var imageViewerExports = imageViewer.exports;
1827
- var index = /*@__PURE__*/getDefaultExportFromCjs(imageViewerExports);
1826
+ var imagesViewerExports = imagesViewer.exports;
1827
+ var index = /*@__PURE__*/getDefaultExportFromCjs(imagesViewerExports);
1828
1828
 
1829
1829
  module.exports = index;
package/dist/index.umd.js CHANGED
@@ -10,7 +10,7 @@
10
10
  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
11
11
  }
12
12
 
13
- var imageViewer = {exports: {}};
13
+ var imagesViewer = {exports: {}};
14
14
 
15
15
  (function (module, exports) {
16
16
  (function (global, factory) {
@@ -1825,10 +1825,10 @@
1825
1825
 
1826
1826
  return ImagesViewer;
1827
1827
  });
1828
- } (imageViewer));
1828
+ } (imagesViewer));
1829
1829
 
1830
- var imageViewerExports = imageViewer.exports;
1831
- var index = /*@__PURE__*/getDefaultExportFromCjs(imageViewerExports);
1830
+ var imagesViewerExports = imagesViewer.exports;
1831
+ var index = /*@__PURE__*/getDefaultExportFromCjs(imagesViewerExports);
1832
1832
 
1833
1833
  return index;
1834
1834
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "images-viewer-js",
3
- "version": "1.0.8",
3
+ "version": "1.0.9",
4
4
  "description": "images-viewer一个功能丰富的图片查看器，支持缩放、旋转、导航等操作。原生javascript实现。不局限于框架使用",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.esm.js",