Viewer.js 是一款强大的图片相册插件，像SNS交友网站一般都会用到点击缩略图，弹出层大图片，而且弹出层有多个控制按钮，比如放大缩小、旋转、撤回等，底部有缩略图列表可切换。
支持移动设备触摸事件
支持响应式
支持放大/缩小
支持旋转（类似微博的图片旋转）
支持水平/垂直翻转
支持图片移动
支持键盘
支持全屏幻灯片模式（可做屏保）
支持缩略图
支持标题显示
支持多种自定义事件
在线实例
| 默认效果 | jQuery版本 |
| 回调函数 | 自定义方法 |
使用方法
<ul id="sucaihuo">
<li><img data-original="img/tibet-1.jpg" src="img/thumbnails/tibet-1.jpg" alt="图片1"></li>
<li><img data-original="img/tibet-2.jpg" src="img/thumbnails/tibet-2.jpg" alt="图片2"></li>
<li><img data-original="img/tibet-3.jpg" src="img/thumbnails/tibet-3.jpg" alt="图片3"></li>
<li><img data-original="img/tibet-4.jpg" src="img/thumbnails/tibet-4.jpg" alt="图片4"></li>
<li><img data-original="img/tibet-5.jpg" src="img/thumbnails/tibet-5.jpg" alt="图片5"></li>
<li><img data-original="img/tibet-6.jpg" src="img/thumbnails/tibet-6.jpg" alt="图片6"></li>
</ul>
var viewer = new Viewer(document.getElementById(‘sucaihuo‘), {
url: ‘data-original‘
});
参数详解
| 参数 | 描述 | 默认值 |
| inline | 启用 inline 模式 | false |
| button | 显示右上角关闭按钮（jQuery 版本无效） | true |
| navbar | 显示缩略图导航 | true |
| title | 显示当前图片的标题（现实 alt 属性及图片尺寸） | true |
| toolbar | 显示工具栏 | true |
| tooltip | 显示缩放百分比 | true |
| movable | 图片是否可移动 | true |
| zoomable | 图片是否可缩放 | true |
| rotatable | 图片是否可旋转 | true |
| scalable | 图片是否可翻转 | true |
| transition | 使用 CSS3 过度 | true |
| fullscreen | 播放时是否全屏 | true |
| keyboard | 是否支持键盘 | true |
| interval | 播放间隔，单位为毫秒 | 5000 |
| zoomRatio | 鼠标滚动时的缩放比例 | 0.1 |
| minZoomRatio | 最小缩放比例 | 0.01 |
| maxZoomRatio | 最大缩放比例 | 100 |
| zIndex | 设置图片查看器 modal 模式时的 z-index | 2015 |
| zIndexInline | 设置图片查看器 inline 模式时的 z-index | 0 |
| url | 设置大图片的 url | src |
| build | 回调函数，具体查看演示 | null |
| built | 回调函数，具体查看演示 | null |
| show | 回调函数，具体查看演示 | null |
| shown | 回调函数，具体查看演示 | null |
| hide | 回调函数，具体查看演示 | null |
| hidden | 回调函数，具体查看演示 | null |
| view | 回调函数，具体查看演示 | null |
| viewed | 回调函数，具体查看演示 | null |
下载
时间： 2024-07-29 12:47:38