Author: | manuelstofer |
---|---|
Views Total: | 9,931 views |
Official Page: | Go to website |
Last Update: | May 10, 2019 |
License: | MIT |
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
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….
You can load the UMD version of the library from the CDN: https://unpkg.com/[email protected]/dist/pinch-zoom.umd.js.