Viewer 是一款強大的 jQuery 圖像瀏覽插件。

主要功能：

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

鏈接： viewer的官方演示，及github上的開源代碼。

使用方法：

1.引入css和js

<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>

插件默認會取圖片的src地址。如果想要放大之後換一張大圖的話，可以把大圖的路徑寫在data-original屬性中，然後設置url : "data-original" 。

alt用來存放圖片的標題。

3. JavaScript 部分（JQuery 依賴）

$(‘#viewer‘).viewer();

配置

參數的用法：（有默認值：請查看：官方演示）

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

Viewer 是一款強大的 jQuery 圖像瀏覽插件。