簡介
Viewer.js 是一款強大的圖片查看器，像門戶網站一般都會有各自的圖片查看器，如果您正需要一款強大的圖片查看器，也許 Viewer.js 是一個很好的選擇。Viewer.js 有以下特點：
- 支持移動設備觸摸事件
- 支持響應式
- 支持放大/縮小
- 支持旋轉（類似微博的圖片旋轉）
- 支持水平/垂直翻轉
- 支持圖片移動
- 支持鍵盤
- 支持全屏幻燈片模式（可做屏保）
- 支持縮略圖
- 支持標題顯示
- 支持多種自定義事件
Viewer.js 提供了純 JS 版本和 jQuery 版本，您可以任意選擇。
瀏覽器兼容
 |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|
IE8+  |
Edge |
Chrome |
Firefox |
Opera |
Safari |
注意：JS 版本兼容 IE9+，jQuery 版本兼容 IE8+。
使用方法
1、引入文件
JS 版本：
<link rel="stylesheet" href="css/viewer.min.css">
<script src="js/viewer.min.js"></script>
jQuery 版本：
<link rel="stylesheet" href="css/viewer.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/viewer.min.js"></script>
注意：JS 版本和 jQuery 版本名字雖然一樣，但代碼不一樣，不能通用，請到 github 上下載需要的版本。
2、HTML
<ul id="dowebok">
<li><img src="img/tibet-1.jpg" alt="圖片1"></li>
<li><img src="img/tibet-2.jpg" alt="圖片2"></li>
<li><img src="img/tibet-3.jpg" alt="圖片3"></li>
<li><img src="img/tibet-4.jpg" alt="圖片4"></li>
<li><img src="img/tibet-5.jpg" alt="圖片5"></li>
<li><img src="img/tibet-6.jpg" alt="圖片6"></li>
</ul>
3、JavaScript
JS 版本：
var viewer = new Viewer(document.getElementById('dowebok'));
jQuery 版本：
$('#dowebok').viewer();
配置
| 名稱 | 類型 | 默認值 | 說明 |
|---|---|---|---|
| inline | 布爾值 | false | 啓用 inline 模式 |
| button | 布爾值 | true | 顯示右上角關閉按鈕（jQuery 版本無效） |
| navbar | 布爾值/整型 | true | 顯示縮略圖導航 |
| title | 布爾值/整型 | true | 顯示當前圖片的標題（現實 alt 屬性及圖片尺寸） |
| toolbar | 布爾值/整型 | true | 顯示工具欄 |
| tooltip | 布爾值 | true | 顯示縮放百分比 |
| movable | 布爾值 | true | 圖片是否可移動 |
| zoomable | 布爾值 | true | 圖片是否可縮放 |
| rotatable | 布爾值 | true | 圖片是否可旋轉 |
| scalable | 布爾值 | true | 圖片是否可翻轉 |
| transition | 布爾值 | true | 使用 CSS3 過度 |
| fullscreen | 布爾值 | true | 播放時是否全屏 |
| keyboard | 布爾值 | true | 是否支持鍵盤 |
| interval | 整型 | 5000 | 播放間隔，單位爲毫秒 |
| zoomRatio | 浮點型 | 0.1 | 鼠標滾動時的縮放比例 |
| minZoomRatio | 浮點型 | 0.01 | 最小縮放比例 |
| maxZoomRatio | 數字 | 100 | 最大縮放比例 |
| zIndex | 數字 | 2015 | 設置圖片查看器 modal 模式時的 z-index |
| zIndexInline | 數字 | 0 | 設置圖片查看器 inline 模式時的 z-index |
| url | 字符串/函數 | src | 設置大圖片的 url |
| build | 函數 | null | 回調函數，具體查看演示 |
| built | 函數 | null | 回調函數，具體查看演示 |
| show | 函數 | null | 回調函數，具體查看演示 |
| shown | 函數 | null | 回調函數，具體查看演示 |
| hide | 函數 | null | 回調函數，具體查看演示 |
| hidden | 函數 | null | 回調函數，具體查看演示 |
| view | 函數 | null | 回調函數，具體查看演示 |
| viewed | 函數 | null | 回調函數，具體查看演示 |
GitHub 地址：