[ZOOOM.JS] How to Zoom Images like Medium with Pure Javascript

Medium Image Zoom is a simple plugin for image zooming without dependencies. Only pure javascript. Just one other JavaScript picture zoom plugin which zooms and shows photos in an overlay masking the entire web page – Inspired by Medium.com.

javascript image zoom library, zoom in image using jquery, javascript image zoom example, vanilla js image zoom, jekyll image zoom

How to make use of it:

Place the Stylesheet zooom.css and JavaScript zooom.js within the HTML web page.

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

Initialize the ZOOOM.js with the next choices.

  • factor: factor to zoom
  • padding: padding in pixels
  • animation time: a period in ms
  • cursor: customized cursors
  • overlay: customize the background overlay
window.addEventListener('load', function () {
  new Zooom({
    element: 'img',
    padding: 80,
    animationTime: 300,
    cursor: {
      cursorIn: 'zoom-in',
      cursorOut: 'zoom-out'
    },
    overlay: {
      color: '#fff',
      opacity: 80 // 0.8
    }
  });
})

Read More – [WYSIWYG] A Medium-style Inline Text Editor Component for Vue.js

Zooming Images Just Like Medium, Click Zoom Image Javascript, Medium Style Image Zoom Plugin


See Demo And Download

Official Website(tomik23): Click Here

This superior jQuery/javascript plugin is developed by tomik23. For extra Advanced Usage, please go to the official website.

Share