建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

baguetteBox.js 轻量级简单易用移动友好的JS灯箱画廊插件

来源:易助科技网浏览量:24收藏

简介


baguetteBox.js 是一个轻量级的简单和易于使用的移动友好的完全响应和可定制的纯JS灯箱画廊插件,拥有图像放大缩小并带有相应的CSS3过度,并能在触摸屏等设备上完美展示。


更多灯箱画廊插件:👉  [ 详情 ]


JS响应式画廊插件baguetteBox.js-示例图


特定:


纯JS编写,无任何依赖

支持多重画廊(Multiple-gallery)效果, 且允许自定义参数

支持手势滑动(仅在支持多点触控设备上)

现代简约风格

图像字幕支持

响应式的图像

CSS3转换

SVG按钮,没有额外的文件下载

压缩后大约2.3KB


浏览器支持情况


台式机


IE 8+

Chrome

Firefox 3.6+

Opera 12+

Safari 5+


移动端


Safari on iOS

Chrome on Android


参数说明:


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 - 正则去匹配文件
  
});



使用


1.  引入


安装


npm install baguettebox.js --save

yarn add baguettebox.js

bower install baguettebox.js --save


html引入


<link rel="stylesheet" href="css/baguetteBox.css">

<script src="js/baguetteBox.js" async></script>



2.  HTML


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

</div>


用title 或者 data-caption 标签来描述图片。当一个div标签里有多组a链接组成的图片时,单击其中一张图片会发现自动有左右翻页效果。



3. 调用


初始化脚本运行:


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



4. 配置项


可以将具有自定义选项的对象作为第二个参数传递。


OptionTypeDefaultDescription
captionsBoolean | function(element)true显示图像标题。传递函数将使用此回调返回的字符串。唯一的参数是包含图像的元素。在当前库数组的上下文中调用
buttonsBoolean | 'auto''auto'显示按钮。'auto“隐藏启用触摸的设备上的按钮,或者当只有一个图像可用时
fullScreenBooleanfalse启用全屏模式
noScrollbarsBooleanfalse显示多媒体资料时隐藏滚动条
bodyClassString'baguetteBox-open'当灯箱可见时将附加到主体的类名(适用于IE 10+)
ignoreClassStringnull它将忽略带有标记的给定类的图像
titleTagBooleanfalse在库的img.title属性中也使用标题值
asyncBooleanfalse异步加载文件
preloadNumber2应该预加载多少个文件
animation'slideIn' | 'fadeIn' | false'slideIn'动画类型
afterShowfunctionnull显示覆盖后要运行的回调
afterHidefunctionnull隐藏覆盖后要运行的回调
onChangefunction(currentIndex, imagesCount)null图像更改时要运行的回调
overlayBackgroundColorString'rgba
(0,0,0,0.8)'
灯箱覆盖的背景色
filterRegExp/.+\.(gif|jpe?g|png|webp)/i匹配图像文件的图案。应用于a.href属性



5. API


run(selector, userOptions)

初始化baguetteBox.js


@param selector {string} - valid CSS selector used by querySelectorAll
@param userOptions {object} - custom options (see #Customization)
@return {array} - an array of gallery objects (reflects elements found by the selector)


show(index, gallery)

显示(if hidden)并将库移动到特定索引


@param index {number} - the position of the image
@param gallery {array} - gallery which should be opened, if omitted assumes the currently opened one
@return {boolean} - true on success or false if the index is invalid


示例


const gallery = baguetteBox.run('.gallery');
baguetteBox.show(index, gallery[0]);


showNext

切换到下一个图像


@return {boolean} - true on success or false if there are no more images to be loaded


showPrevious

切换到上一个图像


@return {boolean} - true on success or false if there are no more images to be loaded


hide

隐藏图库


destroy

删除带有任何事件绑定的插件



6. 响应图像


要使用此功能,只需将 data-at-{width} 属性放在标签上,该标签的值为所需图像的路径。{width}  应该是图像可以显示的最大屏幕宽度。脚本选择 {width} 大于或等于当前屏幕宽度的第一个图像,以获得最佳用户体验。最后一个 data-at-X 图像也用于屏幕大于X的情况。

下面是HTML代码的一个示例:


<a href="img/2-1.jpg"
  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" 。保留href属性作为旧浏览器的后备选项(链接到更大的图像,如HD大小)。



相关链接


GitHub 地址 :https://github.com/feimosi/baguetteBox.js

易助科技网效果演示地址:  http://demo.easyzone.net.cn/plugin/baguetteBox/demo/index.html