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();

注：具體開發請參考官方.