Lightbox @astryx-svelte/core v0.3.0 · Lightbox
Usage
A fullscreen overlay for viewing images and videos at full resolution. Supports single-item and gallery modes with prev/next navigation, optional zoom and pan for images, and native video controls.ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Always provide alt text for every image for screen reader accessibility. |
| Do | Use gallery mode with onIndexChange for multi-image sets. |
| Do | Enable hasZoom only when viewing high-resolution images that benefit from close inspection. |
| Don't | Use the lightbox for non-image content; it is specialized for images. |
| Don't | Nest interactive content inside captions; keep them plain text. |
Examples
Common configurations, variations, and states.Lightbox — Gallery
A thumbnail grid that opens a fullscreen gallery. Clicking any thumbnail opens the lightbox at that index. Prev/next navigation lets users browse all images without closing.
Lightbox — Video
Opens a video in the lightbox. Native browser controls are available. Zoom and pan are disabled for video items.
Lightbox — Zoom
A lightbox with zoom and pan enabled. Double-click the image to zoom in; drag to pan around. Double-click again or use the close button to exit.