Image lightbox
Thumbnails are plain links to the full images - without a script they open the image.
varz-lightbox.js (2.6 kB minified + gzipped) shows them in a native <dialog>: focus stays inside, Esc closes,
← → keys, swipe and mouse drag, captions, counter.
Gallery
Single image
An empty data-varz-lightbox value opens one image without arrows and counter. Captions come from data-vz-caption or the image's alt text.
Markup
<a href="large-1.jpg" data-varz-lightbox="trip" data-vz-caption="Day one">
<img src="thumb-1.jpg" alt="Mountains at dawn">
</a>
<a href="large-2.jpg" data-varz-lightbox="trip">
<img src="thumb-2.jpg" alt="Ocean coast">
</a>
<script src="varz.js" defer></script>
<script src="varz-lightbox.js" defer></script>| Attribute | What it does |
|---|---|
data-varz-lightbox="group" | Opens the link's image in the viewer. Links with the same value form one gallery (arrows, counter); empty value: single image. |
data-vz-caption | Caption under the image; without it the thumbnail's alt text is used. |
data-vz-srcset | Sizes of the full image for the viewer, e.g. large.jpg 1600w, huge.jpg 3200w - the browser picks the one for the screen. |
href to a video | A YouTube / Vimeo page or a video file plays in the viewer (see video.html). |
Keys: ← → previous / next, Esc closes, Tab stays in the viewer; swipe on touch screens; a click on the dark area closes.
The viewer gets .vz while open (varz-activated / varz-deactivated events).
Look: varz.lightbox.styles (VARZ inline variables), texts: varz.lightbox.i18n.