Image Gallery Lightbox

Name: Image Gallery Lightbox
Author: @content_wei

ReactMedia & AssetsUXUpdated 2026-08-11

When to use: Building photography portfolios, product image galleries, event photo albums, or media archive pages.

Install

npx skills add image-gallery-lightbox

Git Clone

git clone https://github.com/skillhub-community/image-gallery-lightbox.git

Repository Docs

Description

Implements a responsive image gallery with CSS Grid masonry layout, click-to-open lightbox with smooth zoom-in animation, pinch-to-zoom and swipe gestures for mobile, keyboard navigation (arrows, Escape to close), image counter and caption display, and a thumbnail strip at the bottom of the lightbox.

Lazy loads images via native `loading='lazy'` with blur-up placeholder using Base64 thumbnails. Auto-generates srcSet for responsive image delivery. Supports grouping images into albums with filter tabs.

AI Hub

Need a model endpoint?

AI Hub is an OpenAI-compatible endpoint for Cursor, Claude Code, and Agent workflows.

Open AI Hub

Metadata

Author@content_wei

LicenseMIT

Version1.0.0

Dependencies0