介绍

Viewer.js 是一款强大的图片预览查看器，之前在做项目的时候遇到的是无法给网页中的图片添加一个强大的预览功能，而Viewer.js刚好满足了我的需求。本文就简单的介绍一下这样一个神奇的图片预览插件：

Github

//原生版本
https://github.com/fengyuanchen/viewerjs 
//jquery版本
https://github.com/fengyuanchen/jquery-viewer

功能特性

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

从功能来看，这是一款功能强大的图片预览插件，对于基本的需求大多数都可以满足，而且自带原生版本和jquery版本，方便使用!

如何使用？

• 安装

现在大多数情况直接使用npm进行安装，当然也可以下载发不好的js文件进行使用

npm install viewerjs

<link  href="/path/to/viewer.css" rel="stylesheet">
<script src="/path/to/viewer.js"></script>

• 用法

new Viewer(element[, options])

最简单的示例

• HTML

<div>
  <img id="image" src="picture.jpg" alt="Picture">
</div>

<div>
  <ul id="images">
    <li><img src="picture-1.jpg" alt="Picture 1"></li>
    <li><img src="picture-2.jpg" alt="Picture 2"></li>
    <li><img src="picture-3.jpg" alt="Picture 3"></li>
  </ul>
</div>

• Javascript

// import 'viewerjs/dist/viewer.css';
import Viewer from 'viewerjs';

// View an image
const viewer = new Viewer(document.getElementById('image'), {
  inline: true,
  viewed() {
    viewer.zoomTo(1);
  },
});

// View a list of images
const gallery = new Viewer(document.getElementById('images'));

提供的配置

由于排版原因，这里直接放截图，或者大家可以到Github上查看详细的配置

其他推荐

Viewerjs的作者不仅仅是这样一个作品，他还有一个另外的图片类作品，Web端的图片裁剪插件，同样推荐给大家：

https://github.com/fengyuanchen/cropperjs

总结

不得不感谢这样的优秀作品的作者提供了如此优雅的工具，几行代码就可以实现强悍的图片预览功能，如果有类似需求的朋友千万不要错过！