Modal image/video gallery with keyboard navigation and touch swipe.
The lightbox renders a grid of clickable thumbnails. When an item is
clicked, the PhiaLightbox JS hook opens a full-screen overlay showing
the full-resolution media with prev/next navigation.
Examples
<.lightbox id="gallery">
<.lightbox_item src="/images/photo1.jpg" caption="Sunset" />
<.lightbox_item src="/images/photo2.jpg" caption="Mountains" />
<.lightbox_item src="/images/photo3.jpg" thumb_src="/images/photo3-thumb.jpg" />
</.lightbox>Video items
<.lightbox id="media">
<.lightbox_item src="/images/photo.jpg" />
<.lightbox_item src="/videos/clip.mp4" type={:video} caption="Demo video" />
</.lightbox>JS Hook: PhiaLightbox
The hook manages the overlay lifecycle:
- Click items to open at the correct index
- Escape key or click backdrop to close
- Arrow keys and swipe for prev/next navigation
- Body scroll lock while open
prefers-reduced-motiondisables transitions
Summary
Functions
Renders a lightbox gallery container with JS hook binding.
Renders a single lightbox gallery item trigger with thumbnail.
Functions
Renders a lightbox gallery container with JS hook binding.
Attributes
id(:string) (required) - Required ID for hook binding.class(:string) - Additional CSS classes on the grid. Defaults tonil.- Global attributes are accepted. HTML attributes forwarded to the container.
Slots
inner_block(required) - lightbox_item children.
Renders a single lightbox gallery item trigger with thumbnail.
Attributes
src(:string) (required) - Full-resolution media URL.thumb_src(:string) - Thumbnail URL (falls back to src). Defaults tonil.alt(:string) - Image alt text. Defaults to"".caption(:string) - Caption shown in overlay. Defaults tonil.type(:atom) - Media type. Defaults to:image. Must be one of:image, or:video.class(:string) - Additional CSS classes. Defaults tonil.- Global attributes are accepted. HTML attributes forwarded to the item element.