首页 > 代码库 > 一款实用的viewer.js 图片相册

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

2024-08-11 04:38:57   212人阅读

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

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

在线实例

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

使用方法

<ul id="sucaihuo">     <li><img data-original="img/tibet-1.jpg" src="http://www.mamicode.com/img/thumbnails/tibet-1.jpg" alt="图片1"></li>     <li><img data-original="img/tibet-2.jpg" src="http://www.mamicode.com/img/thumbnails/tibet-2.jpg" alt="图片2"></li>     <li><img data-original="img/tibet-3.jpg" src="http://www.mamicode.com/img/thumbnails/tibet-3.jpg" alt="图片3"></li>     <li><img data-original="img/tibet-4.jpg" src="http://www.mamicode.com/img/thumbnails/tibet-4.jpg" alt="图片4"></li>     <li><img data-original="img/tibet-5.jpg" src="http://www.mamicode.com/img/thumbnails/tibet-5.jpg" alt="图片5"></li>     <li><img data-original="img/tibet-6.jpg" src="http://www.mamicode.com/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
下载

 

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


联系
我们