Viewer.js用法说明

viewerJs介绍

Viewer.js 是一款强大的图片查看器。我们通过Viewer.js 在页面上添加强大的图片查看功能，同时，这款优秀的插件配置操作起来也非常的方便。下图即为插件的演示样式：

Viewer.js 的特点

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

用法实例

<ul id="viewer">
    <li><img data-original="img/tibet-1.jpg" src="img/tibet-1.jpg" alt="图片1"></li>
    <li><img data-original="img/tibet-2.jpg" src="img/tibet-2.jpg" alt="图片2"></li>
    <li><img data-original="img/tibet-3.jpg" src="img/tibet-3.jpg" alt="图片3"></li>
    <li><img data-original="img/tibet-4.jpg" src="img/tibet-4.jpg" alt="图片4"></li>
    <li><img data-original="img/tibet-5.jpg" src="img/tibet-5.jpg" alt="图片5"></li>
    <li><img data-original="img/tibet-6.jpg" src="img/tibet-6.jpg" alt="图片6"></li>
</ul>

<script type="text/javascript">
    // 用法实例
    $('#viewer').viewer({
        url: 'data-original',
        title: false
    });
</script>

通过以上代码片段，我们即可使用viewerjs的图片查看功能。需要注意的是js 里面的内容，我们通过viewer方法绑定，即可定义那些图片需要进行查看。例子中的url 和 title 属于viewer方法的参数配置，通过参数配置我们可以调整部分样式。

viewer 函数参数说明

viewer({ }) 方法除了实例中提到的url 和 title 参数之外，还可以配置其他参数，具体的属性参数如下：

后记

演示地址：http://www.dowebok.com/demo/192/index2.html

相关博客：https://www.cnblogs.com/Jimc/p/10132177.html

作者github：https://github.com/fengyuanchen/viewerjs

总的来说，Viewerjs虽然简单且易上手，但是却并不影响其在图片查看方面的强大功能。目前网上并没有完整的框架使用说明，作者在github上的使用手册也有很多不明确的地方，更多的是需要使用者自己通过演示地址包括其源码去分析理解。因为其简单，所以即使没有完整使用文档也不太影响其使用。

以下是完整的代码，包括插件代码和演示地址的页面的源码。

https://download.csdn.net/download/qq_41057885/19988143

如果后面被csdn改成了需要积分才能下载的话，私聊我即可。