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是否支持键盘interval整型5000播放间隔，单位为毫秒zoomRatio浮点型0.1鼠标滚动时的缩放比例minZoomRatio浮点型0.01最小缩放比例maxZoomRatio数字100最大缩放比例zIndex数字2015设置图片查看器 modal 模式时的 z-indexzIndexInline数字0设置图片查看器 inline 模式时的 z-indexurl字符串/函数src设置大图片的 urlbuild函数null回调函数，具体查看演示built函数null回调函数，具体查看演示show函数null回调函数，具体查看演示shown函数null回调函数，具体查看演示hide函数null回调函数，具体查看演示hidden函数null回调函数，具体查看演示view函数null回调函数，具体查看演示viewed函数null回调函数，具体查看演示

 

参数的用法：

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