Viewer.js --- 图片浏览插件

主要功能：

• 支持选项
• 支持方法
• 支持事件
• 支持触摸
• 支持移动
• 支持缩放
• 支持旋转
• 支持键盘
• 跨浏览器支持

作者githup地址:https://github.com/fengyuanchen/viewer

演示地址：http://fengyuanchen.github.io/viewer/

基本使用方法：

　　1.引入文件

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

　　2.HTML代码

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

　　3.JS代码

$(‘#viewer‘).viewer(); 

其他相关：

　　如需配置放大前后图片不同，可在src属性中放入原图，data-original属性中放入希望见到的放大后的图。在JS中进行配置：

$(‘#viewer‘).viewer({url:"data-original"});

　　如需通过动态修改data-original，来达到动态加载图片的效果，需保证在原图已展示完成的情况下，执行update代码：

$(‘#viewer‘).viewer(‘update’);

其他配置可在演示中查看，其中也有回调函数和自定义方法，总体来说是挺好用的插件。

配置

原文地址：https://www.cnblogs.com/Icebang/p/9986588.html