Lightbox3

Portrait, landscape, square. Thumbnails can be cropped to any aspect ratio and will seamlessly transition to the full-size image.

Click or tap to zoom in. Pinch to zoom on touch. Drag to pan when zoomed.

Captions support links and line breaks.

<a href="photo.jpg"
   data-lightbox
   data-caption="Photo by <a href='https://example.com'>Jane Doe</a>">
  <img src="thumb.jpg">
</a>

Select a preset, then click the image to feel the difference.

Lightbox.init({
  springOpen:  { stiffness: 260, damping: 24 },
  springClose: { stiffness: 300, damping: 28 },
});

Links without thumbnails fade in instead of morphing from a source element.

Open images from code. Without a trigger element, the image fades in from center.

Open image via API

const lb = Lightbox.init();
lb.open('https://example.com/photo.jpg');

Interact with any image above to see events logged here.

const lb = Lightbox.init();

lb.on('open', (e) => console.log('open', e));
lb.on('closed', (e) => console.log('closed', e));
lb.on('navigate', (e) => console.log('navigate', e));
lb.on('zoomIn', (e) => console.log('zoomIn', e));
lb.on('zoomOut', (e) => console.log('zoomOut', e));

Markup

Add data-lightbox to any <a> element. The href is the full-size image URL.

<a href="photo.jpg" data-lightbox>
  <img src="thumb.jpg">
</a>

To create a gallery, give each link the same data-lightbox value.

<a href="photo-1.jpg" data-lightbox="gallery">
  <img src="thumb-1.jpg">
</a>
<a href="photo-2.jpg" data-lightbox="gallery">
  <img src="thumb-2.jpg">
</a>

Script tag

Load the CSS and JavaScript from a CDN. Lightbox3 will auto-initialize on all [data-lightbox] elements.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightbox3@1/dist/lightbox3.css">
<script src="https://cdn.jsdelivr.net/npm/lightbox3@1/dist/lightbox3.min.js"></script>

Prefer to self-host? Download lightbox3.min.js and lightbox3.css from the latest release and reference them the same way.

npm

Install the package, then import and initialize for more control.

npm install lightbox3

import { Lightbox } from 'lightbox3';

const lb = Lightbox.init();

Coming from Lightbox2?

Lightbox3 uses the same markup pattern you already know — mostly the same HTML, way better UX.

Data attributes

Initialization

Options

Methods

Events

Subscribe with lb.on(event, callback) and unsubscribe with lb.off(event, callback). Callbacks receive a { src, triggerEl, index, total } detail object.

CSS custom properties

Override these on :root or any parent element to customize the lightbox appearance.