簡介

這是一款支持移動觸摸設備的簡潔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	布爾值	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

總結

以上是生活随笔為你收集整理的支持移动触摸的jQuery图片Lightbox插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。