Viewer.js 是一款強大的圖片相冊插件，像SNS交友網站一般都會用到點擊縮略圖，彈出層大圖片，而且彈出層有多個控制按鈕，比如放大縮小、旋轉、撤回等，底部有縮略圖列表可切換。
支持移動設備觸摸事件
支持響應式
支持放大/縮小
支持旋轉（類似微博的圖片旋轉）
支持水平/垂直翻轉
支持圖片移動
支持鍵盤
支持全屏幻燈片模式（可做屏保）
支持縮略圖
支持標題顯示
支持多種自定義事件
在線實例
| 默認效果 | jQuery版本 |
| 回調函數 | 自定義方法 |
使用方法
<ul id="sucaihuo">
<li><img data-original="img/tibet-1.jpg" src="img/thumbnails/tibet-1.jpg" alt="圖片1"></li>
<li><img data-original="img/tibet-2.jpg" src="img/thumbnails/tibet-2.jpg" alt="圖片2"></li>
<li><img data-original="img/tibet-3.jpg" src="img/thumbnails/tibet-3.jpg" alt="圖片3"></li>
<li><img data-original="img/tibet-4.jpg" src="img/thumbnails/tibet-4.jpg" alt="圖片4"></li>
<li><img data-original="img/tibet-5.jpg" src="img/thumbnails/tibet-5.jpg" alt="圖片5"></li>
<li><img data-original="img/tibet-6.jpg" src="img/thumbnails/tibet-6.jpg" alt="圖片6"></li>
</ul>
var viewer = new Viewer(document.getElementById('sucaihuo'), {
url: 'data-original'
});
參數詳解
| 參數 | 描述 | 默認值 |
| inline | 啟用 inline 模式 | false |
| button | 顯示右上角關閉按鈕（jQuery 版本無效） | true |
| navbar | 顯示縮略圖導航 | true |
| title | 顯示當前圖片的標題（現實 alt 屬性及圖片尺寸） | true |
| toolbar | 顯示工具欄 | true |
| tooltip | 顯示縮放百分比 | true |
| movable | 圖片是否可移動 | true |
| zoomable | 圖片是否可縮放 | true |
| rotatable | 圖片是否可旋轉 | true |
| scalable | 圖片是否可翻轉 | true |
| transition | 使用 CSS3 過度 | true |
| fullscreen | 播放時是否全屏 | true |
| keyboard | 是否支持鍵盤 | true |
| interval | 播放間隔，單位為毫秒 | 5000 |
| zoomRatio | 鼠標滾動時的縮放比例 | 0.1 |
| minZoomRatio | 最小縮放比例 | 0.01 |
| maxZoomRatio | 最大縮放比例 | 100 |
| zIndex | 設置圖片查看器 modal 模式時的 z-index | 2015 |
| zIndexInline | 設置圖片查看器 inline 模式時的 z-index | 0 |
| url | 設置大圖片的 url | src |
| build | 回調函數，具體查看演示 | null |
| built | 回調函數，具體查看演示 | null |
| show | 回調函數，具體查看演示 | null |
| shown | 回調函數，具體查看演示 | null |
| hide | 回調函數，具體查看演示 | null |
| hidden | 回調函數，具體查看演示 | null |
| view | 回調函數，具體查看演示 | null |
| viewed | 回調函數，具體查看演示 | null |