PineUiPhoenix.Components.ImageGallery (Pine UI v0.2.1)

Copy Markdown View Source

An image grid with a lightbox.

A port of the Pines image gallery.

<.image_gallery images={[
  %{src: "/img/1.jpg", alt: "A tree"},
  %{src: "/img/2.jpg", alt: "A lake"}
]} />

Summary

Media

Renders a single-image carousel with previous/next controls and dot indicators.

Renders an image gallery.

Media

carousel(assigns)

Renders a single-image carousel with previous/next controls and dot indicators.

Attributes

  • id (:string) - Defaults to nil.
  • images (:list) (required)
  • autoplay (:integer) - Advance every N milliseconds. 0 disables. Defaults to 0.
  • aspect (:string) - Defaults to "video". Must be one of "square", "video", "wide", or "auto".
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

image_gallery(assigns)

Renders an image gallery.

Accessibility

Each thumbnail is a real <button>, so the lightbox is reachable by keyboard. Inside it, Left/Right arrows move between images and Escape closes. Every image needs a meaningful :alt — pass alt: "" deliberately for purely decorative images.

Attributes

  • id (:string) - Defaults to nil.

  • images (:list) (required) - Maps with :src and :alt. :thumb overrides the grid image, and :caption is shown in the lightbox.

  • columns (:integer) - Defaults to 3. Must be one of 1, 2, 3, 4, 5, or 6.

  • gap (:string) - Defaults to "gap-4".

  • aspect (:string) - Defaults to "square". Must be one of "square", "video", "wide", or "auto".

  • layout (:string) - Defaults to "grid". Must be one of "grid", or "masonry".

  • lightbox (:boolean) - Defaults to true.

  • class (:string) - Defaults to nil.

  • Global attributes are accepted.