viewer.js图片预览插件

记录贴。介绍图片预览插件用法防止以后用到。下面这网址对view.js上手较快

传送门：http://www.dowebok.com/demo/192/index4.html

下面我记录下比较关键的步骤

<--引入重要库-->
<link rel="stylesheet" href="../static/css/viewer.min.css">
<script src="../static/js/viewer.js"></script>

然后就是img标签

//data-original显示大图地址可以不写，src必须要写，alt无所谓
<img data-original="img/tibet-1.jpg" src="img/thumbnails/tibet-1.jpg" alt="图片1">

然后img标签必须都要在一个容器里,这里div 和ul分别相当于一个容器

<div id="divex">
<ul id="ulex">
    <li><img data-original="img/tibet-1.jpg" src="img/thumbnails/tibet-1.jpg" alt="图片1"></li>
</ul>
<img data-original="img/tibet-2.jpg" src="img/thumbnails/tibet-1.jpg" alt="图片1">
</div>

接下来最关键的一步

//这是View对象重要的操作都是和这个相关
var viewer;
//这个就是刚才我说的容器如果是divex 预览加载出来的就有两张图片，如果是ulex就是一张
var objFile = document.getElementById('divex');
//这个objFile 也可以是img对象就是以img单独一个容器所以就只有一张
viewer = new Viewer(objFile, {
//url就是图片地址也可以用原图地址img属性里介绍了，这里还可以写一些属性，旋转啊啥的具体看链接
url: 'src',  
hidden: function () {
//摧毁容器，不摧毁会有些小bug
viewer.destroy();
},
});
//这个就是点开那张图片就是那张图片，从点开图片的那张开始			 
viewer.view(imgIndex);
//下面相当于直接展示容器从第一张开始
//viewer.show();

注：具体开发请参考官方.