lightbox
Image and gallery viewer: a list of links to full-size images, opened in place in a native <dialog>.
Gallery
Six images, no loop: open one and step through
the set with the side controls or the arrow keys. At the first
and last image the control that would lead nowhere is
aria-disabled — it keeps its place, its name and its
tab stop. The caption under each thumbnail is the same text the
viewer shows.
-
Cliff edge above the fjord -
Road through the green hills -
Waterfall in the mist -
Granite walls over the river -
Sea stacks in the surf -
Coast road at golden hour
Opened from a separate control
data-lightbox-open: these three
controls are not images and are not even inside the gallery — they
open the one above, which carries
id="lightbox-gallery". The third one adds
data-lightbox-index="3" and starts at the waterfall;
the index is counted from 1, the way the counter in the viewer
counts. An opener inside its own gallery can leave the value empty
and needs no id at all.
Single image
The module on the link itself: that one link is the whole set, so the viewer opens without navigation controls and without a counter — only the picture, its caption and the way out.
A figure in the middle of an article is the other half of this component: nothing about it is a gallery, it just wants to be readable at full size.
Looping, and in another language
data-lightbox-loop: stepping past an
end wraps around, so neither control is ever disabled. The
captions come from data-lightbox-caption on the links
instead of from the tiles — and every string of the generated
chrome is set in German here, including the counter and the
announcement template. The gallery carries lang="de",
which the module mirrors onto the injected viewer: it lives on
<body>, so it would otherwise be pronounced as
English.