純JS開發(fā)baguetteBox.js響應(yīng)式畫廊插件

更新時間：2020年06月28日 16:47:12 作者：返回主頁飛鴻影

這篇文章主要介紹了純JS開發(fā)baguetteBox.js響應(yīng)式畫廊插件,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

baguetteBox.js 是一個簡單和易于使用的響應(yīng)式的圖像 Lightbox 插件，支持滑動手勢在移動設(shè)備上使用。純 JavaScript 實現(xiàn)，不依賴第三方庫和插件，趕緊來體驗吧。

效果演示下載源碼

好了，看下本文重點(diǎn)內(nèi)容。

baguetteBox.js

baguetteBox.js 是一個簡單和易于使用lightbox純JavaScript腳本，擁有圖像放大縮小并帶有相應(yīng)的CSS3過度，并能在觸摸屏等設(shè)備上完美展示。

Demo頁面

github
中文使用

特點(diǎn)

純JS編寫，無任何依賴
支持多重畫廊(Multiple-gallery)效果, 且允許自定義參數(shù)
支持手勢滑動(僅在支持多點(diǎn)觸控設(shè)備上)
現(xiàn)代簡約風(fēng)格
圖像字幕支持
響應(yīng)式的圖像
CSS3轉(zhuǎn)換
SVG按鈕,沒有額外的文件下載
壓縮后大約2.3KB

安裝方法

使用npm安裝

npm install baguettebox.js

使用Bower

bower install baguettebox.js

通用安裝方法安裝

下載baguetteBox.min.css和baguetteBox.min.js文件并添加到你的頁面:

<link rel="stylesheet" href="css/baguetteBox.min.css" rel="external nofollow" >
<script src="js/baguetteBox.min.js" async></script>

注意：如果使用了async屬性，將只能運(yùn)行在服務(wù)器環(huán)境，而不是當(dāng)做網(wǎng)頁直接打開，類似file:///D:/demo/demo.html.

用法

初始化腳本運(yùn)行:

baguetteBox.run('.gallery', {
 // Custom options
});

其中第一個參數(shù)是一個選擇器包含一個標(biāo)簽。HTML代碼可能看起來像這樣：

<div class="gallery">
	<a href="img/2-1.jpg" rel="external nofollow" rel="external nofollow" data-caption="Image caption"><img src="img/thumbs/2-1.jpg"></a>
	<a href="img/2-2.jpg" rel="external nofollow" ><img src="img/thumbs/2-2.jpg"></a>
 ...
</div>

用title 或者 data-caption 標(biāo)簽來描述圖片。
當(dāng)一個div標(biāo)簽里有多組a鏈接組成的圖片時，單擊其中一張圖片會發(fā)現(xiàn)自動有左右翻頁效果。

demo

<!DOCTYPE html>
<head>
 <meta charset="utf-8">
 <title>demo</title>
	<link rel="stylesheet" href="css/baguetteBox.css" rel="external nofollow" >
	<script src="js/baguetteBox.js"></script>
</head>

<body>
 <div class="gallery">
 <a href="img/image-1.jpg" rel="external nofollow" rel="external nofollow" data-caption="圖片描述"><img src="img/thumb-1.jpg"></a>
 <a href="img/image-1.jpg" rel="external nofollow" rel="external nofollow" data-caption="圖片描述"><img src="img/thumb-1.jpg"></a>
</div>
</body>

<script>
	baguetteBox.run('.gallery', {
	 // Custom options
	});
</script>

附加方法

showNext - 切換到下一張圖片
showPrevious - 切換到上一張圖片
destroy - 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.

響應(yīng)式圖片

如果需要響應(yīng)式圖片，可以分別在a標(biāo)簽加入data-at-{width}屬性，{width}是圖片可顯示的最大寬度，baguetteBox.js會在頁面初始化（窗口手動改變大小不會再響應(yīng)）時選擇相應(yīng)的尺寸。

下面是一些示例:

<a href="img/2-1.jpg" rel="external nofollow" rel="external nofollow" 
 data-at-450="img/thumbs/2-1.jpg" 
 data-at-800="img/small/2-1.jpg" 
 data-at-1366="img/medium/2-1.jpg" 
 data-at-1920="img/big/2-1.jpg">
 <img src="img/thumbs/2-1.jpg">
</a>

如果屏幕分辨率是1366x768，baguetteBox.js將會選擇"img/medium/2-1.jpg". 如果是1440x900則會選擇 "img/big/2-1.jpg". Keep href attribute as a fallback (link to a bigger image e.g. of HD size) for older browsers.

自定義配置

你可以在第二個參數(shù)位置傳入一個對象來進(jìn)行一些自定義設(shè)置. 下面是可用的缺省設(shè)置:

baguetteBox.run('.gallery', {
 captions: true, // true|false|callback(element) - 顯示圖片說明
 buttons: 'auto', // 'auto'|true|false - 顯示翻頁按鈕
 async: false, // true|false - 異步加載
 preload: 2, // [number] - 需要預(yù)加載圖片的個數(shù)
 animation: 'slideIn', // 'slideIn'|'fadeIn'|false - 動畫
 afterShow: null, // callback - To be run after showing the overlay
 afterHide: null, // callback - To be run after hiding the overlay
 onChange: null, // callback(currentIndex, imagesElements.length) - When image changes
 filter: /.+\.(gif|jpe?g|png|webp)/i // RegExp object - 正則去匹配文件
});

captions: 'callback' applies a caption returned by the callback. Invoked in the context of an array of gallery images.
buttons: 'auto' 在觸摸設(shè)備或者只有一個圖片時buttons會自動隱藏，即false.

兼容性