https://github.com/victornpb/zoomnpan
Use mouse wheel to zoom an image and move the mouse to pan around. Just using vanilla javascript in 50 lines.
https://github.com/victornpb/zoomnpan
javascript-library mouse mouse-wheel pan vanilla-javascript zoom-images zooming-panning-moving
Last synced: 4 months ago
JSON representation
Use mouse wheel to zoom an image and move the mouse to pan around. Just using vanilla javascript in 50 lines.
- Host: GitHub
- URL: https://github.com/victornpb/zoomnpan
- Owner: victornpb
- License: apache-2.0
- Created: 2017-05-07T08:23:48.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-08-09T19:07:29.000Z (about 8 years ago)
- Last Synced: 2025-03-28T14:11:15.537Z (7 months ago)
- Topics: javascript-library, mouse, mouse-wheel, pan, vanilla-javascript, zoom-images, zooming-panning-moving
- Language: JavaScript
- Size: 5.86 KB
- Stars: 4
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ZoomNPan
Use mouse wheel to zoom an image and move the mouse to pan around. Just using vanilla javascript in 50 lines.
Live example:
http://jsfiddle.net/Victornpb/1s3nm8h8/
Usage
----
Works on any div that have a background image
HTML
```
```
Javascript
```
var zp = new ZoomNPan(myDiv); //That's it!
```
# API
## Properties
- minimum zoom allowed (in percent)
`ZoomNPan.minScale = 30;`
- maximun zoom allowed (in percent)
`ZoomNPan.maxScale = 300;`
- Snap to 100% if the zoom is in +- this amount (in percent)
`ZoomNPan.snap = 9;`
- invert the direction on MacOS
`ZoomNPan.invertOnMac = false;`
## Methods
- theardown the events and remove styles, call this when you don't need it anymore.
`ZoomNPan.destroy()`
-----
## Suggestions / Questions
File a [issue](https://github.com/victornpb/ZoomNPan/issues) on this repository.