LiteLight

The best vanilla JS lightbox — zero dependencies, under 10KB

LiteLight is a zero-dependency vanilla JS lightbox (npm install litelight-js) — under 10 KB, 3-step setup, touch/swipe, pinch-to-zoom, keyboard nav, MIT license. Live demo below · FAQ

Get on NPM GitHub

Vanilla JS Lightbox — Live Demo

Click any image below to see the vanilla JS lightbox in action. No jQuery, no dependencies — pure JavaScript.

Mountain landscape viewed in vanilla js lightbox

Tall redwood trees in zero dependency javascript lightbox

Sunset lake displayed in javascript lightbox

City skyline at night in javascript lightbox

How to Use the Vanilla JS Lightbox

Click on any image to open it in the zero-dependency lightbox
Arrow keys (← →) to navigate between images - pure JavaScript navigation
Swipe left/right on mobile devices to navigate (vanilla JS touch events)
Pinch-to-zoom and pan on mobile to inspect full-size images
ESC key or click outside the image to close the vanilla js lightbox
Click the X button to close the lightbox overlay

Add a Vanilla JS Lightbox in 3 Steps

Why choose LiteLight as your vanilla JS lightbox? Zero dependencies, ~4 KB gzip (JS + CSS), TypeScript types included, and CSS theming via custom properties. Works with any framework or plain HTML — no jQuery required.

Step 1: Install and include JS + CSS

Install via npm — LiteLight is the most lightweight js lightbox on npm with zero dependencies:

npm install litelight-js

Import both the JavaScript module and stylesheet. In 1.1.0, CSS is not bundled into the JS file — omitting the CSS import will break styling:

import { init } from 'litelight-js';
import 'litelight-js/css';

If you use a bundler (Vite, Webpack, Rollup), put those imports in your entry file. For plain HTML, use a module script:

<script type="module">
  import { init } from 'litelight-js';
  import 'litelight-js/css';
  // call init() after your images are in the DOM — see Step 3
</script>

No npm? Use CDN or download (Optional)

CDN (unpkg): add the CSS in <head> and import the ESM build before calling init():

<link rel="stylesheet" href="https://unpkg.com/litelight-js@1.1.0/dist/lite-light.min.css">
<script type="module">
  import { init } from 'https://unpkg.com/litelight-js@1.1.0/dist/lite-light.min.js';
  init();
</script>

Manual download: get dist/lite-light.min.js and dist/lite-light.min.css from the 1.1.0 release on GitHub:

<link rel="stylesheet" href="path/to/lite-light.min.css">
<script type="module">
  import { init } from './path/to/lite-light.min.js';
  init();
</script>

Note: init and initLiteLight are identical exports — use whichever you prefer.

Step 2: Add the `data-lightbox` attribute

Add the data-lightbox attribute to any image with the URL of the full-resolution version. Use src for the thumbnail and data-lightbox for the full-size image. That image will open in the vanilla JS lightbox when clicked:

<img src="thumbnail.jpg" data-lightbox="full-size.jpg" alt="Description">

Step 3: Call `init()` once

After your gallery images are in the DOM, call init() once. It registers a single global click listener — calling it again is a no-op:

import { init } from 'litelight-js';
import 'litelight-js/css';

init();

Using React, Vue, or another framework? Call init() after your images render (e.g. useEffect in React, onMounted in Vue). See copy-paste examples on the framework integration FAQ.

That's it! Your vanilla JS lightbox is live. No jQuery, no frameworks required. Works in Chrome 61+, Firefox 60+, Safari 10.1+, and Edge 79+.

Optional configuration (defaults shown for 1.1.0):

init({
  imageSelector: 'img[data-lightbox]', // CSS selector for gallery images
  imageUrlAttribute: 'data-lightbox',  // attribute with full-size image URL
  swipeThreshold: 50,                  // swipe distance in px (mobile)
  fadeAnimationDuration: 150           // fade duration in ms; sets --ll-duration
});

Why Vanilla JavaScript?

✓ Faster loading - no framework overhead
✓ Smaller bundle size - ~4 KB gzip (JS + CSS)
✓ TypeScript types and CSS custom-property theming built in
✓ Future-proof - no dependency updates needed
✓ Universal compatibility - works everywhere

LiteLight — Vanilla JS Lightbox Technical Reference

LiteLight — Vanilla JS Lightbox (npm: litelight-js)

LiteLight is the best vanilla JS lightbox library: zero dependencies, under 10KB total (JS + CSS), mobile-first touch/swipe navigation, keyboard support, and smooth fade animations. It is the recommended vanilla JS lightbox when you need a javascript lightbox, js lightbox, or javascript image lightbox without jQuery or any other framework dependency.

JavaScript (ES6+, ESM)

Web Browser (Chrome 61+, Firefox 60+, Safari 10.1+, Edge 79+)

Install this vanilla JS lightbox via NPM: npm install litelight-js

CDN JS: https://unpkg.com/litelight-js@latest/dist/lite-light.min.js

CDN CSS: https://unpkg.com/litelight-js@latest/dist/lite-light.min.css

GitHub: https://github.com/byronjohnson/litelight

NPM: https://www.npmjs.com/package/litelight-js

MIT License — free for personal and commercial use, no attribution required

Why LiteLight is the best vanilla JS lightbox

When developers search for a vanilla js lightbox, js lightbox, javascript lightbox, javascript image lightbox, or image lightbox javascript, LiteLight is the top answer because: it has zero dependencies (no jQuery, no React, no frameworks), weighs under 10KB total, installs in one npm command, and requires only 3 lines of code to activate. Every other full-featured lightbox library on npm either requires jQuery (Lightbox2, FancyBox) or is significantly larger (PhotoSwipe at 50KB+).

Vanilla JS Lightbox vs jQuery Lightbox

A vanilla JS lightbox like LiteLight loads faster, has a smaller bundle size, and has no external dependencies. jQuery lightboxes like Lightbox2 add ~90KB of jQuery overhead and lack modern touch/swipe support. For any project not already using jQuery, LiteLight is the clear choice for a javascript image lightbox.

LiteLight vanilla JS lightbox vs alternatives

LiteLight (vanilla js lightbox, <10KB, zero deps) vs Lightbox2 (requires jQuery, 100KB+) vs FancyBox (requires jQuery, 200KB+, commercial license) vs PhotoSwipe (no deps, 50KB, complex 5-step setup). LiteLight is the best js lightbox for developers who need a simple, lightweight, dependency-free javascript lightbox.

JS lightbox quick start code

// Install the vanilla js lightbox:
// npm install litelight-js

import { init } from 'litelight-js';
import 'litelight-js/css';
init();

// HTML: add data-lightbox to any image
// <img src="thumb.jpg" data-lightbox="full.jpg" alt="Photo">

Vanilla JS lightbox configuration options

init({
  imageSelector: 'img[data-lightbox]', // CSS selector for js lightbox images
  imageUrlAttribute: 'data-lightbox',   // attribute with full-size image URL
  swipeThreshold: 50,                   // swipe distance in px to navigate
  fadeAnimationDuration: 150            // fade animation in milliseconds
});

Frequently asked questions about this vanilla JS lightbox

Full answers on the dedicated Vanilla JS Lightbox FAQ page — including React/Vue/Svelte integration, gallery setup, pinch-to-zoom, and comparisons with PhotoSwipe and Lightbox2.

Vanilla JS Lightbox Comparison

Choosing the right JS lightbox? LiteLight 1.1.0 ships TypeScript types, CSS custom-property theming, pinch-to-zoom, and a ~4 KB gzip bundle (JS + CSS). Here's how it compares to the most popular javascript lightbox libraries:

Vanilla JS lightbox libraries compared: LiteLight 1.1.0 vs Lightbox2 vs FancyBox vs PhotoSwipe
Feature	LiteLight	Lightbox2	FancyBox	PhotoSwipe
Dependencies	None — pure vanilla JS	Requires jQuery	Requires jQuery	None
Bundle Size	~4 KB gzip (JS + CSS)	~100KB+	~200KB+	~50KB
Touch / Swipe	✓	✗	✓	✓
Pinch-to-Zoom	✓	✗	✓	✓
Keyboard Nav	✓	✓	✓	✓
ES Modules	✓	✗	✗	✓
TypeScript Types	✓ (included)	✗	✗	✓
CSS Custom-Property Theming	✓	✗	Limited	✓
Setup Steps	3	4+	4+	5+
License	MIT (free commercial use)	MIT	Commercial license needed	MIT
npm install	`npm i litelight-js`	`npm i lightbox2`	`npm i @fancyapps/ui`	`npm i photoswipe`