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

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

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

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

效果演示下載源碼

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

baguetteBox.js

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

Demo頁(yè)面

github
中文使用

特點(diǎn)

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

安裝方法

使用npm安裝

npm install baguettebox.js

使用Bower

bower install baguettebox.js

通用安裝方法安裝

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

<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)頁(yè)直接打開(kāi)，類似file:///D:/demo/demo.html.

用法

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

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

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

<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)簽來(lái)描述圖片。
當(dāng)一個(gè)div標(biāo)簽里有多組a鏈接組成的圖片時(shí)，單擊其中一張圖片會(huì)發(fā)現(xiàn)自動(dòng)有左右翻頁(yè)效果。

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會(huì)在頁(yè)面初始化（窗口手動(dòng)改變大小不會(huì)再響應(yīng)）時(shí)選擇相應(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將會(huì)選擇"img/medium/2-1.jpg". 如果是1440x900則會(huì)選擇 "img/big/2-1.jpg". Keep href attribute as a fallback (link to a bigger image e.g. of HD size) for older browsers.

自定義配置

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

baguetteBox.run('.gallery', {
 captions: true, // true|false|callback(element) - 顯示圖片說(shuō)明
 buttons: 'auto', // 'auto'|true|false - 顯示翻頁(yè)按鈕
 async: false, // true|false - 異步加載
 preload: 2, // [number] - 需要預(yù)加載圖片的個(gè)數(shù)
 animation: 'slideIn', // 'slideIn'|'fadeIn'|false - 動(dòng)畫(huà)
 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è)備或者只有一個(gè)圖片時(shí)buttons會(huì)自動(dòng)隱藏，即false.

兼容性

IE 8+
Chrome
Firefox 3.6+
Opera 12+
Safari 5+
Sleipnir

申明

baguetteBox.js的靈感來(lái)自一個(gè)jQuery插件:touchTouch.

許可

This content is released under the MIT License.

到此這篇關(guān)于純JS開(kāi)發(fā)baguetteBox.js響應(yīng)式畫(huà)廊插件的文章就介紹到這了,更多相關(guān)baguetteBox.js響應(yīng)式插件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: