分享一个非常简单的图片预览插件viewer

image-20200719214433290

首先引入jscss

viewer.js:下载链接

jquery1.11.3.js:下载链接

jquery-viewer.min.js:下载链接

viewer.css:下载链接

然后引入

1
2
3
4
5
6
7
8
9
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="{路径}/viewer.css" rel="external nofollow" rel="external nofollow">
<script src="{路径}/jquery-1.11.3.min.js"></script>
<script src="{路径}/viewer.js"></script>
<script src="{路径}/jquery-viewer.min.js"></script>
</head>

使用方式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<body>
<!-- 需要一个块级容器 -->
<div>
<img id="image" src="http://p16.qhimg.com/bdm/960_593_0/t01ba97d26345750c04.jpg" alt="Picture">
</div>

<div>
<ul id="images">
<li><img src="http://p7.qhimg.com/bdm/960_593_0/t01b32959885c781013.jpg" alt="Picture 1"></li>
<li><img src="http://p19.qhimg.com/bdm/480_296_0/t01bf50d8d5d76238c6.jpg" alt="Picture 2"></li>
<li><img src="http://p18.qhimg.com/bdm/960_593_0/t0177a850faae7b42f4.jpg" alt="Picture 3"></li>
</ul>
</div>
</body>
<script type="text/javascript">
var $image = $('#image');
$image.viewer({
//行内显示(默认初始化)
inline: false,
viewed: function () {
//缩放等级(1倍)
$image.viewer('zoomTo', 1);
}
});
// 初始化后获取Viewer.js实例
var viewer = $image.data('viewer');
// 查看图像列表
$('#images').viewer();
</script>

项目文档:链接