PinchZoom 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. 👾
- No dependencies, built with vanilla JS.
- A modern browser (ECMA 5 support, http://caniuse.com/use-strict).
let el = document.querySelector('#my-id');
let pz = new PinchZoom(el, 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)
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)
lockDragAxis: Lock panning of the element to a single axis. (default false)
setOffsetsOnce: Compute offsets (image position inside container) only once. (default false)
(using `true` 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)
useMouseWheel: Use mouse wheel zoom and mouse drag. (default false)
useDoubleTap: Use double tap zoom. (default true)
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)
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 listenersvar 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:
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)
- Make a bump commit (update package.json, package-lock.json and src)
- Create a new tag
git tag -m "v2.2.0" v2.2.0 - Release new NPM version (
npm whoami; npm publish) - Push the code + the tag to Github (
git push origin v2.2.0) - 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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent