-
插件简介
Viewer.js 是一款强大的图片查看器,提供了纯 JS 版本和 jQuery 版本,具有以下特点:
- 支持移动设备触摸事件
- 支持响应式
- 支持放大、缩小
- 支持旋转(类似微博的图片旋转)
- 支持水平、垂直翻转
- 支持图片移动
- 支持键盘
- 支持全屏幻灯片模式(可做屏保)
- 支持缩略图
- 支持标题显示
- 支持多种自定义事件
官网地址:http://fengyuanchen.github.io/viewerjs/
详细说明:http://www.dowebok.com/192.html
-
使用步骤
1、下载并引入资源文件
GitHub 下载(JS 版本):https://github.com/fengyuanchen/viewerjs
GitHub 下载(jQuery 版本):https://github.com/fengyuanchen/viewer
注意:JS 版本和 jQuery 版本名字虽然一样,但代码不一样,不能通用,请正确下载需要的版本。
JS 版本引入:
<link rel="stylesheet" href="css/viewer.min.css"/>
<script src="js/viewer.min.js"></script>
jQuery 版本引入:
<link rel="stylesheet" href="css/viewer.min.css"/>
<script src="js/jquery.min.js"></script>
<script src="js/viewer.min.js"></script>
2、Html 页面代码
<ul id="dowebok">
<li><img src="img/small01.jpg" alt="图片1"></li>
<li><img src="img/small02.jpg" alt="图片2"></li>
<li><img src="img/small03.jpg" alt="图片3"></li>
</ul>
3、JavaScript 代码
JS 版本:
//new Viewer(element[,options])
var viewer = new Viewer(document.getElementById('dowebok'));
jQuery 版本:
//$().viewer([options])
$('#dowebok').viewer();
-
options 参数配置
名称 | 类型 | 默认值 | 说明 |
backdrop | Boolean String | true | 启用 modal,为 false 的时候不支持点击背景关闭 |
button | Boolean | true | 是否显示右上角的关闭按钮 |
navbar | Boolean Number | true | 是否显示底部导航栏 0 或 false:不显示 1 或 true:显示 2:当屏幕宽度大于 768px 时显示 3:当屏幕宽度大于 992px 时显示 4:当屏幕宽度大于 1200px 时显示 |
title | Boolean Number Function Array | true | 是否显示标题内容,默认显示 alt 属性内容和尺寸 0 或 false:不显示 1 或 true 或 function 或 array:显示 2:当屏幕宽度大于 768px 时显示 3:当屏幕宽度大于 992px 时显示 4:当屏幕宽度大于 1200px 时显示 function:在函数体内返回标题内容 array:第一个参数表示可见性(0-4),第二个参数表示标题内容 |
toolbar | Boolean Number Object | true | 工具栏是否显示和布局 0 或 false:不显示 1 或 true:显示 2:当屏幕宽度大于 768px 时显示 3:当屏幕宽度大于 992px 时显示 4:当屏幕宽度大于 1200px 时显示 object:请看下面 Object 类型详解 |
className | String | '' | 添加到查看器的要元素的自定义类名 |
container | Element String | 'body' | 将查看器置于 modal 模式的容器 只有在 inline 为 false 时才可以使用 |
filter | Function | null | 过滤图像以便查看(图像是可见的,应返回 true) |
fullscreen | Boolean | true | 播放时是否全屏 |
initialViewIndex | Number | 0 | 定义用于查看的图像的初始索引 |
inline | Boolean | false | 是否启用 inline 模式 |
interval | Number | 5000 | 播放间隔,单位为毫秒 |
keyboard | Boolean | true | 是否启用键盘支持 |
loading | Boolean | true | 加载图片时是否显示 loading 图标 |
loop | Boolean | true | 是否可以循环查看图片 |
minWidth | Number | 200 | 定义图片查看器的最小的宽度 |
minHeight | Number | 100 | 定义图片查看器的最小的高度 |
movable | Boolean | true | 是否可以拖动图片 |
zoomable | Boolean | true | 是否可以缩放图片 |
rotatable | Boolean | true | 是否可以旋转图片 |
scalable | Boolean | true | 是否可以翻转图片 |
toggleOnDblclick | Boolean | true | 当你放大或缩小图片时,是否可以双击还原 |
tooltip | Boolean | true | 放大或缩小时,是否显示百分比的文字提示 |
transition | Boolean | true | 是否使用 CSS3 过度 |
zIndex | Number | 2015 | 在 modal 模式下定义查看器的 z-index 值 |
zIndexInline | Number | 0 | 在 inline 模式下定义查看器的 z-index 值 |
zoomRatio | Number | 0.1 | 鼠标滚动时的缩放比例 |
minZoomRatio | Number | 0.01 | 最小缩放比例 |
maxZoomRatio | Number | 100 | 最大缩放比例 |
url | String Function | 'src' | 原始图像 URL 字符串:应该是图像元素的属性之一 函数:应该返回一个有效的图像 URL |
ready | Function | null | 当打开图片查看器时被触发,只会触发一次 |
show | Function | null | 当打开图片查看器时被触发,每次都触发 |
shown | Function | null | 当打开图片查看器完成时被触发,每次都会触发,在 show 之后 |
hide | Function | null | 当关闭图片查看器时被触发,每次都会触发 |
hidden | Function | null | 当关闭图片查看器完成时被触发,每次都会触发,在 hide 之后 |
view | Function | null | 当显示图片时被触发,每次都会触发,在 shown 之后 |
viewed | Function | null | 当显示图片完成时被触发,每次都会触发,在 view 之后 |
zoom | Function | null | 当图片缩放时被触发 |
zoomed | Function | null | 当图片缩放完成时被触发,在 zoom 之后 |
-
toolbar Object 类型详解
{ key: Number|Boolean }:显示或隐藏对应 key 的按钮,为 Number 的时候为可见性
{ key: String }:自定义按钮的大小
{ key: Function }:自定义按钮点击的处理
{ key: { show: Boolean|Number, size: String, click: Function } }:自定义按钮的每个属性
size 的取值范围:small、medium、default、large
key 值列表说明:
key 值名称 | 说明 |
zoomIn | 放大图片的按钮 |
zoomOut | 缩小图片的按钮 |
reset | 重置图片大小的按钮 |
prev | 查看上一张图片的按钮 |
next | 查看下一张图片的按钮 |
play | 播放图片的按钮 |
rotateLeft | 向左旋转图片的按钮 |
rotateRight | 向右旋转图片的按钮 |
flipHorizontal | 图片左右翻转的按钮 |
flipVertical | 图片上下翻转的按钮 |
-
浏览器兼容
Chrome | Edge | Firefox | IE 8+ | Opera | Safari |
注意:JS 版本兼容 IE9+,jQuery 版本兼容 IE8+
-
预览效果