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 |
文件 | jQuery插件大全打包 |
内容 | HTML5+CSS3+PHP+jQuery等示例 |
大小 | 170M(300+个文件) |
注意:示例只是当前的内容,【下载】的是全部jQuery插件一起打包后的文件。