Components / Lightbox
Lightbox
Fullscreen image viewer with prev/next navigation, keyboard control, focus trap, and scroll lock. Pairs with cg-image-gallery. Set the `images` property in JS.
overlaysv0.8.0
Playground
Examples
Open a gallery
<cg-button variant="primary" onclick="this.nextElementSibling.open=true">Open lightbox</cg-button><cg-lightbox></cg-lightbox>Import
import { CgLightbox } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-lightbox';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Controls visibility |
index | number | 0 | Current image index |
closable | boolean | true | Show close button + allow Escape/backdrop close |
Events
| Event | Detail | Description |
|---|---|---|
cg-lightbox-open | void | Opened |
cg-lightbox-close | void | Closed |
cg-lightbox-change | {index: number} | Navigated to another image |