溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下如何用JS開發baguetteBox.js響應式畫廊插件，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討方法吧！
baguetteBox.js
baguetteBox.js 是一個簡單和易于使用lightbox純JavaScript腳本，擁有圖像放大縮小并帶有相應的CSS3過度，并能在觸摸屏等設備上完美展示。
Demo頁面
github
中文使用
特點
安裝方法
使用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屬性，將只能運行在服務器環境，而不是當做網頁直接打開，類似file:///D:/demo/demo.html.
用法
初始化腳本運行:
baguetteBox.run('.gallery', {
// Custom options
});其中第一個參數是一個選擇器包含一個標簽。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鏈接組成的圖片時，單擊其中一張圖片會發現自動有左右翻頁效果。
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 bindingsThe 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.
自定義配置
你可以在第二個參數位置傳入一個對象來進行一些自定義設置. 下面是可用的缺省設置:
baguetteBox.run('.gallery', {
captions: true, // true|false|callback(element) - 顯示圖片說明
buttons: 'auto', // 'auto'|true|false - 顯示翻頁按鈕
async: false, // true|false - 異步加載
preload: 2, // [number] - 需要預加載圖片的個數
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' 在觸摸設備或者只有一個圖片時buttons會自動隱藏，即false.兼容性
申明
baguetteBox.js的靈感來自一個jQuery插件:touchTouch.
許可
Copyright (c) 2015 feimosi
This content is released under the MIT License.
下面給大家分享基于純JS開發移動端響應式圖片展示插件baguetteBox.js的代碼
baguetteBox.js 是一個簡單和易于使用的響應式的圖像 Lightbox 插件，支持滑動手勢在移動設備上使用。純 JavaScript 實現，不依賴第三方庫和插件，趕緊來體驗吧。
看完了這篇文章，相信你對如何用JS開發baguetteBox.js響應式畫廊插件有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
