前言

viewer是一款功能強大的圖片檢視外掛。
檢視演示
主要功能：

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

使用

引包

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

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用來存放圖片的標題。
 

js版本的

var viewer = new Viewer(document.getElementById('viewer'));

jquery版本的

$('#viewer').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 地址：

    JS 版本：https://github.com/fengyuanchen/viewerjs
jQuery 版本：https://github.com/fengyuanchen/viewer

如果對你有幫助，請幫我點個贊~