【亲测免费】 Lightgallery.js 安装与配置指南

2026-01-30 04:16:52作者：侯霆垣

1. 项目基础介绍

Lightgallery.js 是一个功能完整、响应式的 JavaScript 图片和视频画廊插件。它不依赖任何其他库，提供了丰富的功能和高度的可定制性，适用于各种网站和应用程序。该项目主要使用 TypeScript 进行编写。

2. 关键技术和框架

TypeScript: 用于编写更可靠、更易于维护的 JavaScript 代码。
模块化架构: 内置插件支持，如缩放、幻灯片播放、评论、全屏等。
响应式设计: 自动适配各种屏幕尺寸，支持移动设备触摸操作。
HTML5 和 CSS3: 利用最新的网页技术实现动画和交互效果。

3. 安装和配置准备工作

准备工作

在开始安装前，请确保您的系统中已经安装了以下工具：

Node.js 和 npm（Node.js 包管理器）
如果您打算使用 Yarn 或 Bower 作为包管理工具，请确保它们已经安装。

安装步骤

使用 npm 安装

打开命令行工具，在您的项目目录中运行以下命令：

npm install lightgallery.js

使用 Yarn 安装

如果您使用 Yarn，运行以下命令：

yarn add lightgallery.js

使用 Bower 安装

如果您使用 Bower，运行以下命令：

bower install lightgallery.js --save

通过 CDN 包含

如果不想通过包管理器安装，可以直接从 CDN 链接引入 lightgallery.js：

<script src="https://cdn.jsdelivr.net/npm/lightgallery.js@1.4.1/dist/js/lightgallery.min.js"></script>

确保将上述链接中的版本号替换为最新版本号。

引入 CSS

在 HTML 文档的 <head> 部分引入 lightgallery 的 CSS 文件：

<link rel="stylesheet" href="path/to/lightgallery.css">

引入 JavaScript

在 HTML 文档的 <body> 部分的底部引入 lightgallery 的 JavaScript 文件：

<script src="path/to/lightgallery.min.js"></script>

如果需要使用 lightgallery 的插件，如缩略图、全屏等，还需要引入相应的插件文件。

初始化插件

在引入 lightgallery.js 文件后，可以使用以下代码初始化插件：

<script>
  lightGallery(document.getElementById('lightgallery'));
</script>

确保您的 HTML 中有一个带有 id="lightgallery" 的元素。

以上步骤即为 lightgallery.js 的基础安装和配置过程。根据具体需求，您可能还需要进一步配置和自定义插件的行为。

lightgallery.js

Full featured JavaScript image & video gallery. No dependencies

项目地址：https://gitcode.com/gh_mirrors/li/lightgallery.js

登录后查看全文

项目优选

收起

kernel

deepin linux kernel

pytorch

Ascend Extension for PyTorch

本仓库是 Flutter SDK 与 Flutter Engine 的 OpenHarmony 适配版本，由 CPF-Flutter 团队维护。开发者可使用熟悉的 Flutter 技术栈开发 OpenHarmony 应用，3.35.7 及以后的适配版本可基于本仓库源码构建支持 OpenHarmony 的 Flutter Engine。

本项目是CANN提供的transformer类大模型算子库，实现网络在NPU上加速计算。

🔥LeetCode solutions in any programming language | 多种编程语言实现 LeetCode、《剑指 Offer（第 2 版）》、《程序员面试金典（第 6 版）》题解

Java

atomcode

Claude Code 的开源替代方案。连接任意大模型，编辑代码，运行命令，自动验证 — 全自动执行。用 Rust 构建，极致性能。｜ An open-source alternative to Claude Code. Connect any LLM, edit code, run commands, and verify changes — autonomously. Built in Rust for speed. Get Started

本项目是CANN提供的神经网络类计算算子库，实现网络在NPU上加速计算。

openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。

465

456

Cangjie-Examples

本仓将收集和展示高质量的仓颉示例代码，欢迎大家投稿，让全世界看到您的妙趣设计，也让更多人通过您的编码理解和喜爱仓颉语言。

458

5.25 K