# `PhiaUi.Components.Lightbox`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/media/lightbox.ex#L1)

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-motion` disables transitions

# `lightbox`

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 to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the container.
## Slots

* `inner_block` (required) - lightbox_item children.

# `lightbox_item`

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 to `nil`.
* `alt` (`:string`) - Image alt text. Defaults to `""`.
* `caption` (`:string`) - Caption shown in overlay. Defaults to `nil`.
* `type` (`:atom`) - Media type. Defaults to `:image`. Must be one of `:image`, or `:video`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the item element.

---

*Consult [api-reference.md](api-reference.md) for complete listing*