【亲测免费】 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

登录后查看全文

项目优选

收起

Ascend Extension for PyTorch

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

427

377

ops-math

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

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

🎉 (RuoYi)官方仓库基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统

Vue

1.65 K

970

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

1. 项目基础介绍

2. 关键技术和框架

3. 安装和配置准备工作

准备工作

安装步骤

使用 npm 安装

使用 Yarn 安装

使用 Bower 安装

通过 CDN 包含

引入 CSS

引入 JavaScript

初始化插件

热门内容推荐

最新内容推荐

项目优选

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

1. 项目基础介绍

2. 关键技术和框架

3. 安装和配置准备工作

准备工作

安装步骤

使用 npm 安装

使用 Yarn 安装

使用 Bower 安装

通过 CDN 包含

引入 CSS

引入 JavaScript

初始化插件

相关内容推荐

热门内容推荐

最新内容推荐

项目优选