Home > Zoom > medium-zoom – Pure JavaScript Medium-style Image Zoom Library
medium-zoom – Pure JavaScript Medium-style Image Zoom Library

medium-zoom – Pure JavaScript Medium-style Image Zoom Library

medium-zoom is a lightweight and JavaScript library used for creating a responsive, user-friendly image zoom / lightbox effect.

Usage

1. Import the script

<script src="node_modules/medium-zoom/dist/medium-zoom.min.js"></script>

Or:

const mediumZoom = require('medium-zoom')

2. Run the plugin

mediumZoom(<selector>, <options>)

By default, the zoom is applied to all scaled images (with HTML or CSS properties). You can specify the zoomable images with a CSS selector and add options.

Additionally, you can pass an array-like or an array of images to the plugin.

// CSS selector
mediumZoom('#cover')

// array-like
mediumZoom(document.querySelectorAll('[data-action="zoom"]'))

// array
const imagesToZoom = [
  document.querySelector('#cover'),
  ...document.querySelectorAll('[data-action="zoom"]')
]

mediumZoom(imagesToZoom)
  Website Demo

About admin