<h2>簡介</h2> 這是一款支持移動觸摸設備的簡潔jQuery圖片Lightbox插件。該LightBox插件能夠在移動手機和桌面設備中運行，它具備響應式，預加載圖片，鍵盤支持等特色，很是實用。它的特色還有： <ul> <li>響應式設計</li> <li>觸控/觸摸友好</li> <li>提供多項配置</li> <li>圖像預加載</li> <li>支持 iOS / Android / Windows phone</li> <li>使用 CSS3 過分效果，並回退兼容舊瀏覽器</li> <li>支持 jQuery 1.x 和 2.x 版本</li> <li>支持鍵盤控制</li> </ul>css
<h2>在線演示及下載</h2> <a href="http://www.jqhtml.com/wp-content/uploads/2017/05/wz/Simple Lightbox/" target="_blank">在線演示</a>html
<a href="https://www.jqhtml.com/6756.html" target="_blank">下載頁面</a>jquery
<h2>使用方法</h2> 能夠經過npm或bower來安裝該插件。git
npm install simplelightbox bower install simplelightbox
或者下載該插件直接引用github
<strong>引入文件</strong>web
<link rel="stylesheet" href="css/simplelightbox.min.css"> <script src="js/jquery.min.js"></script> <script src="js/simple-lightbox.min.js"></script>
<strong>HTML</strong>正則表達式
<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>
<strong>JavaScript</strong>npm
$(function(){
$('.dowebok a').simpleLightbox();
});
<h2>配置</h2> <h3>選項</h3> <table> <thead> <tr> <th>名稱</th> <th>類型</th> <th>默認值</th> <th>說明</th> </tr> </thead> <tbody> <tr> <td>overlay</td> <td>布爾值</td> <td>true</td> <td>顯示遮罩</td> </tr> <tr> <td>spinner</td> <td>布爾值</td> <td>true</td> <td>顯示 Loading 效果</td> </tr> <tr> <td>nav</td> <td>布爾值</td> <td>true</td> <td>顯示左右導航</td> </tr> <tr> <td>navText</td> <td>數組</td> <td>[‘&larr;’,’&rarr;’]</td> <td>左右導航的文本</td> </tr> <tr> <td>captions</td> <td>布爾值</td> <td>true</td> <td>顯示標題/描述</td> </tr> <tr> <td>captionsData</td> <td>字符串</td> <td>title</td> <td>標題/描述來源，可指定 title 或 data-title</td> </tr> <tr> <td>close</td> <td>布爾值</td> <td>true</td> <td>顯示關閉按鈕</td> </tr> <tr> <td>closeText</td> <td>整數</td> <td>123456</td> <td>關閉按鈕的文本</td> </tr> <tr> <td>fileExt</td> <td>正則表達式</td> <td>‘png|jpg|jpeg|gif’</td> <td>限制圖片格式</td> </tr> <tr> <td>animationSpeed</td> <td>整數</td> <td>250</td> <td>動畫過分時間</td> </tr> <tr> <td>preloading</td> <td>布爾值</td> <td>true</td> <td>預加載圖片</td> </tr> <tr> <td>enableKeyboard</td> <td>布爾值</td> <td>true</td> <td>鍵盤支持，方向鍵控制，Esc 退出</td> </tr> <tr> <td>loop</td> <td>布爾值</td> <td>true</td> <td>循環</td> </tr> <tr> <td>docClose</td> <td>布爾值</td> <td>true</td> <td>點擊空白處關閉</td> </tr> <tr> <td>swipeTolerance</td> <td>整數</td> <td>50</td> <td>移動設備上滑動多少像素開始切換</td> </tr> <tr> <td>className</td> <td>字符串</td> <td>simple-lightbox</td> <td>添加 class</td> </tr> <tr> <td>widthRatio</td> <td>浮點數</td> <td>0.8</td> <td>圖像寬度於屏幕寬度的的比例</td> </tr> <tr> <td>heightRatio</td> <td>浮點數</td> <td>0.9</td> <td>圖像寬度於屏幕高度的的比例</td> </tr> </tbody> </table>數組
<h3>自定義事件</h3> <table> <thead> <tr> <th>名稱</th> <th>說明</th> </tr> </thead> <tbody> <tr> <td>show.simplelightbox</td> <td>Lightbox 開啓前的事件</td> </tr> <tr> <td>shown.simplelightbox</td> <td>Lightbox 開啓後的事件</td> </tr> <tr> <td>close.simplelightbox</td> <td>Lightbox 關閉前的事件</td> </tr> <tr> <td>closed.simplelightbox</td> <td>Lightbox 關閉後的事件</td> </tr> </tbody> </table>瀏覽器
示例
$('.jqhtml a').on('open.simplelightbox', function(){
// do something…
});
<h3>公共方法</h3> <table> <thead> <tr> <th>名稱</th> <th>說明</th> </tr> </thead> <tbody> <tr> <td>open</td> <td>開啓 Lightbox</td> </tr> <tr> <td>close</td> <td>關閉 Lightbox</td> </tr> <tr> <td>next</td> <td>顯示下一個</td> </tr> <tr> <td>prev</td> <td>顯示上一個</td> </tr> <tr> <td>destroy</td> <td>銷燬 Lightbox</td> </tr> </tbody> </table> 示例：
var $dowebok = $('.dowebok a').simpleLightbox();
$dowebok.next();