（1）简单示例

html代码

引入css
<link rel="stylesheet" href="css/viewer.css">

<ul class="photos clearfix">
    <li><img data-original="images/1.png" src="images/1s.png" alt="宝马"></li>
    <li><img data-original="images/2.png" src="images/2s.png" alt="跑车"></li>
    <li><img data-original="images/3.png" src="images/3s.png" alt="玛莎拉蒂"></li>
    <li><img data-original="images/4.png" src="images/4s.png" alt="保时捷"></li>
    <li><img data-original="images/5.png" src="images/5s.png" alt="冰山"></li>
    <li><img data-original="images/6.png" src="images/6s.png" alt="街角"></li>
</ul>

注意：一般src用来存放缩略图，data-original用来存放原图（只需要在配置的时候，将url设为data-original即可），alt则为显示的标题，

js代码

引入js
<script src="js/viewer.js"></script>

$(function () {
	  'use strict';
	  var console = window.console || { log: function () {} };
	  var $images = $('.photos');
	  var options = {
	    //inline: true,
		//toolbar: 3,
	    url: 'data-original',
	  };
	
	  $images.on({
	    ready:  function (e) {
	      console.log(e.type);
	    },
	    show:  function (e) {
	      console.log(e.type);
	    },
	    shown:  function (e) {
	      console.log(e.type);
	    },
	    hide:  function (e) {
	      console.log(e.type);
	    },
	    hidden: function (e) {
	      console.log(e.type);
	    },
	    view:  function (e) {
	      console.log(e.type);
	    },
	    viewed: function (e) {
	      console.log(e.type);
	    }
	 }).viewer(options);
});

下面主要说一下filter（过滤）这个配置

最常见的场景就是聊天窗口，可能会有头像还有聊天的图片，如果不做限制，因为头像也是图片，也会展示出来，这显然是不行的。所以通过filter把头像过滤掉。

html代码（对要查看的图片加上了ID）

<div>
    <img src="avatar.png"><!--这是头像-->
    <img src="1.png" id="pic"><!--这是聊天的图片-->
    <img src="2.png" id="pic"><!--这是聊天的图片-->
</div>

js代码（主要看filter的设置）

$(function () {
	  'use strict';
	  var console = window.console || { log: function () {} };
	  var $images = $('.chat-body');
	  var options = {
		navbar: true,
		filter: function(image) {
			var id = image.id;
			if (id != "pic") {
				 return false
			} else {
				return true
			}
                },
        // inline: true,
        //toolbar: false,
	    url: 'data-original',
	};
       $images.viewer(options);
});

（2）配置

(3)方法

1、show() 显示

2、hide() 隐藏

3、view(index) 查看

viewer.view(2); // 查看第三张图

4、prev() 上一张

5、next() 下一张

6、move(offsetX[, offsetY]) 水平方向移动

viewer.move(1);
viewer.move(-1, 0);//向左移动
viewer.move(1, 0);//向右移动
viewer.move(0, -1);//向上移动
viewer.move(0, 1);//向下移动

7、moveTo（x [，y]） 将图像移到绝对点

8、zoom（ratio [，hasTooltip]）以相对比例缩放图像

viewer.zoom(0.1);
viewer.zoom(-0.1);

9、zoomTo(ratio[, hasTooltip])将图像缩放到绝对比例

viewer.zoomTo(0);
viewer.zoomTo(1);

10、rotate(degree)相对旋转图像

viewer.rotate(90);//旋转90度

11、rotateTo(degree)

viewer.rotateTo(0); 
viewer.rotateTo(360);

12、scale(scaleX[, scaleY])

viewer.scale(-1);//水平和垂直翻转
viewer.scale(-1, 1);//水平翻转
viewer.scale(1, -1);//上下垂直翻转

13、scaleX(scaleX)

viewer.scaleX(-1);左右水平翻转

14、scaleY(scaleY)

viewer.scaleY(-1);//上下垂直翻转

15、play([fullscreen])

viewer.play(true);//全屏播放
viewer.play(false);//不全屏播放

16、stop() 停止

17、full()

18、exit()

19、tooltip()

20、toggle()

21、reset() 重启

22、update() 更新

此方法适用于ajax动态追加图片的时候进行更新。

$(".photos").viewer("update");

23、destroy() 销毁

详细可以参见：

GitHub：https://github.com/fengyuanchen/viewerjs