medium-zoom

medium-zoom

Lightweight image zoom for the web. Zero dependencies, any framework, React via shadcn.

JavaScript

Install the package:

npm install medium-zoom

Add an image to your page:

<img src="/photo.jpg" alt="A mountain at sunrise" data-zoomable />

After the image is in the document, initialize the zoom:

import mediumZoom from 'medium-zoom'

mediumZoom('[data-zoomable]')

The standard import includes styles and TypeScript definitions. Click the image to zoom. Click again, press esc, or scroll to close it.

The JavaScript quickstart covers script tags, separate stylesheets, and browser support. See the API reference for selectors, options, methods, and events.

React

In a project configured for shadcn/ui, install the component:

npx shadcn@latest add https://medium-zoom.francoischalifour.com/r/image-zoom.json

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

export function Photo() {
  return <ImageZoom src="/photo.jpg" alt="A mountain at sunrise" />
}

The command copies the component and stylesheet into your project and installs medium-zoom. The component provides a keyboard-accessible button and manages zoom state and cleanup.

Follow the React quickstart or use the component reference to customize it.

Guides and examples

The documentation covers HD images, galleries, styling, and the JavaScript and React APIs.

Runnable examples include plain JavaScript, React, Angular, Vue, Svelte, Astro, and VitePress. The React example demonstrates using the library directly; shadcn/ui demonstrates the installable component.

Contributing

See Contributing for setup, development commands, verification, and releases. To work on the website, see its development guide.

License

MIT © François Chalifour