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

Category: Image , Javascript , Zoom | September 6, 2018
Author: francoischalifour
Views Total: 2,615
Official Page: Go to website
Last Update: September 6, 2018
License: MIT

Preview:

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

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.2 (09/06/2018)

  • update

v1.0.0 (08/29/2018)

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

v0.4.0 (07/31/2018)

  • Added more options, methods, and events.

Leave a Reply