Pure JavaScript Image Zoom Library – Zoomer.js

Preview:

Description:

Zoomer.js is a dependence-free JavaScript library which provides zoom in and zoom out functionalities on images.

Basic usage:

Just include the zoomer.js library on the html page and we’re ready to go.

<script src="zoomer.js"></script>

Create a DIV container for the zoomer.

<div id="zoomerElement">
  Loading images...
</div>

Create a new Zoomer object with options.

var myZoomer = new Zoomer({
    selector: '#zoomerElement',
    width: 960,
    height: 540,
    stepsPerLevel: 20,
    step: 0,
    opacityTransitionDuration: 200,
    images: [{
        src: '1.png',
        level: 0,
      }, {
        src: '2.png',
        level: 2,
      }, {
        src: '3.png',
        level: 4,
      }]
});

API methods.

// set the zoom level
// arguments: 'step' and 'stepsPerLevel'
myZoomer.setZoom(arg)
// animate zoom
// arguments: 'step', 'toStep', 'animationPromiseResolve', 'animationDirection' and 'stepsPerLevel'
myZoomer.animateZoom(arg)