支持移動觸摸的jQuery圖片Lightbox插件

簡介

這是一款支持移動觸摸設備的簡潔jQuery圖片Lightbox插件。該LightBox插件能夠在移動手機和桌面設備中運行，它具備響應式，預加載圖片，鍵盤支持等特色，很是實用。它的特色還有：

• 響應式設計


• 觸控/觸摸友好


• 提供多項配置


• 圖像預加載


• 支持 iOS / Android / Windows phone


• 使用 CSS3 過分效果，並回退兼容舊瀏覽器


• 支持 jQuery 1.x 和 2.x 版本


• 支持鍵盤控制

在線演示及下載

在線演示

下載頁面

使用方法

能夠經過npm或bower來安裝該插件。

npm install simplelightbox
bower install simplelightbox

或者下載該插件直接引用

引入文件

<link rel="stylesheet" href="css/simplelightbox.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/simple-lightbox.min.js"></script>

HTML

<div class="jqhtml">
    <a href="images/image1.jpg">
        <img src="images/thumbs/thumb1.jpg" alt="" title="第一張圖片描述">
    </a>
    <a href="images/image2.jpg">
        <img src="images/thumbs/thumb2.jpg" alt="" title="第二張圖片描述">
    </a>
    <a href="images/image3.jpg">
        <img src="images/thumbs/thumb3.jpg" alt="" title="第三張圖片描述">
    </a>
    ...
</div>

JavaScript

$(function(){
    $('.dowebok a').simpleLightbox();
});

配置

選項

名稱	類型	默認值	說明
overlay	布爾值	true	顯示遮罩
spinner	布爾值	true	顯示 Loading 效果
nav	布爾值	true	顯示左右導航
navText	數組	[‘←’,’→’]	左右導航的文本
captions	布爾值	true	顯示標題/描述
captionsData	字符串	title	標題/描述來源，可指定 title 或 data-title
close	布爾值	true	顯示關閉按鈕
closeText	整數	123456	關閉按鈕的文本
fileExt	正則表達式	‘png|jpg|jpeg|gif’	限制圖片格式
animationSpeed	整數	250	動畫過分時間
preloading	布爾值	true	預加載圖片
enableKeyboard	布爾值	true	鍵盤支持，方向鍵控制，Esc 退出
loop	布爾值	true	循環
docClose	布爾值	true	點擊空白處關閉
swipeTolerance	整數	50	移動設備上滑動多少像素開始切換
className	字符串	simple-lightbox	添加 class
widthRatio	浮點數	0.8	圖像寬度於屏幕寬度的的比例
heightRatio	浮點數	0.9	圖像寬度於屏幕高度的的比例

自定義事件

名稱	說明
show.simplelightbox	Lightbox 開啓前的事件
shown.simplelightbox	Lightbox 開啓後的事件
close.simplelightbox	Lightbox 關閉前的事件
closed.simplelightbox	Lightbox 關閉後的事件

示例

$('.jqhtml a').on('open.simplelightbox', function(){
    // do something…
});

公共方法

名稱	說明
open	開啓 Lightbox
close	關閉 Lightbox
next	顯示下一個
prev	顯示上一個
destroy	銷燬 Lightbox

示例：

var $dowebok = $('.dowebok a').simpleLightbox();
$dowebok.next();

官方主頁：http://andreknieriem.de/simple-lightbox/

GitHub 地址：https://github.com/andreknieriem/simplelightbox