Image Zoom & Pan With Mouse Interactions – ZoomNPan

Category: Javascript , Zoom | June 2, 2017
Views Total:3,352 views
Official Page:Go to website
Last Update:June 2, 2017


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

Add a background image to the container.

#demo {
  width: 460px;
  height: 250px;
  background-image: url(;
  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;

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;

You Might Be Interested In:

Leave a Reply