Lightbox
pura-lightbox wraps images (img, optionally inside a or figure) in the light DOM and, when you click a thumbnail, opens a fullscreen modal with the enlarged image, prev/next arrows, a counter, and close via ESC or backdrop, inheriting focus trapping from the native dialog. Use it for photo galleries, portfolios, or any set of images that needs fullscreen zoom. It is agent-native: each instance registers in window.__puraLightboxes (keyed by data-pura-lightbox), exposing open/close/next/prev/seek/getIndex/getCount/getItems, and the host reflects data-count, data-index, and data-open, so an agent can read and control the state without touching the shadow DOM.
Preview
<pura-lightbox label="Trip photos" loop>
<img src="https://picsum.photos/id/1018/200/140" alt="Mountains at dawn" data-full="https://picsum.photos/id/1018/1200/800" />
<img src="https://picsum.photos/id/1015/200/140" alt="River between the rocks" data-full="https://picsum.photos/id/1015/1200/800" />
<img src="https://picsum.photos/id/1016/200/140" alt="Valley with fog" data-full="https://picsum.photos/id/1016/1200/800" />
</pura-lightbox>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
start | number | 0 | Index of the image opened when .open() is called with no argument. |
loop | boolean | false | Makes navigation wrap around: from the last to the first and vice versa. |
label | string | Image gallery | Accessible label for the gallery region and the modal (aria-label). |
open | boolean | false | Reflects and controls the open/closed state of the modal viewer. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/lightbox.js"></script>import "./pura/lib/lightbox.js";