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