nuxt-x-marketing
ModalImage
Full-screen image lightbox with gallery navigation, captions, counter, and thumbnail strip.
ModalImage
A full-screen image lightbox (rendered via Teleport to body). Navigate a gallery with arrow buttons or keyboard. Shows an image counter and optional thumbnail navigation strip.
Components
<XMarkModalImage />
A full-screen image lightbox (rendered via Teleport to body). Navigate a gallery with arrow buttons or keyboard. Shows an image counter and optional thumbnail navigation strip.
<template>
<button @click="lightboxOpen = true">
<img src="/gallery/photo-1.jpg" class="cursor-zoom-in" />
</button>
<XMarkModalImage
v-model="lightboxOpen"
:images="[
{ src: '/gallery/photo-1.jpg', alt: 'Interior view', caption: 'Open-plan living area' },
{ src: '/gallery/photo-2.jpg', alt: 'Kitchen', caption: 'Modern kitchen' },
{ src: '/gallery/photo-3.jpg', alt: 'Bedroom' },
]"
:start-index="0"
:has-counter="true"
:has-thumbnails="true"
/>
</template>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | Boolean | false | Lightbox open state (v-model) |
images | Array | [] | Image list [{ src, alt, caption? }] |
startIndex | Number | 0 | Index of the first image to show |
hasCounter | Boolean | true | Show "1 / N" counter |
hasThumbnails | Boolean | false | Show thumbnail strip at bottom |
AI Context
category: Modal
package: "@xenterprises/nuxt-x-marketing"
components:
- XMarkModalImage
use-when: >
Opening a full-screen image lightbox with gallery navigation. Supports
keyboard navigation, captions, a counter, and an optional thumbnail strip.
typical-page-section: Triggered from gallery sections, product images, or media-rich content areas.