GLightbox

GLightbox is a lightweight, dependency-free JavaScript lightbox for displaying images, videos, iframes, and inline content in an elegant overlay. At around 11KB gzipped, it supports multiple galleries, responsive images, and autoplay for YouTube, Vimeo, and self-hosted video.

Designed to work on any screen size, GLightbox ships keyboard and touch navigation, zoomable and draggable images, a scriptable API, and a themeable interface you can restyle with a few CSS changes. It has no runtime dependencies and works with plain HTML markup or a bundler.

What You Get

• A pure JavaScript lightbox with no runtime dependencies at ~11KB gzipped
• Support for images, YouTube and Vimeo video, self-hosted video, iframes, and inline content
• Multiple independent galleries with responsive image selection
• Keyboard and touch navigation plus zoomable, draggable images
• A scriptable API and themeable, CSS-customizable interface

Common Use Cases

• Adding an image gallery lightbox to a marketing or portfolio site
• Embedding YouTube or Vimeo video in a popup with autoplay
• Displaying inline content or forms in a modal-like overlay
• Building a responsive, touch-friendly gallery for mobile users

Under The Hood

Architecture — The entry point src/js/glightbox.js exposes the GLightbox factory and orchestrates modular core units under src/js/core/: slide-parser and slide handle content detection and rendering, while keyboard-navigation, touch-navigation, touch-events, drag, and zoom implement interaction. Media-type handlers live under src/js/slides/ (image, video, iframe, inline), and helpers under src/js/utils/. Styles are authored in PostCSS under src/postcss and compiled to the distributed CSS.

Tech Stack — Vanilla JavaScript with zero runtime dependencies, bundled with Rollup and transpiled via Babel; CSS is processed through PostCSS with nesting and preset-env. The build outputs UMD and minified assets to dist/, and a hand-written index.d.ts provides TypeScript type definitions.

Code Quality — The source is split into small single-responsibility modules and linted with ESLint. There is no automated test suite in the repository; correctness is exercised through the bundled demo/ and development harness rather than unit tests, which is the main quality gap for an otherwise cleanly organized codebase.

API Design — The public API is deliberately minimal: call GLightbox(options) to get an instance, then use methods like open, close, prevSlide, nextSlide, and event callbacks. Configuration is a single options object, markup uses data attributes, and the README plus live demo make the getting-started path very short, giving the library a gentle learning curve.