lightGallery — Full-Featured Lightbox and Gallery Plugin

Introduction

lightGallery is a modular JavaScript gallery plugin that displays images, videos, and iframes in a responsive lightbox overlay. It supports touch and swipe gestures, keyboard navigation, and a plugin system for thumbnails, zoom, and video playback.

What lightGallery Does

• Opens images and media in a responsive full-screen lightbox overlay
• Supports YouTube, Vimeo, and HTML5 video playback within the gallery
• Provides pinch-to-zoom and drag-to-pan for image inspection
• Generates thumbnail strips for quick navigation between items
• Enables deep linking with URL hash support for sharing specific slides

Architecture Overview

The core module handles the lightbox container, overlay, navigation, and event system. Features like thumbnails, zoom, autoplay, and video are implemented as separate plugin modules that hook into lifecycle events. This keeps the base bundle small while allowing opt-in functionality.

Self-Hosting & Configuration

• Install via npm or include from a CDN
• Initialize on a container element with gallery item links
• Import only the plugins you need (lg-thumbnail, lg-zoom, lg-video)
• Customize transitions, animation speed, and backdrop opacity via options
• Use the destroy() method for cleanup in single-page applications

Key Features

• Modular plugin architecture keeps the core lightweight (under 15 KB gzipped)
• Framework wrappers for React, Vue, and Angular
• Full-screen mode and slideshow autoplay
• Social sharing buttons via the share plugin
• Accessibility support with ARIA labels and keyboard navigation

Comparison with Similar Tools

• PhotoSwipe — Gesture-focused; lightGallery adds video and iframe support
• Fancybox — jQuery-dependent and archived; lightGallery is vanilla JS and actively maintained
• GLightbox — Minimal and lightweight; lightGallery offers more plugins and customization
• Lightbox2 — jQuery-based with basic features; lightGallery supports modern frameworks
• Spotlight — Lightweight gallery; lightGallery provides richer video and zoom capabilities

FAQ

Q: Does it work without jQuery? A: Yes. lightGallery v2+ is pure JavaScript with no jQuery dependency.

Q: How do I use it with React? A: Install lightgallery and use the official LightGallery React component wrapper.

Q: Can I lazy load gallery images? A: Yes. Use the data-src attribute on thumbnails and lightGallery loads full images on demand.

Q: How do I add video support? A: Import the lg-video plugin and provide YouTube, Vimeo, or HTML5 video URLs in data attributes.

Sources

• https://github.com/sachinchoolur/lightGallery
• https://www.lightgalleryjs.com/