Lightbox
<esp-lightbox>
A full-screen lightbox for viewing high-res versions of
esp-image elements. Point the for attribute
at a CSS selector for the container that holds the images. Clicking
any image in that container opens the lightbox at that image.
On mobile, swipe left or right to navigate. The gallery wraps around — swiping past the last image goes back to the first.
A subtle caret at the bottom of the screen reveals a drawer
overlay containing the image caption and a comments slot.
Slots
<esp-lightbox> has a slot:
comments
A slot for comments UX, rendered inside a collapsible drawer.
Attributes
<esp-lightbox> has the following attributes:
for
for has a default value of "".
A CSS selector for the container element that holds the
esp-image elements to include in the lightbox.
comment-count
comment-count has a default value of 0.
The number of comments to display in the comment bar.
Methods
<esp-lightbox> has the following methods:
open
Open the lightbox at the given image index.
close
Close the lightbox.
Events
<esp-lightbox> emits the following events:
esp-lightbox-changed
esp-lightbox-changed is of type CustomEvent<{ index: number }>.
Fired when the displayed image changes — on open, navigation (prev/next buttons, keyboard arrows, swipe, dot click). The index in the detail is the zero-based position of the now-visible image in the source container.
CSS Properties
<esp-lightbox> has the following CSS properties:
--esp-lightbox-bg
The background color of the lightbox overlay (falls through to --esp-vellum-background, then --esp-color-layer-3).
--esp-lightbox-bg-opacity
The opacity of the overlay background (falls through to --esp-vellum-opacity, default: 0.85).
--esp-vellum-background-image
Optional repeating background image for the overlay (default: none).
--esp-vellum-background-image-opacity
Opacity of the background image layer (default: 0.3).