Lightbox Blueprint
Static open state lightbox with a centered image, prev and next controls, a caption strip, and a five thumbnail filmstrip.
Static open state lightbox with a centered image, prev and next controls, a caption strip, and a five thumbnail filmstrip.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
Lightbox Blueprint renders its open state as static markup over a bg-foreground/20 scrim: a centered bg-background card containing a top bar with the filename (brand-campaign.jpg), the position label 4 of 9 with the date Jun 12, 2026, and info, download, and close icon buttons. The main area floats the Placeholder image in a 3:2 aspect container between left and right chevron buttons. A caption strip below reads Hero shot for the brand refresh campaign followed by a metadata line: 2400 x 1600 px, JPEG, 2.4 MB, Uploaded by Avery Stone. At the bottom a five-thumbnail filmstrip uses a ring-2 highlight on the active thumb and +4 more to indicate the rest of the set.
The filmstrip is one array with an active flag steering the ring style. No Radix portal is used; the scrim and card are plain divs so the block renders correctly in every preview iframe.
Reach for this block as the full-screen viewer that opens when a user clicks an asset in the media grid, wiring the prev/next buttons to your gallery index and the filmstrip thumbnails to jump navigation.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the media gallery lightbox viewer. Other configurations:
Tip: always show position within the set (4 of 9) in the top bar; without it users cannot tell whether next will loop them back or end the gallery.