Pinch zoom for Angular 2

The module provides opportunities for image zooming in, zooming out and positioning with use of gestures on a touch screen.

Basic usage

Pinch Zoom suits for image zooming in lightbox window. Try live demo.

Installation

Install the npm package.

npm i ngx-pinch-zoom

Import module:

import {PinchZoomModule} from 'ngx-pinch-zoom';

@NgModule({
    imports: [PinchZoomModule]
})

Usage

For use, put your image inside the <pinch-zoom> container. Please, pay attention to the parameters of your viewport metatag. If you use Pinch Zoom, it is required to limit zooming of a web-page, by entering the following parameters: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">.

<pinch-zoom>
    <img src="path_to_image" />
</pinch-zoom>

Properties

Try it
height: string = "auto"
Container height (in pixels or percentages).
Try it
transition-duration: number = 200
Defines the speed of the animation of positioning and transforming.
Try it
auto-zoom-out: boolean = false
Automatic restoration of the original size of an image after its zooming in by two fingers.
Try it
double-tap: boolean = true
Zooming in and zooming out of an image, depending on its current condition, with double tap.
Try it
zoom-button: boolean = true
Show the button for zooming in or zooming out of an image (available in desktop mode).
Try it
linear-horizontal-swipe: boolean = false
Switches on the support of horizontal swipe. It allows shifting an image horizontally, when it hasn’t been zoomed in.
Try it
linear-vertical-swipe: boolean = false
Switches on the support of vertical swipe. It allows shifting an image vertically, when it hasn’t been zoomed in.

Methods

Try it
setMoveX(value: number)
Shift an image in X-direction.
Try it
setMoveY(value: number)
Shift an image in Y-direction.
Try it
toggleZoom()
Image zooming in and out, depending on its current state.
Try it
alignImage()
Ranging the elements by pressing them to the edge of the parental element.

Events

Try it
touchstart: {type: "touchstart"}
The touchstart event is fired when one or more touch points are placed on the touch surface.
Try it
touchend: {type: "touchend"}
The touchend event is fired when one or more touch points are removed from the touch surface.
Try it
swipe: {type: "swipe", moveX: number, moveY: number}
Swipe event is opened, when a user shifts a zoomed image in any direction by a finger or a mouse cursor.
Try it
pinch: {type: "pinch"}
Pinch event is opened, when a user zooms an image in or out by two fingers.
Try it
double-tap: {type: "double-tap"}
Double-tap event is opened by a double touch, consisting of two quick taps.
Try it
zoom-in: {type: "zoom-in"}
Zoom-in event is opened, when an image is zoomed in by the button (zoom icon with "+") or by toggleZoom method.
Try it
zoom-out: {type: "zoom-out"}
Zoom-in event is opened, when an image is zoomed out by the button (zoom icon with "-") or by toggleZoom method.
Try it
horizontal-swipe: {type: "horizontal-swipe", moveX: number}
Horizontal swipe event is opened, when a user moves the finger horizontally.
Try it
vertical-swipe: {type: "vertical-swipe", moveY: number}
Vertical swipe event is opened, when a user moves the finger vertically.

Browser support

Chrome / Chrome for Android 50+ / Android 4.4+
FireFox
Opera
Safari / iOS Safari 10.1, 11.1 / iOS 9+
Internet Explorer