Luminous：简单轻量无依赖的JavaScript灯箱库，让图片展示更出彩

Luminous：简单轻量无依赖的JavaScript灯箱库，让图片展示更出彩

【免费下载链接】luminousA simple, lightweight, no-dependencies JavaScript lightbox项目地址: https://gitcode.com/gh_mirrors/lu/luminous

Luminous 是一款简单轻量且无依赖的 JavaScript 灯箱库，能够帮助开发者轻松实现图片的优雅展示效果。它以简洁的设计和强大的功能，成为众多网站展示图片的理想选择。

📌 核心优势：为什么选择 Luminous？

🌟 轻量无依赖，加载更快速

Luminous 最大的亮点在于其轻量级特性，整个库不依赖任何第三方框架或库，这意味着它不会给项目带来额外的负担，能够快速加载并运行，提升网站的整体性能。

🎨 简洁易用，快速集成

使用 Luminous 非常简单，只需引入相关文件，通过简单的配置就能实现灯箱效果。无论是新手还是有经验的开发者，都能快速上手并将其集成到自己的项目中。

🚀 快速上手：Luminous 的基本使用

🔧 安装步骤

要使用 Luminous，首先需要获取相关文件。你可以通过克隆仓库的方式获取：

git clone https://gitcode.com/gh_mirrors/lu/luminous

📝 基础配置

在项目中引入 Luminous 的 CSS 和 JavaScript 文件。CSS 文件位于 src/css/luminous-basic.css，JavaScript 文件主要有 src/js/Luminous.js 等。

然后，在 HTML 中创建触发灯箱的元素，例如一个链接：

<a href="path/to/image.jpg" class="luminous-trigger">查看图片</a>

接着，在 JavaScript 中初始化 Luminous：

import Luminous from './src/js/Luminous.js'; document.addEventListener('DOMContentLoaded', () => { const triggers = document.querySelectorAll('.luminous-trigger'); triggers.forEach(trigger => new Luminous(trigger)); });

🛠️ 高级功能：自定义你的灯箱

📄 自定义选项

Luminous 提供了丰富的自定义选项，让你可以根据项目需求调整灯箱的行为和外观。例如，你可以设置灯箱的命名空间、图片来源属性、触发事件等。这些选项在 src/js/Luminous.js 中的构造函数部分有详细定义。

以下是一些常用的选项：

• namespace：生成元素类名的前缀。
• sourceAttribute：获取灯箱图片源的属性。
• caption：图片的标题，可以是字符串或函数。
• openTrigger：触发灯箱打开的事件。
• closeTrigger：触发灯箱关闭的事件。
• closeWithEscape：是否允许按 ESC 键关闭灯箱。
• closeOnScroll：页面滚动时是否自动关闭灯箱。

🖼️ 图片画廊：LuminousGallery

如果你需要展示一组图片，形成图片画廊，可以使用 LuminousGallery。它位于 src/js/LuminousGallery.js，能够实现图片之间的切换等功能。

使用 LuminousGallery 的示例代码：

import LuminousGallery from './src/js/LuminousGallery.js'; document.addEventListener('DOMContentLoaded', () => { const triggers = document.querySelectorAll('.gallery-trigger'); new LuminousGallery(triggers); });

📚 总结

Luminous 作为一款简单轻量无依赖的 JavaScript 灯箱库，以其出色的性能和易用性，为图片展示提供了优秀的解决方案。无论是个人博客、企业网站还是电商平台，都能通过 Luminous 让图片展示更加出彩。如果你正在寻找一款高效实用的灯箱库，不妨试试 Luminous，相信它会给你带来惊喜！

【免费下载链接】luminousA simple, lightweight, no-dependencies JavaScript lightbox项目地址: https://gitcode.com/gh_mirrors/lu/luminous