在前端开发中，我们经常需要实现图片集合的展示和放大预览，此时就需要使用图片灯箱（lightbox）效果。今天介绍一个常用的轻量级 npm 包——LightningBox，它能快速帮助你实现灯箱展示效果。
前置知识
在使用 LightningBox 之前，首先需要了解以下知识点：
- HTML、CSS、JavaScript 基础知识
- npm 的使用方法
安装
在使用 LightningBox 之前，需要先安装它。在终端输入以下命令：
npm install lightningbox
使用方法
导入
在 HTML 文件中，导入 LightningBox 样式和脚本文件：
<!-- 插件样式 --> <link rel="stylesheet" href="node_modules/lightningbox/dist/lightningbox.css"> <!-- 插件脚本 --> <script src="node_modules/lightningbox/dist/lightningbox.js"></script>
HTML 结构
在 HTML 中，按照以下格式编写代码：
<div class="gallery-container"> <div class="gallery-item"><img src="img/1.jpg"></div> <div class="gallery-item"><img src="img/2.jpg"></div> <div class="gallery-item"><img src="img/3.jpg"></div> </div>
JavaScript
在 JavaScript 中，初始化 LightningBox：
var gallery = new LightningBox('.gallery-item');
gallery.init();其中，.gallery-item是包含每个图片的容器类名，可以根据实际情况更改。
同时，我们也可以设置一些选项：
-- -------------------- ---- ------- --- ------- - --- ----------------------------- - -- ------ -------------- ----- -- ------ ------------ ----- -- - --- ---- -------------- ---- --- ---------------
其中，preventScroll、showCaption、closeOnEscape 分别实现了设置防止页面滚动、显示图片描述、按 ESC 关闭灯箱功能。
示例
-- -------------------- ---- -------
--------- -----
------
------
------------------- ------------
----- ----------------
----- --------------- ---------------------------- -------------------
---- ---- ---
----- ---------------- -------------------------------------------------------
------ ----------------
------------------ -
-------- -----
---------- -----
---------------- --------------
---------- ------
------- - -----
-
------------- -
------ ----
-------------- -----
-
------------- --- -
------ -----
-------- ------
------- -----
-
--------
-------
------
---- --------------------------
---- ---------------------
---- ----------------
------
---- ---------------------
---- ----------------
------
---- ---------------------
---- ----------------
------
------
---- ---- ---
------- --------------------------------------------------------------
--------
--- ------- - --- ----------------------------- -
-------------- -----
------------ -----
-------------- ----
---
---------------
---------
-------
-------我们也可以在 CodePen 上在线尝试示例：LightningBox Demo。
总结
LightningBox 是一个功能简单且易于使用的 npm 包。它为我们快速实现图片灯箱效果提供了简便的途径，让我们在开发过程中更加高效。在学习和使用过程中，需要注意 HTML、CSS、JavaScript 基础知识和 npm 的使用方法，同时需要了解官方文档中提供的选项和 API。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005695681e8991b448e4cf7