支援移動觸摸的jQuery圖檔Lightbox插件

版權聲明：本文為部落客原創文章，未經部落客允許不得轉載。 https://blog.csdn.net/w178191520/article/details/84180718

簡介

這是一款支援移動觸摸裝置的簡潔jQuery圖檔Lightbox插件。該LightBox插件可以在移動手機和桌面裝置中運作，它具有響應式，預加載圖檔，鍵盤支援等特點，非常實用。它的特點還有：

• 響應式設計
• 觸控/觸摸友好
• 提供多項配置
• 圖像預加載
• 支援 iOS / Android / Windows phone
• 使用 CSS3 過度效果，并回退相容舊浏覽器
• 支援 jQuery 1.x 和 2.x 版本
• 支援鍵盤控制

線上示範及下載下傳

線上示範:

http://www.jqhtml.com/wp-content/uploads/2017/05/wz/Simple Lightbox/ 下載下傳頁面

使用方法

可以通過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			顯示 Loading 效果
nav			顯示左右導航
navText	數組	[‘←’,’→’]	左右導航的文本
captions			顯示标題/描述
captionsData	字元串	title	标題/描述來源，可指定 title 或 data-title
close			顯示關閉按鈕
closeText	整數	123456	關閉按鈕的文本
fileExt	正規表達式	‘png|jpg|jpeg|gif’	限制圖檔格式
animationSpeed		250	動畫過度時間
preloading			預加載圖檔
enableKeyboard			鍵盤支援，方向鍵控制，Esc 退出
loop			循環
docClose			點選空白處關閉
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
	關閉 Lightbox
next	顯示下一個
prev	顯示上一個
destroy	銷毀 Lightbox

示例：

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

           

官方首頁：

http://andreknieriem.de/simple-lightbox/

GitHub 位址：

https://github.com/andreknieriem/simplelightbox