Lightbox — Loidolt Theme

import { Lightbox } from '@loidolt/theme-svelte';

Example

Arrow keys, Home and End move between items; + and − zoom an image, 0 resets it. Pinch, Ctrl + wheel and double-click zoom too, and dragging pans a zoomed image.
Swipe to move on when the image is not zoomed. The next and previous images are loaded ahead of time.
Each move is announced once ("Canyon relief, cork, 2 of 6") through a live region; the visible counter is hidden from assistive tech so it is not read twice.
Videos, audio and embeds play in place with their own controls.

Generated from the component source, so it cannot drift from the implementation.

Lightbox props
Prop	Type	Default	Notes
`items` required	`MediaItem[]`	`—`
`class`	`string`	`—`	Lands on the dialog content.
`closeLabel`	`string`	`'Close viewer'`
`counterText`	`(position: number, count: number) => string`	(position, count) => `${position} of ${count}`
`downloadable`	`boolean`	`false`	Offer a download link for images that set `download`.
`downloadLabel`	`string`	`'Download'`
`index` bindable	`number`	`0`	The item showing, 0-based.
`loop`	`boolean`	`true`	Wrap from the last item to the first.
`nextLabel`	`string`	`'Next'`
`onIndexChange`	`(index: number) => void`	`—`
`onOpenChange`	`(open: boolean) => void`	`—`
`open` bindable	`boolean`	`false`
`previousLabel`	`string`	`'Previous'`
`ref` bindable	`HTMLElement \| null`	`null`
`showCaption`	`boolean`	`true`
`showCounter`	`boolean`	`true`
`showThumbnails`	`boolean`	`false`
`thumbnailsLabel`	`string`	`'All items'`
`title`	`string`	`'Media viewer'`	Accessible name of the dialog.
`trigger`	`Snippet`	`—`	Opens the lightbox. Leave it out to drive `open` yourself, as `MediaGrid` does.
`triggerChild`	`Snippet<[TriggerChildProps]>`	`—`
`triggerClass`	`string`	`'ldt-button'`
`zoomable`	`boolean`	`true`	Let images be zoomed and panned: pinch, Ctrl + wheel, double-click, or + and −.
`zoomInLabel`	`string`	`'Zoom in'`
`zoomOutLabel`	`string`	`'Zoom out'`