一款实用的viewer.js 图片相册

Posted 2020-08-04

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

---

下载