# dp-lightbox A full-screen image viewer opened by clicking a thumbnail. `Application.js` creates a single instance, reachable as `app.lightbox`. Every image marked with the `data-lightbox` attribute opens in the same overlay, so thumbnails behave identically across the site. Source: `static/js/components/AppLightbox.js`. ## The `data-lightbox` contract Mark any thumbnail with `data-lightbox` to make it clickable. The viewer shows the value of `data-full` when present (a distinct full-resolution URL), otherwise the image's own source. The image `alt` is reused as the caption. ```html <img src="thumb.jpg" data-lightbox data-full="full.jpg" alt="A diagram"> ``` Images rendered from markdown content (`data-render`) are marked automatically, so embedded images are clickable with no extra markup. ## Methods | Method | Behaviour | |---|---| | `open(src, { alt })` | Open the overlay showing `src`, with optional caption `alt`. | | `close()` | Close the overlay. | The overlay also closes on the close button, a click outside the image, or the `Escape` key. ```javascript app.lightbox.open("/static/img/diagram.png", { alt: "Architecture" }); ```