Zooming Images Just Like Medium.com – ZOOOM.js

Category: Image , Javascript , Zoom | November 15, 2019
Author: tomik23
Views Total: 399
Official Page: Go to website
Last Update: November 15, 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.

  • element: element to zoom
  • padding: padding in pixels
  • overlay: customize the background overlay
window.addEventListener('load', function () {
  new Zooom({
    element: 'img',
    padding: 80,
    overlay: {
      color: '#000',
      opacity: '.5'
    }
  });
})

Changelog:

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

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