支援移動觸控的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();