viewer.js--一個強大的jQuery映像查看外掛程式

標籤：r.js   dem   模式   引入   tool   查看   工具列   預設   color   

Viewer 是一款強大的 jQuery 映像瀏覽外掛程式。

主要功能：

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

查看示範      立即下載

部分外掛程式網站提供的下載包有缺陷，不能相容ie8-10。錯誤表現為放大的圖片沒有取到url，導致圖片不顯示。所以此連結為 viewer的官方示範，及github上的開原始碼。

 

使用方法：

1.引入css和js

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

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

data-original用來儲存放大之後的圖片地址，如果不存在，外掛程式會取圖片的src地址。如果想要放大之後換一張大圖的話，可以把大圖的路徑寫在data-original屬性中。

alt用來存放圖片的標題。

3. JavaScript 部分

$(‘#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	回呼函數，具體查看示範

viewer.js--一個強大的jQuery映像查看外掛程式