Gallery
Full-screen image viewer with group navigation, keyboard controls, and swipe gestures.
How it works
Lightbox.js collects all elements with a
data-lightbox attribute. Click any image to open the
full-screen viewer. Images sharing the same data-lightbox
value form a navigable group — use arrow keys, swipe, or the
on-screen buttons to browse.
Usage
<!-- Single image -->
<img data-lightbox src="photo.jpg" alt="Caption">
<!-- Gallery group -->
<img data-lightbox="my-gallery" src="photo-1.jpg" alt="First">
<img data-lightbox="my-gallery" src="photo-2.jpg" alt="Second">
<!-- High-res override -->
<img data-lightbox="my-gallery"
data-lightbox-src="/img/photo-large.jpg"
src="/img/photo-thumb.jpg"
alt="Caption">
On this page
Click to zoom
A standalone image — no group, no navigation arrows. Click to open, click outside or press Escape to close.
Navigable collection
9 images sharing data-lightbox="landscapes" — open any one, then navigate with ← → or swipe.
Mixed sizes
Wide and regular items in the same gallery group. Uses data-lightbox-src for high-res versions in the viewer.