Documentation
On this page

Guides

Multiple images

Make several images zoomable without changing the page’s layout. Each image opens independently.

multiple-images.tsx
Press Enter or Space to zoom. Click, press Escape, or scroll to close.

JavaScript

Attach several images with one instance:

html
<div class="photo-gallery">
  <img src="/ocean.jpg" alt="Ocean sunset" data-zoomable />
  <img src="/mountain.jpg" alt="Denali at sunrise" data-zoomable />
  <img
    src="/yellowstone.jpg"
    alt="Yellowstone at sunrise"
    data-zoomable
  />
  <img src="/aurora.jpg" alt="Aurora over Yellowstone" data-zoomable />
</div>
js
import mediumZoom from 'medium-zoom'

const zoom = mediumZoom('.photo-gallery [data-zoomable]')

After adding images to the page, attach them to the instance:

js
zoom.attach('.photo-gallery [data-zoomable]')

An image is attached once, even when it matches the selector again. See attach() and detach() for image lifecycle handling.

React

Render one <ImageZoom> per image. With composition, use a separate <ImageZoom.Root> for each image.

tsx
import { ImageZoom } from '@/components/ui/image-zoom'

const photos = [
  {
    src: '/ocean.jpg',
    alt: 'Ocean sunset',
    width: 1_920,
    height: 1_280,
  },
  {
    src: '/mountain.jpg',
    alt: 'Denali at sunrise',
    width: 2_400,
    height: 1_594,
  },
]

export function MultipleImages() {
  return (
    <div className="photo-gallery">
      {photos.map(photo => (
        <ImageZoom key={photo.src} {...photo} />
      ))}
    </div>
  )
}

Set the grid layout in CSS. Close the current zoom before opening another image.