Zooming Images Just Like Medium.com – ZOOOM.js

Category: Image , Javascript , Zoom | June 7, 2019
Author: tomik23
Views Total: 314
Official Page: Go to website
Last Update: June 7, 2019
License: MIT

Preview:

Zooming Images Just Like Medium.com – ZOOOM.js

Description:

Just another JavaScript image zoom plugin which 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.

  • zooomElement: element to zoom
  • zooomWrap: wrapping element
  • zooomImg: CSS class which will be attached to the image on zoom
  • zooomOverlay: overlay element
window.addEventListener('load', function () {
  new Zooom({
    zooomElement: 'img',
    zooomWrap: 'zooom-wrap',
    zooomImg: 'zooom-img',
    zooomOverlay: 'zooom-overlay'
  });
})

Override the default styles of the overlay.

#zooom-overlay {
  background:#fff;
}

Changelog:

06/07/2019

  • checking if the object exists

06/06/2019

  • removing necessary elements from object

You Might Be Interested In:


One thought on “Zooming Images Just Like Medium.com – ZOOOM.js

  1. Greg

    Like Medium.com but it works on older browsers including in it IE10+

    Reply

Leave a Reply