Picture view plug-in, support

图片预览插件，支持图片切换、旋转、缩放、移动...

浏览器支持：IE10+, (IE9不支持旋转功能)

方向键：左left右right前后图片切换，上up下down顺时针逆时针旋转

滚动鼠标：缩放

注：支持自定义按键配置，详见参数说明。

npm

npm install zx-image-viewer --save-dev # 或 npm i zx-image-viewer -D

ES6+

import { ZxImageViewer } from 'zx-image-viewer'

浏览器Browser

<div id="imgList"> <img data-index="0" src="a.jpg"> <img data-index="1" src="b.jpg"> <img data-index="2" src="c.jpg"> <img data-index="3" src="d.jpg"> </div> <script src="dist/js/zx-image-viewer.min.js"></script> <script> // 初始化参数 var options = { // 见参数说明处 }; // 图片数组1 var imgArray1 = [ 'http://xxx.com/a.jpg', 'http://xxx.com/b.jpg', 'http://xxx.com/c.jpg', 'http://xxx.com/d.jpg' ]; // 图片数组2 var imgArray2 = [ { url: 'http://xxx.com/a.jpg', // 初始化旋转角度 angle: 90 }, { url: 'http://xxx.com/b.jpg', angle: 0 }, { url: 'http://xxx.com/c.jpg', angle: 180 }, { url: 'http://xxx.com/d.jpg' angle: 90 } ]; </script>

使用方法 1

var ziv1 = new ZxImageViewer(options, imgArray1); // 点击缩略图，查看大图 var $el = document.getElementById('imgList'); $el.addEventListener('click', function (e) { if (this.nodeName === 'IMG') { // 获取图片索引 var index = this.getAttribute('data-index'); // 查看图片 ziv1.view(index); } })

使用方法 2

var ziv2 = new ZxImageViewer(imgArray2);

使用方法 3

var ziv3 = new ZxImageViewer(); ziv3.init(imgArray2);

使用方法 4

var ziv4 = new ZxImageViewer(); // 业务场景，针对后台管理列表页，每条数据(动态)有多张图片，需独立预览，不需要多次实例化ZxImageViewer // 查看imgArray2第3张图片 ziv4.view(2, imgArray2);

开发调试

npm run dev # http://localhost:9000/ # 效果图 preview

注意：参数中只能包含有且一个mousewheel配置；任何配置均不支持组合键。

keyboard参数可选属性见页尾--附录

// 初始化参数 let _config = { // 分页mouseover切换图片 paginationable: true, // 显示关闭按钮 showClose: true, // 显示上一张/下一张箭头 showSwitchArrow: true, // 显示分页导航栏 showPagination: true, // 缩放 scalable: true, // 旋转 rotatable: true, // 移动 movable: true, // 键盘配置 keyboard: { prev: 'a', next: 'd', rotate: ['up', 'down'], scale: 'mousewheel' } } new ZxImageViewer(_config); 方法 methods

destroy() 销毁当前图片查看dom对象

init(imageArray, index) 初始化图片数据

字体样式.zx，图标样式如下图：

http://www.iconfont.cn/

Code and documentation copyright 2018. capricorncd. Code released under the MIT License.