Skip to content

Use mouse wheel to zoom an image and move the mouse to pan around. Just using vanilla javascript in 50 lines.

License

Notifications You must be signed in to change notification settings

victornpb/ZoomNPan

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 

Repository files navigation

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

<div id="myDiv" style="background: url('cat.jpg')"></div>

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 on this repository.

About

Use mouse wheel to zoom an image and move the mouse to pan around. Just using vanilla javascript in 50 lines.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published