dd

viewer.js 图片相册


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-index2015
zIndexInline设置图片查看器 inline 模式时的 z-index0
url设置大图片的 urlsrc
build回调函数,具体查看演示null
built回调函数,具体查看演示null
show回调函数,具体查看演示null
shown回调函数,具体查看演示null
hide回调函数,具体查看演示null
hidden回调函数,具体查看演示null
view回调函数,具体查看演示null
viewed回调函数,具体查看演示null

云盘内容


 jQuery插件大全打包

HTML5+CSS3+PHP+jQuery等示例
大小
170M(300+个文件)

注意:示例只是当前的内容,【下载】的是全部jQuery插件一起打包后的文件。

下载地址