一款實用的viewer.js 圖片相冊


Viewer.js 是一款強大的圖片相冊插件,像SNS交友網站一般都會用到點擊縮略圖,彈出層大圖片,而且彈出層有多個控制按鈕,比如放大縮小、旋轉、撤回等,底部有縮略圖列表可切換。

支持移動設備觸摸事件
支持響應式
支持放大/縮小
支持旋轉(類似微博的圖片旋轉)
支持水平/垂直翻轉
支持圖片移動
支持鍵盤
支持全屏幻燈片模式(可做屏保)
支持縮略圖
支持標題顯示
支持多種自定義事件

在線實例

默認效果 jQuery版本
回調函數 自定義方法

使用方法

<ul id="sucaihuo"> 
    <li><img data-original="img/tibet-1.jpg" src="img/thumbnails/tibet-1.jpg" alt="圖片1"></li> 
    <li><img data-original="img/tibet-2.jpg" src="img/thumbnails/tibet-2.jpg" alt="圖片2"></li> 
    <li><img data-original="img/tibet-3.jpg" src="img/thumbnails/tibet-3.jpg" alt="圖片3"></li> 
    <li><img data-original="img/tibet-4.jpg" src="img/thumbnails/tibet-4.jpg" alt="圖片4"></li> 
    <li><img data-original="img/tibet-5.jpg" src="img/thumbnails/tibet-5.jpg" alt="圖片5"></li> 
    <li><img data-original="img/tibet-6.jpg" src="img/thumbnails/tibet-6.jpg" alt="圖片6"></li> 
</ul>
var viewer = new Viewer(document.getElementById('sucaihuo'), { 
    url: 'data-original' 
});

參數詳解

參數 描述 默認值
inline 啟用 inline 模式 false
button 顯示右上角關閉按鈕(jQuery 版本無效) true
navbar 顯示縮略圖導航 true
title 顯示當前圖片的標題(現實 alt 屬性及圖片尺寸) true
toolbar 顯示工具欄 true
tooltip 顯示縮放百分比 true
movable 圖片是否可移動 true
zoomable 圖片是否可縮放 true
rotatable 圖片是否可旋轉 true
scalable 圖片是否可翻轉 true
transition 使用 CSS3 過度 true
fullscreen 播放時是否全屏 true
keyboard 是否支持鍵盤 true
interval 播放間隔,單位為毫秒 5000
zoomRatio 鼠標滾動時的縮放比例 0.1
minZoomRatio 最小縮放比例 0.01
maxZoomRatio 最大縮放比例 100
zIndex 設置圖片查看器 modal 模式時的 z-index 2015
zIndexInline 設置圖片查看器 inline 模式時的 z-index 0
url 設置大圖片的 url src
build 回調函數,具體查看演示 null
built 回調函數,具體查看演示 null
show 回調函數,具體查看演示 null
shown 回調函數,具體查看演示 null
hide 回調函數,具體查看演示 null
hidden 回調函數,具體查看演示 null
view 回調函數,具體查看演示 null
viewed 回調函數,具體查看演示 null

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM