Viewer.js 圖片預覽插件使用

簡介

Viewer.js 是一款強大的圖片查看器。

Viewer.js 有如下特色：

• 支持移動設備觸摸事件
• 支持響應式
• 支持放大/縮小
• 支持旋轉（相似微博的圖片旋轉）
• 支持水平/垂直翻轉
• 支持圖片移動
• 支持鍵盤
• 支持全屏幻燈片模式（可作屏保）
• 支持縮略圖
• 支持標題顯示
• 支持多種自定義事件
• Viewer.js 提供了純 JS 版本和 jQuery 版本,版本名字雖然同樣，但代碼不同，不能通用。

下載

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

jQuery 版本：https://github.com/fengyuanchen/jquery-viewer

使用方法

一、直接引入文件

Javascript版：

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

二、npm安裝

npm install viewerjs

三、Html結構

<!-- 單張圖片 -->
<div>
<img id="image" data-original="img/viewer1.jpg" src="img/viewer1.jpg" alt="圖片1">
</div>

<!-- 多張圖片 -->
<ul id="viewer">
<li><img data-original="img/viewer1.jpg" src="img/viewer1.jpg" alt="圖片1"></li>
<li><img data-original="img/viewer2.jpg" src="img/viewer2.jpg" alt="圖片2"></li>
<li><img data-original="img/viewer3.jpg" src="img/viewer3.jpg" alt="圖片3"></li>
<li><img data-original="img/viewer4.jpg" src="img/viewer4.jpg" alt="圖片4"></li>
<li><img data-original="img/viewer5.jpg" src="img/viewer5.jpg" alt="圖片5"></li>
<li><img data-original="img/viewer6.jpg" src="img/viewer6.jpg" alt="圖片6"></li>
</ul>

四、JavaScript

Javascript版：

var image = new Viewer(document.getElementById('image'),{ url: 'data-original' }); var viewer = new Viewer(document.getElementById('viewer'),{ url: 'data-original' });

jQuery 版：

$('#image').viewer({ url: 'data-original' }); $('#viewer').viewer({ url: 'data-original' });

配置

名稱	類型	默認值	說明
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	回調函數，具體查看演示

效果

在線演示連接：http://fengyuanchen.github.io/viewerjs/examples/custom-toolbar.html

圖片列表：

 

點擊查看：