Browser library for multi-touch gestures to zoom and drag on any DOM element.
npm install pinch-zoom-jsPinchZoom is a Javascript library providing multi-touch gestures for zooming and dragging on any DOM element.
- Use the NPM package.
- Link directly to the minified script via UNPKG. Make sure you specify a version.
- Compile from source. 👾
``Javascript
let el = document.querySelector('#my-id');
let pz = new PinchZoom(el, options);
`
`Text
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)
draggableUnzoomed: Capture drag events even when the image isn't zoomed. (default true)
(using false allows other libs (e.g. swipe) to pick up drag events)true
lockDragAxis: Lock panning of the element to a single axis. (default false)
setOffsetsOnce: Compute offsets (image position inside container) only once. (default false)
(using maintains the offset on consecutive load and resize)
use2d: Fall back to 2D transforms when idle. (default true)
(a truthy value will still use 3D transforms during animation)
verticalPadding: Vertical padding to apply around the image. (default 0)
horizontalPadding: Horizontal padding to apply around the image. (default 0)
onZoomStart: Callback for zoomstart event (params: Pinchzoom object, Event event) (default null)
onZoomEnd: Callback for zoomend event (params: Pinchzoom object, Event event) (default null)
onZoomUpdate: Callback for zoomupdate event (params: Pinchzoom object, Event event) (default null)
onDragStart: Callback for dragstart event (params: Pinchzoom object, Event event) (default null)
onDragEnd: Callback for dragend event (params: Pinchzoom object, Event event) (default null)
onDragUpdate: Callback for dragupdate event (params: Pinchzoom object, Event event) (default null)
onDoubleTap: Callback for doubletap event (params: Pinchzoom object, Event event) (default null)
`
`Javascript
let pz = new PinchZoom(myElement);
pz.enable(); // Enables all gesture capturing (is enabled by default)
pz.disable(); // Disables all gesture capturing
pz.destroy(); // Unmounts the zooming container and global event listeners
`
`Javascript`
var myElement = document.getElementById("myElement");
var pz = new PinchZoom.default(myElement, {
draggableUnzoomed: false,
minZoom: 1,
onZoomStart: function(object, event){
// Do something on zoom start
// You can use any Pinchzoom method by calling object.method()
},
onZoomEnd: function(object, event){
// Do something on zoom end
}
})
Events are deprecated in favour of callbacks (see above).
Pinchzoom emits custom events you can listen to:
`Text
pz_zoomstart Started to zoom
pz_zoomend Stopped zooming
pz_zoomupdate Zoom factor updated
pz_dragstart Started to drag the element
pz_dragend Stopped to drag the element
pz_dragupdate Drag position updated
pz_doubletap Resetting the zoom with double-tap
`
_(if need be, the event names can be customized via options)_
1. Make a bump commit (update package.json, package-lock.json and src)
2. Create a new tag git tag -m "v2.2.0" v2.2.0
3. Release new NPM version ()git push origin v2.2.0`)
4. Push the code + the tag to Github (
4. Make a new Github release (https://github.com/manuelstofer/pinchzoom/releases)
- If you have issues with invisible images, make sure that the image isn't absolutely positioned.
In some cases that will cause trouble.
Licensed under the MIT License.
https://manuelstofer.github.com/pinchzoom/