Image Zoomer For Moible – pinchzoom

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

How to use it:

1. Install the pinchzoom with NPM.

# NPM
$ npm install pinch-zoom-js --save

2. 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="https://unpkg.com/pinch-zoom-js"></script>

3. Enable the image zoom functionality on your image.

<div class="pinch-zoom" id="element">
  <img src="1.jpg">
</div>

let el = document.querySelector('#element');
let instance = new PinchZoom(el, options);

4. 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
});

5. Event handlers.

let instance = new PinchZoom(el, {
    onZoomStart: function( Pinchzoom object, Event event) {
      // ...
    }
    onZoomEnd: function( Pinchzoom object, Event event) {
      // ...
    }
    onZoomUpdate: function( Pinchzoom object, Event event) {
      // ...
    }
    onDragStart: function( Pinchzoom object, Event event) {
      // ...
    }
    onDragEnd: function( Pinchzoom object, Event event) {
      // ...
    }
    onDragUpdate: function( Pinchzoom object, Event event) {
      // ...
    }
    onDoubleTap: function( Pinchzoom object, Event event) {
      // ...
    }
});

6. API methods.

instance.enable();
instance.disable();
instance.destroy();

Changelog:

v2.3.5 (07/29/2022)

• Safari / Firefox race condition
• Declare IPinchZoomOptions so it can be referenced outside the const
• Added destroy method for the PinchZoom instance

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