如何用JS開發(fā)baguetteBox.js響應式畫廊插件

發(fā)布時間：2020-06-29 09:13:09 來源：億速云閱讀：191 作者：清晨欄目：開發(fā)技術

小編給大家分享一下如何用JS開發(fā)baguetteBox.js響應式畫廊插件，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討方法吧！

baguetteBox.js

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

Demo頁面

github
中文使用

特點

純JS編寫，無任何依賴
支持多重畫廊(Multiple-gallery)效果, 且允許自定義參數(shù)
支持手勢滑動(僅在支持多點觸控設備上)
現(xiàn)代簡約風格
圖像字幕支持
響應式的圖像
CSS3轉換
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屬性，將只能運行在服務器環(huán)境，而不是當做網(wǎng)頁直接打開，類似file:///D:/demo/demo.html.

用法

初始化腳本運行:

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

其中第一個參數(shù)是一個選擇器包含一個標簽。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 標簽來描述圖片。
當一個div標簽里有多組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.

響應式圖片

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

下面是一些示例:

<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ù)位置傳入一個對象來進行一些自定義設置. 下面是可用的缺省設置:

baguetteBox.run('.gallery', {
 captions: true, // true|false|callback(element) - 顯示圖片說明
 buttons: 'auto', // 'auto'|true|false - 顯示翻頁按鈕
 async: false,  // true|false - 異步加載
 preload: 2,  // [number] - 需要預加載圖片的個數(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&#63;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' 在觸摸設備或者只有一個圖片時buttons會自動隱藏，即false.

兼容性

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

申明

baguetteBox.js的靈感來自一個jQuery插件:touchTouch.

許可

This content is released under the MIT License.

下面給大家分享基于純JS開發(fā)移動端響應式圖片展示插件baguetteBox.js的代碼

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

如何用JS開發(fā)baguetteBox.js響應式畫廊插件

看完了這篇文章，相信你對如何用JS開發(fā)baguetteBox.js響應式畫廊插件有了一定的了解，想了解更多相關知識，歡迎關注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細節(jié)

如何用JS開發(fā)baguetteBox.js響應式畫廊插件

猜你喜歡

最新資訊

相關推薦

相關標簽