Viewer.js --- 圖片瀏覽插件


主要功能:

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

作者githup地址:https://github.com/fengyuanchen/viewer

演示地址:http://fengyuanchen.github.io/viewer/

基本使用方法:

  1.引入文件

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

  3.JS代碼

$('#viewer').viewer(); 

其他相關:

  如需配置放大前后圖片不同,可在src屬性中放入原圖,data-original屬性中放入希望見到的放大后的圖。在JS中進行配置:

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

  如需通過動態修改data-original,來達到動態加載圖片的效果,需保證在原圖已展示完成的情況下,執行update代碼:

$('#viewer').viewer(‘update’); 

  

 

其他配置可在演示中查看,其中也有回調函數和自定義方法,總體來說是挺好用的插件。

 

配置

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


免責聲明!

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



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