baguetteBox.js–使用原生JS编写的Web画廊插件

Vedu • 2020-12-07 11:14 • 资源分享 • 阅读 1347

介绍

baguetteBox.js是一个响应式画廊插件(纯JS)，拥有图像放大缩小并带有相应的CSS3过度，并能在触摸屏等设备上完美展示。

Github

https://github.com/feimosi/baguetteBox.js

特点

用纯JavaScript编写，不需要依赖项
多画廊支持允许为每个画廊提供自定义选项
支持触摸屏设备上的滑动手势
全屏模式可用
现代简约的外观
图片字幕支持
响应式图像
CSS3过渡
SVG按钮，无需下载其他文件
压缩约3.2KB
考虑可靠性

安装使用

使用npm安装

npm install baguettebox.js

使用Bower

bower install baguettebox.js

直接引入

<link rel="stylesheet" href="css/baguetteBox.min.css">
<script src="js/baguetteBox.min.js" async>script>

使用方式

#使用commonjs
const baguetteBox = require(\'baguettebox.js\');

#使用es模块化
import baguetteBox from \'baguettebox.js\';

@import \'baguettebox.js/dist/baguetteBox.min.css\';

使用

baguetteBox.run(\'.gallery\');//初始化脚本

class=“gallery”> <a href=“img/2-1.jpg” data-caption=“Image caption”> <img src=“img/thumbnails/2-1.jpg” alt=“First image”> a> <a href=“img/2-2.jpg”> <img src=“img/thumbnails/2-2.jpg” alt=“Second image”> a> … div>

自定义配置

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

常用方法

showNext – 切换到下一张图片

showPrevious – 切换到上一张图片

响应式图片

如果需要响应式图片，可以分别在a标签加入data-at-{width}属性，{width}是图片可显示的最大宽度，baguetteBox.js会在页面初始化（窗口手动改变大小不会再响应）时选择相应的尺寸。

"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/thumbs/2-1.jpg">

如果屏幕分辨率是1366×768，baguetteBox.js将会选择”img/medium/2-1.jpg”. 如果是1440×900则会选择 “img/big/2-1.jpg”.

兼容性

桌面端:

IE 8
Chrome
Firefox 3.6
Opera 12
Safari 5

移动端:

Safari on iOS
Chrome on Android

截图

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/share/17062.html

baguetteBox.js–使用原生JS编写的Web画廊插件

介绍

Github

特点

安装使用

兼容性

截图

相关推荐

发表评论