lightbox JS插件--baguetteBox.js，它是用純Javascript創建的圖像展示效果，擁有圖像放大縮小並帶有相應的CSS3過度，並能在觸摸屏等設備上完美展示。
baguetteBox.js 優勢
javascript完成，不需要jQuery庫支持
支持觸屏手機端
支持顯示標題和說明等
支持響應式效果
支持CSS3過渡效果
使用 SVG 按鈕，沒有多余的文件下載
啟用 gzip 壓縮后僅 2KB
在線實例
| 默認 | 淡入淡出 | 響應式圖片 |
使用方法
<div class="header large"> <ul class="nav"> <li><a class="cur" href="#" title="首頁">首頁</a></li> <li><a href="#" title="模板">網站模板</a></li> <li><a href="#" title="網頁特效">網頁特效</a></li> <li><a href="#" title="網站psd">網站psd</a></li> </ul> </div>
復制
我們在頁面上放置多個可點擊的縮略圖，並且在a標簽上加上圖片鏈接href屬性和data-caption標題
<div class="baguetteBox"> <a href="img/1-1.jpg" data-caption="Golden Gate Bridge"><img src="img/thumbs/1-1.jpg"></a> <a href="img/1-2.jpg" title="Midnight City"><img src="img/thumbs/1-2.jpg"></a> ...... </div>
$(function(){
baguetteBox.run('.baguetteBox', {
//options
});
});
參數詳解
| 參數 | 描述 | 默認值 |
| captions | 顯示圖片說明 | true |
| buttons | 顯示按鈕，可選 ‘auto’ / true / false | auto |
| async | 異步加載文件 | false |
| preload | 需要預加載圖片的個數 | 2 |
| animation | 動畫方式，可選 slideIn / fadeIn | slideIn |