Image Zoomer For Moible – pinchzoom

Category: Image , Javascript , Recommended , Zoom | May 10, 2019
Views Total:9,931 views
Official Page:Go to website
Last Update:May 10, 2019


Image Zoomer For Moible – pinchzoom


pinchZoom is a mobile-first image zoom library which allows the user to zoom, pan an image with touch gestures.

How to use it:

Install the pinchzoom with NPM.

$ npm install pinch-zoom-js --save

Import the pinchzoom library.

// ES 6
import PinchZoom from 'pinch-zoom-js';
<!-- OR -->
<script src="/dist/pinch-zoom.umd.js"></script>
<!-- OR From A CDN -->
<script src=""></script>

Enable the image zoom functionality on your image.

<div class="pinch-zoom" id="element">
  <img src="1.jpg">
let el = document.querySelector('#element');
let instance = new PinchZoom(el, options);

All possible options with default values.

let instance = new PinchZoom(el, {
    // zoom factor
    tapZoomFactor: 2,
    // zoom out factor
    zoomOutFactor: 1.3,
    // duration in ms
    animationDuration: 300,
    // min/max zoom level
    maxZoom: 4,
    minZoom: 0.5,
    // draggable unzoomed image
    draggableUnzoomed: true,
    // locks panning of the element to a single axis
    lockDragAxis: false,
    // compute offsets only once
    setOffsetsOnce: false,
    // falls back to 2D transforms when idle
    use2d: true,
    // vertical/horizontal padding
    verticalPadding: 0,
    horizontalPadding: 0

Available events.

let instance = new PinchZoom(el, {
    // default event names
    zoomStartEventName: 'pz_zoomstart',
    zoomUpdateEventName: 'pz_zoomupdate',
    zoomEndEventName: 'pz_zoomend',
    dragStartEventName: 'pz_dragstart',
    dragUpdateEventName: 'pz_dragupdate',
    dragEndEventName: 'pz_dragend',
    doubleTapEventName: 'pz_doubletap'


v2.3.2 (05/10/2019)

  • Updated minified version.

v2.3.2 (04/30/2019)

  • Fix undefined is not an object error
  • Add typescript typings
  • Minified version
  • Added callback options for any event

You Might Be Interested In:

2 thoughts on “Image Zoomer For Moible – pinchzoom

  1. Jaroslav Zelený

    There is pinch-zoom.umd.js missing in the downloaded package. There is only pinch-zoom.js and it is not working. The “How to use it:” is also useless, because the code inside the demo is totally different… Sorry, this looks great, but useless….


Leave a Reply