Author: | victornpb |
---|---|
Views Total: | 2,985 views |
Official Page: | Go to website |
Last Update: | June 2, 2017 |
License: | MIT |
Preview:

Description:
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;