Image Zoomer For Moible – pinchzoom

Category: Image , Javascript , Recommended , Zoom | July 29, 2022
Author:manuelstofer
Views Total:2,230 views
Official Page:Go to website
Last Update:July 29, 2022
License:MIT

Preview:

Image Zoomer For Moible – pinchzoom

Description:

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

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….

    Reply

Leave a Reply