viewer.js--一个强大的jQuery图像查看插件

viewer.js--⼀个强⼤的jQuery图像查看插件
Viewer 是⼀款强⼤的 jQuery 图像浏览插件。

主要功能：
⽀持选项
⽀持⽅法
⽀持事件
⽀持触摸
⽀持移动
⽀持缩放
⽀持旋转
⽀持键盘
跨浏览器⽀持
部分插件⽹站提供的下载包有缺陷，不能兼容ie8-10。

错误表现为放⼤的图⽚没有取到url，导致图⽚不显⽰。

所以此链接为 viewer的官⽅演⽰，及github上的开源代码。

使⽤⽅法：
1.引⼊css和js
<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>
插件默认会取图⽚的src地址。

如果想要放⼤之后换⼀张⼤图的话，可以把⼤图的路径写在data-original属性中，然后设置url : "data-original" 。

alt⽤来存放图⽚的标题。

3. JavaScript 部分
$('#viewer').viewer();
配置
名称类型默认值说明
inline布尔值false启⽤ inline 模式
button布尔值true显⽰右上⾓关闭按钮（jQuery 版本⽆效）
navbar布尔值/整型true显⽰缩略图导航
title布尔值/整型true显⽰当前图⽚的标题（现实 alt 属性及图⽚尺⼨）
toolbar布尔值/整型true显⽰⼯具栏
tooltip布尔值true显⽰缩放百分⽐
movable布尔值true图⽚是否可移动
zoomable布尔值true图⽚是否可缩放
rotatable布尔值true图⽚是否可旋转
scalable布尔值true图⽚是否可翻转
transition布尔值true使⽤ CSS3 过度
fullscreen布尔值true播放时是否全屏
keyboard布尔值true是否⽀持键盘
keyboard布尔值true是否⽀持键盘
名称类型默认值说明interval整型5000播放间隔，单位为毫秒
zoomRatio浮点型0.1⿏标滚动时的缩放⽐例
minZoomRatio浮点型0.01最⼩缩放⽐例
maxZoomRatio数字最⼤缩放⽐例
zIndex数字设置图⽚查看器 modal 模式时的 z-index
zIndexInline数字设置图⽚查看器 inline 模式时的 z-index
url字符串/函数设置⼤图⽚的 url
build函数回调函数，具体查看演⽰
built函数回调函数，具体查看演⽰
show函数回调函数，具体查看演⽰
shown函数回调函数，具体查看演⽰
hide函数回调函数，具体查看演⽰
hidden函数回调函数，具体查看演⽰
view函数回调函数，具体查看演⽰
viewed函数回调函数，具体查看演⽰
参数的⽤法：
$('#viewer').viewer({url:"data-original"});
都看到这⾥了，如果对你有帮助，请帮我点个推荐呀~ ：)。