Image Box

Click-to-zoom lightbox for images. Add data-image-box to any thumbnail <img> and the framework opens a focus-trapped overlay showing data-image-box-full-src with an optional caption. Escape or a backdrop click closes it.

Lightbox Gallery

Click (or focus + Enter) any thumbnail to open it.

<!-- The thumbnail <img> is the trigger -->
<img src="/images/thumb.jpg" alt="Sunset over the lake"
     class="vd-image-box-trigger vd-rounded-md vd-shadow"
     data-image-box
     data-image-box-full-src="/images/full.jpg"
     data-image-box-caption="Sunset over the lake"
     tabindex="0" role="button"
     aria-label="View full image" />

Engine wiring

import { ref } from 'vue';
import { useImageBox } from "@vanduo-oss/vd3";

const root = ref<HTMLElement | null>(null);
useImageBox(root);   // wires every [data-image-box] inside root

API Reference

Class / Attribute	Description
`.vd-image-box-trigger`	Class on the thumbnail <img>. Adds a zoom-in cursor and hover scale.
`data-image-box`	Marks the element as a lightbox trigger (required).
`data-image-box-full-src`	URL of the full-resolution image shown in the overlay.
`data-image-box-caption`	Caption text rendered beneath the full image.
`.vd-image-box-caption`	Generated caption element inside the overlay.

Accessibility

Triggers get role="button" + tabindex="0"; Enter / Space open the overlay.
The overlay traps focus and returns it to the thumbnail on close.
Always provide a meaningful alt on the underlying <img>.
A broken image URL falls back to a placeholder (.is-broken) instead of an empty box.