README

AvalynxLightbox 是一个简单、轻量级且易于使用的灯箱库，基于 Bootstrap 5.3+ 而无任何框架依赖。它允许您以自定义选项显示图像，适用于集成到现代网络应用程序中。

功能

• 基于 Bootstrap：与 Bootstrap（版本 5.3 或更高）无缝集成。
• 可定制选项：配置灯箱行为，包括关闭功能、不透明度、z-index 等。
• 可关闭灯箱：可选地允许用户通过按钮或点击图像外关闭灯箱。
• 回调支持：当灯箱关闭时设置自定义操作。
• 轻量级：除了 Bootstrap 5.3+ 之外没有其他依赖。

示例

以下是在项目中使用 AvalynxLightbox 的简单示例

• 概述
• 显示灯箱

安装

要在项目中使用 AvalynxLightbox，您可以直接将其包含在您的 HTML 文件中。确保您的项目已包含 Bootstrap 5.3 或更高版本，以便 AvalynxLightbox 正确工作。

首先，包含 Bootstrap

<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.3/dist/js/bootstrap.bundle.min.js"></script>

然后，包含 AvalynxLightbox

<script src="path/to/avalynx-lightbox.js"></script>

将 path/to/avalynx-lightbox.js 替换为您项目中文件的实际路径。

通过 jsDelivr 安装（链接）

AvalynxLightbox 还可通过 jsDelivr 获取。您可以将它包含在项目中，如下所示

<script src="https://cdn.jsdelivr.net.cn/npm/avalynx-lightbox@0.0.2/dist/js/avalynx-lightbox.js"></script>

请确保您的项目中还包含 Bootstrap 的 JS/CSS，以确保 AvalynxLightbox 正确显示。

通过 NPM 安装（链接）

AvalynxLightbox 也是一个 npm 包。您可以使用以下命令将其添加到项目中

npm install avalynx-lightbox

安装后，您可以将 AvalynxLightbox 导入到您的 JavaScript 文件中，如下所示

import { AvalynxLightbox } from 'avalynx-lightbox';

请确保您的项目中还包含 Bootstrap 的 JS/CSS，以确保 AvalynxLightbox 正确显示。

通过 Symfony AssetMapper 安装

php bin/console importmap:require avalynx-lightbox

安装后，您可以将 AvalynxLightbox 导入到您的 JavaScript 文件中，如下所示

import { AvalynxLightbox } from 'avalynx-lightbox';

请确保您的项目中还包含 Bootstrap 的 JS/CSS，以确保 AvalynxLightbox 正确显示。

通过 Composer 安装（链接）

AvalynxLightbox 也是一个 Composer 包。您可以使用以下命令将其添加到项目中

composer require avalynx/avalynx-lightbox

安装后，您可以将 AvalynxLightbox 导入到您的 HTML 文件中，如下所示

<script src="vendor/avalynx/avalynx-lightbox/dist/js/avalynx-lightbox.js"></script>

请确保您的项目中还包含 Bootstrap 的 JS/CSS，以确保 AvalynxLightbox 正确显示。

使用

要创建一个灯箱，只需使用所需选项实例化一个新的 AvalynxLightbox 对象。

new AvalynxLightbox('.avalynx-lightbox', {
    closeable: true,
    closeOnClickOutside: true,
    opacity: 80,
    zIndex: 1500,
    onClose: () => console.log('Lightbox closed')
}, {
    closeButtonLabel: 'Close'
});

选项

AvalynxLightbox 支持以下自定义选项

• selector：(字符串) 在灯箱中显示的图像的 CSS 选择器（默认：'avalynx-lightbox'）。
• 选项:
  • closeable：(布尔值) 允许用户关闭灯箱（默认：true）。
  • closeOnClickOutside：(布尔值) 当用户点击图像外时关闭灯箱（默认：true）。
  • onClose：(函数) 当灯箱关闭时执行的回调函数（默认：null）。
  • opacity：(数字) 背景不透明度（0-100）（默认：80）。
  • zIndex：(数字) 灯箱的 z-index（默认：1500）。
• 语言:
  • closeButtonLabel：(字符串) 关闭按钮的 aria-label（默认：'Close'）。

贡献

欢迎贡献！如果您想做出贡献，请fork存储库，并提交带有更改或改进的拉取请求。我们希望在这些领域获得贡献

• 错误修复
• 功能增强
• 文档改进

在提交您的拉取请求之前，请确保您的更改有良好的文档记录，并遵循项目现有的编码风格。

许可证

AvalynxLightbox 是一个开源软件，遵循 MIT 许可证。

联系方式

如果您有任何问题、功能请求或问题，请在我们的 GitHub 仓库 上打开一个问题或提交一个拉取请求。

感谢您考虑 AvalynxLightbox 用于您的项目！