純JS開發baguetteBox.js響應式畫廊外掛
baguetteBox.js
baguetteBox.js 是一個簡單和易於使用lightbox純JavaScript指令碼，擁有影象放大縮小並帶有相應的CSS3過度，並能在觸控式螢幕等裝置上完美展示。
Demo頁面
github
中文使用
特點
- 純JS編寫，無任何依賴
- 支援多重畫廊(Multiple-gallery)效果,且允許自定義引數
- 支援手勢滑動(僅在支援多點觸控裝置上)
- 現代簡約風格
- 影象字幕支援
- 響應式的影象
- 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屬性，將只能執行在伺服器環境，而不是當做網頁直接開啟，類似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 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.
自定義配置
你可以在第二個引數位置傳入一個物件來進行一些自定義設定. 下面是可用的預設設定:
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.
相容性
- IE 8+
- Chrome
- Firefox 3.6+
- Opera 12+
- Safari 5+
- Sleipnir
申明
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響應式畫廊外掛的文章就介紹到這了,更多相關baguetteBox.js響應式外掛內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！