你的位置:首页 > Java教程

[Java教程]一款实用的viewer.js 图片相册


Viewer.js 是一款强大的图片相册插件,像SNS交友网站一般都会用到点击缩略图,弹出层大图片,而且弹出层有多个控制按钮,比如放大缩小、旋转、撤回等,底部有缩略图列表可切换。

支持移动设备触摸事件
支持响应式
支持放大/缩小
支持旋转(类似微博的图片旋转)
支持水平/垂直翻转
支持图片移动
支持键盘
支持全屏幻灯片模式(可做屏保)
支持缩略图
支持标题显示
支持多种自定义事件

在线实例

默认效果jQuery版本
回调函数自定义方法

使用方法

<ul id="sucaihuo">     <li><img src="img/tibet-1.jpg"  alt="图片1"></li>     <li><img src="img/tibet-2.jpg"  alt="图片2"></li>     <li><img src="img/tibet-3.jpg"  alt="图片3"></li>     <li><img src="img/tibet-4.jpg"  alt="图片4"></li>     <li><img src="img/tibet-5.jpg"  alt="图片5"></li>     <li><img src="img/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

下载