---
name: gallery
category: media
summary: "Image lightbox with navigation and keyboard control"
subpath: "@42/core/gallery"
---

Image lightbox with navigation, loop, keyboard, scroll lock.

```html
<div data-c42-gallery>
  <img data-c42-gallery-thumb src="thumb1.jpg" data-full="full1.jpg" />
  <img data-c42-gallery-thumb src="thumb2.jpg" data-full="full2.jpg" />
  <div data-c42-gallery-lightbox>
    <img data-c42-gallery-image />
    <button data-c42-gallery-prev>‹</button>
    <button data-c42-gallery-next>›</button>
    <button data-c42-gallery-close>×</button>
  </div>
</div>
```

```ts
import { Gallery } from '@42/core/gallery';
new Gallery(root, { loop: true, closeOnEscape: true, lockScroll: true });
```

Options: `loop`, `closeOnEscape`, `lockScroll`
Events: `gallery:open`, `gallery:close`, `gallery:change` → `{ index, src }`