• Features
• Installation
• Usage
• API
  • Selectors
  • Options
  • Methods
  • Attributes
  • Events
• Framework integrations
• Examples
• Debugging
• Browser support
• Contributing
• License

Features

• 📱 Responsive — scale on mobile and desktop
• 🚀 Performant and lightweight — optimized to reach 60 fps
• ⚡️ High definition support — load the HD version of your image on zoom
• 🔎 Flexibility — apply the zoom to a selection of images
• 🖱 Mouse, keyboard and gesture friendly — click anywhere, press a key or scroll away to close the zoom
• 🎂 Event handling — trigger events when the zoom enters a new state
• 📦 Customization — set your own margin, background and scroll offset
• 🔧 Pluggable — add your own features to the zoom
• 💎 Custom templates — extend the default look to match the UI of your app
• 🔌 Framework agnostic — works with React, Vue, Angular, Svelte, Solid, etc.

Usage

Try it out in the browser

Import the library as a module:

import mediumZoom from 'medium-zoom-next'
import 'medium-zoom-next/dist/style.css'

Or import the library with a script tag:

<script src="node_modules/medium-zoom-next/dist/medium-zoom.min.cjs"></script>
<link href="node_modules/medium-zoom-next/dist/style.css" rel="stylesheet" />

Assuming you add the data-zoomable attribute to your images:

mediumZoom('[data-zoomable]')

API

mediumZoom(selector?: string | HTMLElement | HTMLElement[] | NodeList, options?: object): Zoom

Selectors

The selector allows attaching images to the zoom. It can be of the following types:

• CSS selectors
• HTMLElement
• NodeList
• Array

// CSS selector
mediumZoom('[data-zoomable]')

// HTMLElement
mediumZoom(document.querySelector('#cover'))

// NodeList
mediumZoom(document.querySelectorAll('[data-zoomable]'))

// Array
const images = [
  document.querySelector('#cover'),
  ...document.querySelectorAll('[data-zoomable]'),
]

mediumZoom(images)

Framework integrations

Medium Zoom is a JavaScript library that can be used with any framework. Here are some integrations that you can use to get started quickly:

• React
• React Markdown
• Vue
• Svelte

Examples

You can see examples here, or check out the storybook.

Browser support

| Edge | Chrome | Firefox | Safari | | --------------- | ------ | ------- | ------ | | 138 | 109 | 140 | 15.6 |

License

MIT © François Chalifour