Zooming Images Just Like Medium.com – ZOOOM.js

Preview:

Description:

Just another JavaScript image zoom plugin that zooms and displays images in an overlay covering the whole page. Inspired by Medium.com.

The zoomed image will auto dismiss when you scroll the webpage or swipe the screen.

How to use it:

Place the Stylesheet zooom.css and JavaScript zooom.js in the html page.

<link href="./zooom.css" rel="stylesheet">
<script src="./zooom.js"></script>

Initialize the ZOOOM.js with the following options.

• element: element to zoom
• padding: padding in pixels
• animationTime: duration in ms
• in / out: custom cursors
• color: overlay color
• opacity: Overlay layer opacity. 0-100.
• zIndex: z-index property

window.addEventListener('load', function () {
  new Zooom('img-zoom', {
    padding: 80,
    zIndex: 1,
    animationTime: 300,
    cursor: {
      in: 'zoom-in',
      out: 'zoom-out'
    },
    overlay: {
      color: '#fff',
      opacity: 100, 
    },
  });
})

Callback functions.

new Zooom('img-zoom', {
    onLoaded: function(element) {
      // do something
    }, 
    onCleared: function(element) {
      // do something
    },
});

Changelog:

v1.0.8 (09/08/2020)

• Update

v1.0.7 (09/07/2020)

• Fixed Lightbox animation not always appearing

v1.0.6 (09/05/2020)

• added debounce to resize window
• added two helpers functions onLoaded, onCleared
• changed fade(in/out) from js to css

08/25/2020

• v1.0.5: small improvements

06/26/2020

• v1.0.4: refactor

05/04/2020

• v1.0.3: added more options

04/26/2020

• v1.0.1

04/24/2020

• fixed fadeIn/fadeOut

04/23/2020

• refactor

04/18/2020

• refactor

04/04/2020

• update

11/15/2019

• delete log

11/12/2019

• allows to close the modal window by clicking on body

11/07/2019

• refactoring

10/29/2019

• Update options

06/07/2019

• checking if the object exists

06/06/2019

• removing necessary elements from object