viewer.js插件--图片预览，放大，旋转，镜像翻转，幻灯片播放等功能

var viewer = new Viewer(document.getElementById('yyzh_img'), {
			url: 'data-original',
			toolbar: {
				zoomIn: 4,
				zoomOut: 4,
				oneToOne: false,
				reset: true,
				prev: false,
				play: {
					show: false,
					size: 'large',
				},
				next: false,
				rotateLeft: true,
				rotateRight: true,
				flipHorizontal: false,
				flipVertical: false
			},
			hidden: function () {
				//摧毁容器，不摧毁会有些小bug
				viewer.destroy();
			}
		});
		// 显示大图
		viewer.show();
	}

}

版本：viewer    js版本（非jq版本）。

先引入viewer的js和css文件  点击这里下载： viewer.min.css和viewer.min.js

1.其中yyzh_img是图片标签的id：<img data-original="url"  src="url" alt="" id="yyzh_img">

2.data-original是大图的url，src是小图的url。使用id进行实例化

var viewer = new Viewer(document.getElementById('yyzh_img'), {
            url: 'data-original'}

就可以正常使用了，

3.toolbar还可以配置工具按钮的显示

4.show是它的显示函数，如果想用一个按钮控制显示大图的话用到这个函数写到按钮点击事件中。

5.在隐藏的时候摧毁这个viewer实例，使用destroy函数。

6.因为它的大图的层级z-index是2015，所以和别的框架一起使用的时候可能被遮住，需要修改一方的层级。

例：修改layui弹出层的层级

if (obj.event === 'edit') {
                layer.open({
                    type: 1,
                    title: 'xxxx',
                    area: ['60%', '100%'],
                    zIndex:102, //层优先级