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

Preview:

Description:

medium-zoom is a lightweight and dependency-free JavaScript library used for creating a responsive, user-friendly image zoom / lightbox effect as seen on Medium.com pages.

Basic usage:

Download and put the medium-zoom’s JS & CSS files in the html page.

<link href="src/medium-zoom.css" rel="stylesheet">
<script src="src/medium-zoom.js"></script>

Add the zoom effect to your images.

mediumZoom('.container img')

Apply the following options to the zoom effect.

mediumZoom('.container img',{
  // Space outside the zoomed image
  margin: 0,
  // Color of the overlay
  background: "#fff",
  // Number of pixels to scroll to dismiss the zoom
  scrollOffset: 48,
  // Enables the action on meta click (opens the link / image source)
  metaClick: true,
  // Custom template
  template: ''
   
})

API methods.

const myZoom = mediumZoom('.container img')
// show the zoom effect
myZoom.show()
// hide the zoom effect
myZoom.hide()
// toggle the zoom effect
myZoom.toggle()
// release the images related to the zoom from the plugin
myZoom.detach()
// update the options
myZoom.update({
  // options here
})
// register the specified listener on each target of the zoom
myZoom.addEventListeners('hidden', () => {
  // do something...
})

Events.

• show: Fired when the show instance method is called
• shown: Fired when the zoom has finished being animated
• hide: Fired when the hide instance method is called
• hidden: Fired when the zoom out has finished being animated
• detach: Fired when the detach instance method is called

Changelog:

v1.0.7 (11/15/2022)

• Ensure zooming out doesn’t happen
• Remove loading attribute on HD target

v1.0.6 (07/11/2020)

• refactor: remove `loading` attribute when zooming

v1.0.5 (12/14/2019)

• Give zoom transition higher priority

v1.0.4 (04/06/2019)

• Bring SSR compatibility by not using window outside of main function

v1.0.3 (01/20/2019)

• JS update

v1.0.2 (11/05/2018)

• fix: use document viewport size

v1.0.0 (08/29/2018)

• feat(api): Rename getZoomedTarget() to getZoomedImage()

v0.4.0 (07/31/2018)

• Added more options, methods, and events.