vanillabox 是一个用于网页上图片与视频的弹出框插件，开发者可以使用它在 web 页面上实现图片或者视频的灵活响应式预览。该插件支持多种浏览器，能够在任何现代浏览器中运行。本文将介绍 npm 包 vanillabox 的使用教程及示例代码。
安装 vanillabox
要使用 vanillabox 插及，首先需要使用 npm 安装它。在控制台中输入以下命令：
npm install vanillabox
安装完成后，你可以通过 import 或者 require 的方式在项目中引入该插件。
配置 vanillabox
引入 vanillabox 后，需要进行一些基本的配置才能使其正常运行。下面是一个基本的配置示例：
-- -------------------- ---- ------- ------ ------------ ---- ------------- ----- -- - --- ------------ --------- -------------- ----- ----- --------- ----- --------------- ------ ---------------- ------ ------------ ----------------- ---
selector：在哪个元素内部的链接被绑定到弹出框上。loop：是否启用循环滚动。keyboard：是否启用键盘支持。preferredWidth：弹出框的首选宽度。preferredHeight：弹出框的首选高度。customClass：将自定义 CSS 类添加到弹出框容器中。
HTML 标记结构
vanillabox 是基于 HTML 标记结构进行工作的。具体来说，要在你网页上使用插件，你应该创建一个链接，包含图片或视频 URL，然后将整个 HTML 元素包含在容器元素中。然后你可以将你的容器与 vanillabox 实例关联起来，如下所示：
-- -------------------- ---- -------
-- -----------------------------
---- --------------------------- ---------- -- --
----
-- -----------------------------
---- --------------------------- ---------- -- --
----
---- -------------------
-- -----------------------------
---- --------------------------- ---------- -- --
----
-- -----------------------------
---- --------------------------- ---------- -- --
----
------上面的示例代码创建了四个链接，其中三个包含的图片在一个带有 .my-gallery 类的容器中。图片 URL 以文本形式包含在链接元素的 href 属性中，而缩略图的 URL 包含在链接元素中的 src 属性中。
修改样式
vanillabox 组件是基于 CSS 进行样式调整的。要调整样式，最好在项目中创建自定义 CSS 文件，并将文件链接到你的 HTML 页面上，如下所示：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------------- ---------------
----- ---------------- --------------------- --
-------
------
---- ----------------
-- -------------------------------- -----------------------------------
-- -------------------------------- -----------------------------------
-- -------------------------------- -----------------------------------
------
------- -----------------------------
-------
-------vanillabox 默认情况下有一套基础样式。如果需要修改，可以在自己的 CSS 文件中重新定义类或标识符。以下是一些建议的 class 名称：
.vanillabox-overlay：弹出框背景层。.vanillabox-container：包含弹出框内容的整个容器。.vanillabox-image：包含图片的元素。.vanillabox-preloader：包含预加载动画的元素。.vanillabox-caption：包含标题和描述的元素。
示例代码
下面是一个完整的实例代码，展示了如何使用 vanillabox。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------------- ---------------
----- ---------------- --------------------- --
-------
------
---- ----------------
-- -------------------------------- -----------------------------------
-- -------------------------------- -----------------------------------
-- -------------------------------- -----------------------------------
------
------- -----------------------------
--------
----- -- - --- ------------
-------- - --------- --
---
---------
-------
-------小结
本文介绍了如何使用 npm 包 vanillabox 实现灵活响应式的图片与视频预览。在使用过程中，我们需要安装 vanillabox、配置 vanillabox、创建 HTML 结构和修改样式。同时，我们也提供了一个完整的示例代码，读者可以基于该代码进一步学习与实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057c9481e8991b448ebf28