html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/viewer.css"/>
</head>
<body>
<ul id="myul">
<li><img src="img/1a.jpg"/> </li>
<li><img src="img/2a.jpg"/> </li>
<li><img src="img/3a.jpg"/> </li>
<li><img src="img/4a.jpg"/> </li>
<li><img src="img/5a.jpg"/> </li>
</ul>
<script src="js/jquery-1.11.0.js"></script>
<script src="js/viewer.js"></script>
<script src="js/demo01.js"></script>
</body>
</html>
//demo01.js
/**
* Created by Loki on 2017/2/21.
*/
$("#myul").viewer({
//底部导航栏0：不出现；
navbar:0,
//右上角的关闭按钮是否显示：true 为默认显示；
button:true,
//是否进入页面显示遮罩层，默认false;
inline:false,
//底部导航是否显示0：不显示底部按钮；
toolbar:2,
//是否 可拖动
movable:true,
//是否 可以旋转
rotatable:true,
//是否 可以缩放图片
scalable:true,
//是否 有过渡动画(小变大)
transition:true,
//点击播放 是否全屏播放
fullscreen:true
})
原文：http://www.cnblogs.com/madada111/p/6424742.html