baguetteBox.js響應式畫廊插件(純JS)baguetteBox.js

baguettebox.js 是一個簡單和易于使用lightbox純javascript腳本，擁有圖像放大縮小并帶有相應的css3過度，并能在觸摸屏等裝置上完美展示。

<a href="https://feimosi.github.io/baguettebox.js/">demo頁面</a>

<a href="https://github.com/feimosi/baguettebox.js">github</a>

<a href="https://github.com/52fhy/baguettebox.js">中文使用</a>

純js編寫，無任何依賴

支援多重畫廊(multiple-gallery)效果, 且允許自定義參數

支援手勢滑動(僅在支援多點觸控裝置上)

現代簡約風格

圖像字幕支援

響應式的圖像

css3轉換

svg按鈕,沒有額外的檔案下載下傳

壓縮後大約2.3kb

<code>npm install baguettebox.js</code>

<code>bower install baguettebox.js</code>

下載下傳baguettebox.min.css和baguettebox.min.js檔案并添加到你的頁面:

<code>html &lt;link rel="stylesheet" href="css/baguettebox.min.css"&gt; &lt;script src="js/baguettebox.min.js" async&gt;&lt;/script&gt;</code>

注意：如果使用了<code>async</code>屬性，将隻能運作在伺服器環境，而不是當做網頁直接打開，類似<code>file:///d:/demo/demo.html</code>.

用<code>title</code> 或者 <code>data-caption</code> 标簽來描述圖檔。

當一個div标簽裡有多組a連結組成的圖檔時，單擊其中一張圖檔會發現自動有左右翻頁效果。

demo

<code>shownext</code> - 切換到下一張圖檔

<code>showprevious</code> - 切換到上一張圖檔

<code>destroy</code> - remove the plugin with any event bindings

the first two methods return true on success or false if there's no more images to be loaded.

如果需要響應式圖檔，可以分别在<code>a</code>标簽加入<code>data-at-{width}</code>屬性，<code>{width}</code>是圖檔可顯示的最大寬度，baguettebox.js會在頁面初始化（視窗手動改變大小不會再響應）時選擇相應的尺寸。

下面是一些示例:

如果螢幕分辨率是1366x768，baguettebox.js将會選擇<code>"img/medium/2-1.jpg"</code>. 如果是1440x900則會選擇 <code>"img/big/2-1.jpg"</code>. keep <code>href</code> attribute as a fallback (link to a bigger image e.g. of hd size) for older browsers.

你可以在第二個參數位置傳入一個對象來進行一些自定義設定. 下面是可用的預設設定:

<code>captions: 'callback'</code> applies a caption returned by the callback. invoked in the context of an array of gallery images.

<code>buttons: 'auto'</code> 在觸摸裝置或者隻有一個圖檔時buttons會自動隐藏，即false.

ie 8+

chrome

firefox 3.6+

opera 12+

safari 5+

sleipnir