主要功能：

• 支援選項
• 支援方法
• 支援事件
• 支援觸控
• 支援移動
• 支援縮放
• 支援旋轉
• 支援鍵盤
• 跨瀏覽器支援

作者githup地址:https://github.com/fengyuanchen/viewer

演示地址：http://fengyuanchen.github.io/viewer/

基本使用方法：

　　1.引入檔案

<link rel="stylesheet" href="css/viewer.min.css">
<script src="js/viewer.min.js"></script>

　　2.HTML程式碼

<ul id="viewer">
    <li><img src="img/tibet-1.jpg" data-original="img/tibet-1.jpg" alt="圖片1"></li>
    <li><img src="img/tibet-2.jpg" data-original="img/tibet-2.jpg" alt="圖片2"></li>
    <li><img src="img/tibet-3.jpg" data-original="img/tibet-3.jpg" alt
 
="圖片3"></li>
    <li><img src="img/tibet-4.jpg" data-original="img/tibet-4.jpg" alt="圖片4"></li>
    <li><img src="img/tibet-5.jpg" data-original="img/tibet-5.jpg" alt="圖片5"></li>
    <li><img src="img/tibet-6.jpg" data-original="img/tibet-6.jpg" alt="圖片6"
 
></li>
</ul>

　　3.JS程式碼

$('#viewer').viewer(); 

其他相關：

　　如需配置放大前後圖片不同，可在src屬性中放入原圖，data-original屬性中放入希望見到的放大後的圖。在JS中進行配置：

$('#viewer').viewer({url:"data-original"}); 

　　如需通過動態修改data-original，來達到動態載入圖片的效果，需保證在原圖已展示完成的情況下，執行update程式碼：

$('#viewer').viewer(‘update’); 

其他配置可在演示中檢視，其中也有回撥函式和自定義方法，總體來說是挺好用的外掛。

配置