支援移動觸控的jQuery圖片Lightbox外掛
阿新 • • 發佈:2018-11-17
簡介
這是一款支援移動觸控裝置的簡潔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();