images-viewer-js 1.0.1 → 1.0.3
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.
- package/README.md +30 -30
- package/dist/index.esm.js +93 -77
- package/dist/index.js +93 -77
- package/dist/index.min.js +1 -1
- package/dist/index.umd.js +93 -77
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
#
|
|
1
|
+
# ImagesViewer 图片查看器
|
|
2
2
|
|
|
3
|
-
一个功能丰富、响应式的图片查看器，支持缩放、旋转、导航等操作。
|
|
3
|
+
一个功能丰富、响应式的图片查看器，支持缩放、旋转、导航等操作。[预览地址](https://ybchen292.github.io/images-viewer/)
|
|
4
4
|
|
|
5
5
|
## 特性
|
|
6
6
|
|
|
@@ -17,6 +17,21 @@
|
|
|
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
|
+
|
|
20
35
|
### npm
|
|
21
36
|
|
|
22
37
|
```html
|
|
@@ -25,9 +40,9 @@ npm install images-viewer-js
|
|
|
25
40
|
|
|
26
41
|
<!-- vue 环境 -->
|
|
27
42
|
<script>
|
|
28
|
-
import
|
|
43
|
+
import ImagesViewer from 'images-viewer-js';
|
|
29
44
|
// 使用
|
|
30
|
-
const viewer = new
|
|
45
|
+
const viewer = new ImagesViewer({
|
|
31
46
|
images: ['image1.jpg', 'image2.jpg', 'image3.jpg'],
|
|
32
47
|
});
|
|
33
48
|
</script>
|
|
@@ -40,8 +55,8 @@ npm install images-viewer-js
|
|
|
40
55
|
<script src="image-viewer.js"></script>
|
|
41
56
|
|
|
42
57
|
<script>
|
|
43
|
-
// 使用全局变量
|
|
44
|
-
const viewer = new
|
|
58
|
+
// 使用全局变量 ImagesViewer
|
|
59
|
+
const viewer = new ImagesViewer({
|
|
45
60
|
images: ['image1.jpg', 'image2.jpg', 'image3.jpg'],
|
|
46
61
|
});
|
|
47
62
|
</script>
|
|
@@ -50,9 +65,9 @@ npm install images-viewer-js
|
|
|
50
65
|
### CommonJS/Node.js
|
|
51
66
|
|
|
52
67
|
```javascript
|
|
53
|
-
const
|
|
68
|
+
const ImagesViewer = require('./image-viewer');
|
|
54
69
|
|
|
55
|
-
const viewer = new
|
|
70
|
+
const viewer = new ImagesViewer({
|
|
56
71
|
images: ['image1.jpg', 'image2.jpg', 'image3.jpg'],
|
|
57
72
|
});
|
|
58
73
|
```
|
|
@@ -60,8 +75,8 @@ const viewer = new ImageViewer({
|
|
|
60
75
|
### AMD
|
|
61
76
|
|
|
62
77
|
```javascript
|
|
63
|
-
define(['image-viewer'], function (
|
|
64
|
-
const viewer = new
|
|
78
|
+
define(['image-viewer'], function (ImagesViewer) {
|
|
79
|
+
const viewer = new ImagesViewer({
|
|
65
80
|
images: ['image1.jpg', 'image2.jpg', 'image3.jpg'],
|
|
66
81
|
});
|
|
67
82
|
});
|
|
@@ -72,7 +87,7 @@ define(['image-viewer'], function (ImageViewer) {
|
|
|
72
87
|
### 基本配置
|
|
73
88
|
|
|
74
89
|
```javascript
|
|
75
|
-
const viewer = new
|
|
90
|
+
const viewer = new ImagesViewer({
|
|
76
91
|
// 图片数组（必需）
|
|
77
92
|
images: ['image1.jpg', 'image2.jpg'],
|
|
78
93
|
|
|
@@ -130,21 +145,6 @@ const viewer = new ImageViewer({
|
|
|
130
145
|
});
|
|
131
146
|
```
|
|
132
147
|
|
|
133
|
-
### 简单用法
|
|
134
|
-
|
|
135
|
-
```javascript
|
|
136
|
-
// 单张图片
|
|
137
|
-
const viewer1 = new ImageViewer('single-image.jpg');
|
|
138
|
-
|
|
139
|
-
// 多张图片
|
|
140
|
-
const viewer2 = new ImageViewer({
|
|
141
|
-
images: ['img1.jpg', 'img2.jpg', 'img3.jpg'],
|
|
142
|
-
});
|
|
143
|
-
|
|
144
|
-
// 数组形式
|
|
145
|
-
const viewer3 = new ImageViewer(['img1.jpg', 'img2.jpg']);
|
|
146
|
-
```
|
|
147
|
-
|
|
148
148
|
## 方法
|
|
149
149
|
|
|
150
150
|
### 图片导航
|
|
@@ -249,7 +249,7 @@ viewer.downloadImage();
|
|
|
249
249
|
### 自定义主题示例
|
|
250
250
|
|
|
251
251
|
```javascript
|
|
252
|
-
const viewer = new
|
|
252
|
+
const viewer = new ImagesViewer({
|
|
253
253
|
images: ['image1.jpg', 'image2.jpg'],
|
|
254
254
|
theme: {
|
|
255
255
|
viewerBgColor: 'rgba(0, 0, 0, 0.8)',
|
|
@@ -291,7 +291,7 @@ const viewer = new ImageViewer({
|
|
|
291
291
|
<!DOCTYPE html>
|
|
292
292
|
<html>
|
|
293
293
|
<head>
|
|
294
|
-
<title>
|
|
294
|
+
<title>ImagesViewer 示例</title>
|
|
295
295
|
</head>
|
|
296
296
|
<body>
|
|
297
297
|
<button onclick="openViewer()">查看图片</button>
|
|
@@ -299,7 +299,7 @@ const viewer = new ImageViewer({
|
|
|
299
299
|
<script src="image-viewer.js"></script>
|
|
300
300
|
<script>
|
|
301
301
|
function openViewer() {
|
|
302
|
-
const viewer = new
|
|
302
|
+
const viewer = new ImagesViewer({
|
|
303
303
|
images: [
|
|
304
304
|
'https://example.com/image1.jpg',
|
|
305
305
|
'https://example.com/image2.jpg',
|
|
@@ -319,7 +319,7 @@ const viewer = new ImageViewer({
|
|
|
319
319
|
### 高级定制示例
|
|
320
320
|
|
|
321
321
|
```javascript
|
|
322
|
-
const advancedViewer = new
|
|
322
|
+
const advancedViewer = new ImagesViewer({
|
|
323
323
|
images: imageArray,
|
|
324
324
|
buttons: {
|
|
325
325
|
zoomIn: true,
|