简介
BaguetteBox.js 是一个基于 JavaScript 的纯 CSS 图片库，它能够在网页中创建一个漂亮的画廊。该库简单易用，支持响应式布局，在移动设备上的兼容性也很好。本文将详细介绍如何使用 npm 包 baguettebox.js 来构建一个简单的图片画廊。
安装
首先，我们需要安装 baguettebox.js。
可以在终端中输入以下命令来安装：
npm install baguettebox.js --save
或者在项目的 package.json 文件中添加以下依赖项：
{
"dependencies": {
"baguettebox.js": "^1.11.0"
}
}然后运行 npm install。
使用
在 HTML 文件中，引用 baguettebox.css 和 baguettebox.js：
<link rel="stylesheet" href="node_modules/baguettebox.js/dist/baguettebox.min.css"> <script src="node_modules/baguettebox.js/dist/baguettebox.min.js"></script>
为了方便起见，我们可以使用 CDN 引入：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/baguettebox.js/dist/baguettebox.min.css"> <script src="https://cdn.jsdelivr.net/npm/baguettebox.js/dist/baguettebox.min.js"></script>
接下来，我们需要为每个想要显示的图片添加一个 data-caption 属性来设置图片的标题。例如：
<a href="path/to/image.jpg" data-caption="This is a caption"> <img src="path/to/image-thumbnail.jpg"> </a>
最后，在 JavaScript 文件中调用 baguetteBox.run() 函数即可创建画廊：
baguetteBox.run('.gallery');其中，.gallery 是包含所有图片的容器的类名。
配置
BaguetteBox.js 有很多自定义选项，以满足不同使用场景的需求。以下是一些常见的选项示例：
baguetteBox.run('.gallery', {
captions: true,
buttons: 'auto',
async: true,
preload: 2,
animation: 'fadeIn',
noScrollbars: false
});captions: 是否显示图片标题，默认为true。buttons: 控制按钮的显示方式，可以设置为'auto'、'always'或'never'，默认为'auto'。async: 图片是否异步加载，默认为true。preload: 预加载的图片数量，默认为2。animation: 显示图片的动画效果，可以设置为'fadeIn'、'slideIn'或自定义动画名称的字符串，详见官方文档。noScrollbars: 是否禁用滚动条，默认为false。
示例代码
以下是一个简单的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
--------- ---------------
----- ---------------- ----------------------------------------------------------------------------
-------
------
---- ----------------
-- ------------------------- ------------------ -- --- ----- -------
---- -----------------------------------
----
-- ------------------------- ------------------ -- --- ------ -------
---- -----------------------------------
----
-- ------------------------- ------------------ -- --- ----- -------
---- -----------------------------------
----
------
------- -----------------------------------------------------------------------------------
--------
--------------------------- -
--------- -----
-------- -------
------ -----
-------- --
---------- ---------
------------- -----
---
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------