Zooming Images Just Like Medium.com – ZOOOM.js

Category: Image , Javascript , Zoom | September 8, 2020
Author:tomik23
Views Total:845 views
Official Page:Go to website
Last Update:September 8, 2020
License:MIT

Preview:

Zooming Images Just Like Medium.com – ZOOOM.js

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

You Might Be Interested In:


3 thoughts 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
    1. Greg

      It already works, now it can be used anywhere, regardless of whether it is in an overflow element

      Reply

Leave a Reply