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
Renders a single-image carousel with previous/next controls and dot indicators.
Attributes
id(:string) - Defaults tonil.images(:list) (required)autoplay(:integer) - Advance every N milliseconds.0disables. Defaults to0.aspect(:string) - Defaults to"video". Must be one of"square","video","wide", or"auto".class(:string) - Defaults tonil.- Global attributes are accepted.
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 tonil.images(:list) (required) - Maps with:srcand:alt.:thumboverrides the grid image, and:captionis shown in the lightbox.columns(:integer) - Defaults to3. Must be one of1,2,3,4,5, or6.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 totrue.class(:string) - Defaults tonil.Global attributes are accepted.