# lightGallery

Adds and configures a lightGallery lightbox in JS, React, Vue or Angular.

- Repository: https://github.com/sachinchoolur/lightGallery (7055 stars)
- Category: Design
- License: GPL-3.0
- Last updated: 2026-10-14
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add sachinchoolur/lightGallery --skill lightgallery -g -a claude-code -y`
Codex: `npx skills add sachinchoolur/lightGallery --skill lightgallery -g -a codex -y`
Cursor: `npx skills add sachinchoolur/lightGallery --skill lightgallery -g -a cursor -y`
Gemini CLI: `npx skills add sachinchoolur/lightGallery --skill lightgallery -g -a gemini-cli -y`

## Description

Add or configure a lightGallery image/video lightbox or gallery in vanilla JavaScript, React, Vue or Angular, install, imports, plugins, CSS, settings, and the pitfalls that produce most bug reports. Use when a project needs a lightbox, photo gallery, thumbnail strip, zoomable images or a YouTube/Vimeo gallery, or when editing code that imports lightgallery or @lightgallery/*.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# lightGallery

One gallery, four packages with the same features and settings:

| Stack | Package | Plugins import path |
| --- | --- | --- |
| Vanilla JS / TypeScript | `lightgallery` | `lightgallery/plugins/<name>` |
| React | `@lightgallery/react` | `@lightgallery/react/plugins/<name>` |
| Vue 3 | `@lightgallery/vue` | `@lightgallery/vue/plugins/<name>` |
| Angular | `@lightgallery/angular` | `@lightgallery/angular/plugins/<name>` |

Plugin names: `thumbnail`, `zoom`, `video`, `autoplay`, `fullscreen`, `share`,
`hash`, `rotate`, `pager`, `comment`, `mediumZoom`, `relativeCaption`,
`vimeoThumbnail`, `originCrop`, `justified`. Each is a separate entry, import
only what the project uses.

**Default recipe.** Unless the user asks for something else, every image
gallery gets the `zoom` and `thumbnail` plugins, their two CSS files, and
`lgSize: 'WIDTH-HEIGHT'` (`data-lg-size` in markup) on every image item.
`lgSize` is the natural size of the full image; it drives the
zoom-from-origin animation, where the slide opens from the clicked
thumbnail and closes back to it. Without it the slide fades in. Read the
dimensions from the image files, the image optimizer or the CMS rather than
dropping the field. Leave a plugin out only when told to.

**Two rules that prevent most problems**

1. **CSS is a consumer import in every stack.** The framework packages ship
   no CSS. Import `lightgallery/css/lightgallery.css` plus one file per
   plugin (`lightgallery/css/lg-thumbnail.css`, `lg-zoom.css`, …), or
   `lightgallery/css/lightgallery-bundle.css` for everything.
2. **Plugins are opt-in.** A feature only exists when its plugin is passed
   (`plugins: [...]`, `plugins={[...]}`, `:plugins="[...]"`,
   `[features]="[withX()]"`). Its settings are ignored otherwise.

## Vanilla JavaScript

The rest: https://github.com/sachinchoolur/lightGallery/blob/HEAD/skills/lightgallery/SKILL.md