lightbox.js 是一个用于创建响应式图像和视频灯箱效果的 JavaScript 库。它基于原生 JavaScript，并且具有简单的使用方式。
以下是 lightbox.js 的详细用法解释：
1. 引入库文件：首先，你需要在页面中引入 lightbox.js 的库文件。你可以通过在 HTML 文件的 <head> 标签内添加以下代码来实现：
<link rel="stylesheet" href="lightbox.css"><script src="lightbox.js"></script>
2. 创建 HTML 结构：接下来，在页面中创建一个 HTML 结构来包含你想要显示在灯箱中的图像或视频。通常，你可以使用 <a> 标签来包裹图像或视频元素，例如：
<a data-lightbox="example" href="path/to/image.jpg"><img src="path/to/thumbnail.jpg" alt="Example Image">
</a>
3. 初始化插件：一旦完成了 HTML 结构的设置，现在你需要初始化 lightbox.js 插件。你可以在页面的底部添加以下 JavaScript 代码进行初始化：
<script>lightbox.option({
'resizeDuration': 200,
'wrapAround': true
})
</script>
4. 配置选项：你可以根据需要配置不同的选项来自定义灯箱的行为。在上述代码中，我们设置了两个选项：resizeDuration 和 wrapAround。resizeDuration 用于设置调整大小的持续时间（以毫秒为单位），而wrapAround 则用于启用无限循环浏览。你可以根据需要配置其他选项，具体请参考 lightbox.js 的文档。
5. 样式定制：最后，你可以通过编辑 lightbox.css 文件来自定义灯箱的样式。你可以更改背景颜色、文字样式等等，以满足你的设计需求。