安装

npm install viewerjs

<link rel="stylesheet" href="/static/viewer/viewer.css">
<script src="/static/viewer/viewer.js"></script>

基本使用

<div>
  <ul id="images">
    <li><img src="picture-1.jpg" alt="Picture 1"></li>
    <li><img src="picture-2.jpg" alt="Picture 2"></li>
    <li><img src="picture-3.jpg" alt="Picture 3"></li>
  </ul>
</div>

import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';

const viewer = new Viewer(document.getElementById('images'), {
  // 配置选项
});

配置项

参数名称	类型	默认值	说明
inline	布尔值	false	是否启用inline模式
button	布尔值	true	是否显示右上角关闭按钮
navbar	布尔值	true	是否显示缩略图导航
title	布尔值	true	是否显示当前图片的标题
toolbar	布尔值	true	是否显示工具栏
tooltip	布尔值	true	是否显示缩放百分比
movable	布尔值	true	图片是否可移动
zoomable	布尔值	true	图片是否可缩放
rotatable	布尔值	true	图片是否可旋转
scalable	布尔值	true	图片是否可翻转
transition	布尔值	true	是否使用CSS3过度
fullsreen	布尔值	true	播放时是否全屏
keyboard	布尔值	true	是否支持键盘
interval	整型	5000	播放间隔，单位为毫秒
zoomRatio	浮点型	0.1	鼠标滚轮滚动时缩放比例
minZoomRatio	浮点型	0.01（1%）	最小缩放比例
maxZoomRatio	整型	100（10000%）	最大缩放比例
zIndex	整型	2015	图片查看器modal模式时z-index值
zIndexInline	整型	0	图片查看器inline模式时z-index值
url	字符串/函数	src	设置查看图片时的图片地址来源
build	函数	null	回调函数，viewer.js文件加载完成后调用
built	函数	null	回调函数，viewer函数初始化之前调用（只调用一次）
show	函数	null	回调函数，加载展示图层前调用
shown	函数	null	回调函数，加载展示图层完成后调用
hide	函数	null	回调函数，点击关闭展示按钮时调用
hidden	函数	null	回调函数，展示图层关闭前调用
view	函数	null	回调函数，加载展示图片前调用
viewed	函数	null	回调函数，展示图片加载完成时调用