Skip to content

A Javascript library providing multi-touch gestures for zooming and dragging on any DOM element.

License

Notifications You must be signed in to change notification settings

mootee/pinchzoom

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

46 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

PinchZoom.js

PinchZoom is a Javascript library providing multi-touch gestures for zooming and dragging on any DOM element.

Usage

Requirements

Initialisation

let el = document.querySelector('#my-id');
let pz = new PinchZoom(el, options);

Options


tapZoomFactor:      Zoom factor that a double tap zooms to. (default 2)
zoomOutFactor:      Resizes to original size when zoom factor is below this value. (default 1.3)
animationDuration:  Animation duration in milliseconds. (default 300)
maxZoom:            Maximum zoom factor. (default 4)
minZoom:            Minimum zoom factor. (default 0.5)
lockDragAxis:       Lock panning of the element to a single axis. (default false)

Events

Pinchzoom emits some custom events you can listen to:


pz_zoomstart  Started to zoom
pz_zoomend    Stopped zooming
pz_dragstart  Started to drag the element
pz_dragend    Stopped to drag the element
pz_doubletap  Resetting the zoom with double-tab

Methods

let pz = new PinchZoom(myElement);

pz.enable(); // Enables all gesture capturing (is enabled by default)
pz.disable(); // Disables all gesture capturing

Troubleshooting

  • If you have issues with invisible images, make sure that the image isn't absolutely positioned. In some cases that will cause trouble.

License

Licensed under the MIT License.

Github Page with demo

https://manuelstofer.github.com/pinchzoom/

About

A Javascript library providing multi-touch gestures for zooming and dragging on any DOM element.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 99.4%
  • Shell 0.6%