images-viewer-js 1.0.0 → 1.0.2

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 +43 -27
  2. package/dist/index.esm.js +2 -4
  3. package/dist/index.js +2 -4
  4. package/dist/index.umd.js +2 -4
  5. package/package.json +3 -3
package/README.md CHANGED
@@ -1,4 +1,4 @@
1
- # ImageViewer 图片查看器
1
+ # ImagesViewer 图片查看器
2
2
 
3
3
  一个功能丰富、响应式的图片查看器，支持缩放、旋转、导航等操作。
4
4
 
@@ -17,6 +17,37 @@
17
17
 
18
18
  ## 安装和使用
19
19
 
20
+ ### 简单用法
21
+
22
+ ```javascript
23
+ // 单张图片
24
+ const viewer1 = new ImagesViewer('single-image.jpg');
25
+
26
+ // 多张图片
27
+ const viewer2 = new ImagesViewer({
28
+ images: ['img1.jpg', 'img2.jpg', 'img3.jpg'],
29
+ });
30
+
31
+ // 数组形式
32
+ const viewer3 = new ImagesViewer(['img1.jpg', 'img2.jpg']);
33
+ ```
34
+
35
+ ### npm
36
+
37
+ ```html
38
+ <!-- 引入包 -->
39
+ npm install images-viewer-js
40
+
41
+ <!-- vue 环境 -->
42
+ <script>
43
+ import ImagesViewer from 'images-viewer-js';
44
+ // 使用
45
+ const viewer = new ImagesViewer({
46
+ images: ['image1.jpg', 'image2.jpg', 'image3.jpg'],
47
+ });
48
+ </script>
49
+ ```
50
+
20
51
  ### 浏览器环境
21
52
 
22
53
  ```html
@@ -24,8 +55,8 @@
24
55
  <script src="image-viewer.js"></script>
25
56
 
26
57
  <script>
27
- // 使用全局变量 ImageViewer
28
- const viewer = new ImageViewer({
58
+ // 使用全局变量 ImagesViewer
59
+ const viewer = new ImagesViewer({
29
60
  images: ['image1.jpg', 'image2.jpg', 'image3.jpg'],
30
61
  });
31
62
  </script>
@@ -34,9 +65,9 @@
34
65
  ### CommonJS/Node.js
35
66
 
36
67
  ```javascript
37
- const ImageViewer = require('./image-viewer');
68
+ const ImagesViewer = require('./image-viewer');
38
69
 
39
- const viewer = new ImageViewer({
70
+ const viewer = new ImagesViewer({
40
71
  images: ['image1.jpg', 'image2.jpg', 'image3.jpg'],
41
72
  });
42
73
  ```
@@ -44,8 +75,8 @@ const viewer = new ImageViewer({
44
75
  ### AMD
45
76
 
46
77
  ```javascript
47
- define(['image-viewer'], function (ImageViewer) {
48
- const viewer = new ImageViewer({
78
+ define(['image-viewer'], function (ImagesViewer) {
79
+ const viewer = new ImagesViewer({
49
80
  images: ['image1.jpg', 'image2.jpg', 'image3.jpg'],
50
81
  });
51
82
  });
@@ -56,7 +87,7 @@ define(['image-viewer'], function (ImageViewer) {
56
87
  ### 基本配置
57
88
 
58
89
  ```javascript
59
- const viewer = new ImageViewer({
90
+ const viewer = new ImagesViewer({
60
91
  // 图片数组（必需）
61
92
  images: ['image1.jpg', 'image2.jpg'],
62
93
 
@@ -114,21 +145,6 @@ const viewer = new ImageViewer({
114
145
  });
115
146
  ```
116
147
 
117
- ### 简单用法
118
-
119
- ```javascript
120
- // 单张图片
121
- const viewer1 = new ImageViewer('single-image.jpg');
122
-
123
- // 多张图片
124
- const viewer2 = new ImageViewer({
125
- images: ['img1.jpg', 'img2.jpg', 'img3.jpg'],
126
- });
127
-
128
- // 数组形式
129
- const viewer3 = new ImageViewer(['img1.jpg', 'img2.jpg']);
130
- ```
131
-
132
148
  ## 方法
133
149
 
134
150
  ### 图片导航
@@ -233,7 +249,7 @@ viewer.downloadImage();
233
249
  ### 自定义主题示例
234
250
 
235
251
  ```javascript
236
- const viewer = new ImageViewer({
252
+ const viewer = new ImagesViewer({
237
253
  images: ['image1.jpg', 'image2.jpg'],
238
254
  theme: {
239
255
  viewerBgColor: 'rgba(0, 0, 0, 0.8)',
@@ -275,7 +291,7 @@ const viewer = new ImageViewer({
275
291
  <!DOCTYPE html>
276
292
  <html>
277
293
  <head>
278
- <title>ImageViewer 示例</title>
294
+ <title>ImagesViewer 示例</title>
279
295
  </head>
280
296
  <body>
281
297
  <button onclick="openViewer()">查看图片</button>
@@ -283,7 +299,7 @@ const viewer = new ImageViewer({
283
299
  <script src="image-viewer.js"></script>
284
300
  <script>
285
301
  function openViewer() {
286
- const viewer = new ImageViewer({
302
+ const viewer = new ImagesViewer({
287
303
  images: [
288
304
  'https://example.com/image1.jpg',
289
305
  'https://example.com/image2.jpg',
@@ -303,7 +319,7 @@ const viewer = new ImageViewer({
303
319
  ### 高级定制示例
304
320
 
305
321
  ```javascript
306
- const advancedViewer = new ImageViewer({
322
+ const advancedViewer = new ImagesViewer({
307
323
  images: imageArray,
308
324
  buttons: {
309
325
  zoomIn: true,
package/dist/index.esm.js CHANGED
@@ -7,7 +7,6 @@ function getDefaultExportFromCjs (x) {
7
7
  var imageViewer = {exports: {}};
8
8
 
9
9
  (function (module, exports) {
10
- // image-viewer.js - 修复居中问题的版本
11
10
  (function (global, factory) {
12
11
  // UMD包装器，支持CommonJS、AMD和全局变量
13
12
  {
@@ -37,7 +36,7 @@ var imageViewer = {exports: {}};
37
36
  };
38
37
  }
39
38
 
40
- class ImageViewer {
39
+ class ImagesViewer {
41
40
  constructor(options) {
42
41
  // 默认配置
43
42
  this.defaultOptions = {
@@ -1800,8 +1799,7 @@ var imageViewer = {exports: {}};
1800
1799
  }
1801
1800
  }
1802
1801
 
1803
- // 返回ImageViewer类
1804
- return ImageViewer;
1802
+ return ImagesViewer;
1805
1803
  });
1806
1804
  } (imageViewer));
1807
1805
 
package/dist/index.js CHANGED
@@ -9,7 +9,6 @@ function getDefaultExportFromCjs (x) {
9
9
  var imageViewer = {exports: {}};
10
10
 
11
11
  (function (module, exports) {
12
- // image-viewer.js - 修复居中问题的版本
13
12
  (function (global, factory) {
14
13
  // UMD包装器，支持CommonJS、AMD和全局变量
15
14
  {
@@ -39,7 +38,7 @@ var imageViewer = {exports: {}};
39
38
  };
40
39
  }
41
40
 
42
- class ImageViewer {
41
+ class ImagesViewer {
43
42
  constructor(options) {
44
43
  // 默认配置
45
44
  this.defaultOptions = {
@@ -1802,8 +1801,7 @@ var imageViewer = {exports: {}};
1802
1801
  }
1803
1802
  }
1804
1803
 
1805
- // 返回ImageViewer类
1806
- return ImageViewer;
1804
+ return ImagesViewer;
1807
1805
  });
1808
1806
  } (imageViewer));
1809
1807
 
package/dist/index.umd.js CHANGED
@@ -13,7 +13,6 @@
13
13
  var imageViewer = {exports: {}};
14
14
 
15
15
  (function (module, exports) {
16
- // image-viewer.js - 修复居中问题的版本
17
16
  (function (global, factory) {
18
17
  // UMD包装器，支持CommonJS、AMD和全局变量
19
18
  {
@@ -43,7 +42,7 @@
43
42
  };
44
43
  }
45
44
 
46
- class ImageViewer {
45
+ class ImagesViewer {
47
46
  constructor(options) {
48
47
  // 默认配置
49
48
  this.defaultOptions = {
@@ -1806,8 +1805,7 @@
1806
1805
  }
1807
1806
  }
1808
1807
 
1809
- // 返回ImageViewer类
1810
- return ImageViewer;
1808
+ return ImagesViewer;
1811
1809
  });
1812
1810
  } (imageViewer));
1813
1811
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "images-viewer-js",
3
- "version": "1.0.0",
3
+ "version": "1.0.2",
4
4
  "description": "image-viewer一个功能丰富的图片查看器，支持缩放、旋转、导航等操作。原生javascript实现。不局限于框架使用",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.esm.js",
@@ -29,9 +29,9 @@
29
29
  "license": "MIT",
30
30
  "repository": {
31
31
  "type": "git",
32
- "url": "https://gitee.com/ybchen292/image-viewer"
32
+ "url": "https://github.com/ybchen292/images-viewer"
33
33
  },
34
- "homepage": "https://gitee.com/ybchen292/image-viewer",
34
+ "homepage": "https://github.com/ybchen292/images-viewer",
35
35
  "devDependencies": {
36
36
  "@rollup/plugin-commonjs": "^25.0.0",
37
37
  "@rollup/plugin-node-resolve": "^15.0.0",