Author: | manuelstofer |
---|---|
Views Total: | 2,230 views |
Official Page: | Go to website |
Last Update: | July 29, 2022 |
License: | MIT |
Preview:

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