---
name: image-viewer
category: media
summary: "Zoomable, pannable image with zoom controls"
subpath: "@42/core/image-viewer"
---

Zoomable image with pan, expand/collapse, zoom controls.

```html
<div data-c42-image-viewer>
  <img data-c42-viewer-image src="photo.jpg" />
  <button data-c42-viewer-zoom-in>+</button>
  <button data-c42-viewer-zoom-out>−</button>
  <button data-c42-viewer-expand>⛶</button>
</div>
```

```ts
import { ImageViewer } from '@42/core/image-viewer';
new ImageViewer(root, { minZoom: 0, maxZoom: 7, expanded: false });
```

Options: `minZoom`, `maxZoom`, `expanded`
Events: `image-viewer:zoom` → `{ zoom, scale, expanded }`