Image Zoomer For Moible – pinchzoom

Preview:

Description:

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

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);

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'
});

Changelog:

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