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>

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'

});