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.

<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

The overlay also closes on the close button, a click outside the image, or the Escape key.

app.lightbox.open("/static/img/diagram.png", { alt: "Architecture" });