nuxt-x-affiliate
Gallery
Image gallery in grid / carousel / masonry layouts with optional fullscreen lightbox.
Gallery
The XAFGallery component renders a list of images in one of three layouts — grid (responsive column grid), carousel (horizontal scroll-snap), or masonry (CSS columns). Optionally enables a fullscreen lightbox on click.
Components
<XAFGallery />
<XAFGallery
layout="grid"
:columns="3"
:lightbox="true"
:images="[
{ src: '/img/1.jpg', alt: 'Front view', caption: 'Front view of the keyboard' },
{ src: '/img/2.jpg', alt: 'Side view', caption: 'Side profile' },
{ src: '/img/3.jpg', alt: 'Top-down', caption: 'Layout overview' },
]"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
images | GalleryImage[] | required | Each image: { src, alt, caption? }. |
layout | 'grid' | 'carousel' | 'masonry' | 'grid' | Visual layout. |
columns | 2 | 3 | 4 | 3 | Number of columns at the lg breakpoint (grid layout only). |
lightbox | boolean | false | Click-to-open fullscreen lightbox. |
When lightbox is on, the modal traps focus and closes on backdrop click or Esc key.
AI Context
component: XAFGallery
package: "@xenterprises/nuxt-x-affiliate"
use-when: Image gallery in grid / carousel / masonry layouts with optional fullscreen lightbox.