Image Zoom & Pan With Mouse Interactions – ZoomNPan

ZoomNPan is a tiny JavaScript library that allows to zoom in/out and pan an image using mouse wheel and cursor move.

How to use it:

Create a zoom/pan area on the webpage.

<div id="demo">
</div>

Add a background image to the container.

#demo {
  width: 460px;
  height: 250px;
  background-image: url(https://unsplash.it/3000/2000/?random);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

Download and put the JavaScript file ‘zoomnpan.js’ at the bottom of your html page.

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

Initialize the zoomnpan library and done.

var p;
function enable(){
  p = new ZoomNPan(demo);
  p.minScale = 75;
}
enable();

All default parameters.

/** minimum zoom allowed (in percent) */
minScale = 30;
/** maximun zoom allowed (in percent) */
maxScale = 300;
/** Snap to 100% if the zoom is in +- this amount (in percent) */
snap = 9;    
/** invert the direction on MacOS */
invertOnMac = false;