Pure JavaScript Image Zoom Library – Zoomer.js

Category: Javascript , Zoom | May 10, 2016
Views Total:2,367 views
Official Page:Go to website
Last Update:May 10, 2016


Pure JavaScript Image Zoom Library – Zoomer.js


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...

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'
// animate zoom
// arguments: 'step', 'toStep', 'animationPromiseResolve', 'animationDirection' and 'stepsPerLevel'

You Might Be Interested In:

Leave a Reply