图片预览插件Viewer.js的使用

viewer.js是一个强大的基于jQuery的图像查看插件(支持旋转、缩放等)，功能超级超级全。

特点

1. 支持移动设备触摸事件
2. 支持响应式
3. 支持放大/缩小
4. 支持旋转（类似微博的图片旋转）
5. 支持水平/垂直翻转
6. 支持图片移动
7. 支持键盘
8. 支持全屏幻灯片模式（可做屏保）
9. 支持缩略图
10. 支持标题显示
11. 支持多种自定义事件

Viewer.js 提供了纯 JS 版本和 jQuery 版本,版本名字虽然一样，但代码不一样，不能通用。

项目需求是实现图片点击预览，所以这次只是使用了Viewer的最基础的功能，算是一个入门，其他的功能有待研究吧(●'◡'●)。

开始

纯JS版本：https://github.com/fengyuanchen/viewerjs

jQuery 版本：https://github.com/fengyuanchen/jquery-viewer

因为我的项目中引入了jquery，所以我下载的是jquery版本的。(老项目了，使用的是jsp的写法，使用直接引入的方法，vue可以通过 npm install viewerjs 的方法引入)。

注意避雷

• jquery版本下载好之后, dist 文件里有需要的js文件，但是死活找不到css文件（黑脸.jpg）。所以，又下载了js版本的，把两个凑了一下。

• docs文件里是使用演示文件，不过需要注意的是，他这里的jquery引入有误，所以演示文件不能正常展示，可以手动修改。

  
  
  下载好的文件目录

开始使用

head标签中引入css

html部分

项目里html部分使用的是jsp的写法，不用在意这些，只需要给包裹图片的父元素一个特殊的类名即可。

引入js文件

第一次只引入了下面的jquery-viewer.min.js，结果不生效，才引入了上面的，所以大家可以直接使用js版本的。

js部分

使用起来就比较简单了，通过$符号获取到包裹图片的父元素，调用viewer功能。

参数是一个对象，里面可以传入各项配置，而且是通过简单的true,false控制的，所以超级简单，对着表单使用就行

配置表1

配置表2

下面是成果图

image.png

image.png