[TOC] > [github](https://github.com/fengyuanchen/viewerjs) > [demo演示](https://fengyuanchen.github.io/viewerjs/) > [jquery-viewer jquery插件](https://github.com/fengyuanchen/jquery-viewer) ## 引入 npm ``` npm install viewerjs ``` ``` <link href="/path/to/viewer.css" rel="stylesheet"> <script src="/path/to/viewer.js"></script> ``` ### 原生引用 ``` <div> <img id="image" src="picture.jpg" alt="Picture"> </div> <div> <ul id="images"> <li><img src="picture-1.jpg" alt="Picture 1"></li> <li><img src="picture-2.jpg" alt="Picture 2"></li> <li><img src="picture-3.jpg" alt="Picture 3"></li> </ul> </div> import Viewer from 'viewerjs'; // View an image const viewer = new Viewer(document.getElementById('image'), { inline: true, viewed() { viewer.zoomTo(1); }, }); // View a list of images const gallery = new Viewer(document.getElementById('images'),{url: 'data-original',}); ``` ## 用 jquery 演示 ``` <script src="/path/to/jquery.js"></script><!-- jQuery is required --> <script src="/path/to/viewer.js"></script><!-- Viewer.js is required --> <link href="/path/to/viewer.css" rel="stylesheet"> <script src="/path/to/jquery-viewer.js"></script> <div> <img id="image" src="picture.jpg" alt="Picture"> </div> <div> <ul id="images"> <li><img src="picture-1.jpg" alt="Picture 1"></li> <li><img src="picture-2.jpg" alt="Picture 2"></li> <li><img src="picture-3.jpg" alt="Picture 3"></li> </ul> </div> var $image = $('#image'); $image.viewer({ inline: true, viewed: function() { $image.viewer('zoomTo', 1); } }); // Get the Viewer.js instance after initialized var viewer = $image.data('viewer'); // View a list of images $('#images').viewer(); ``` ## option參數 | 名稱 | 類型 | 默認值 | 說明 | | --- | --- | --- | --- | | 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 | 回調函數，具體查看演示 |