ngx-pinch-zoom

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.

Live demos and source code samples can be found on home page.

GIF 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

name	type	default	description
placement	string	auto	Container height (in pixels or percentages).
transition-duration	number	200	Defines the speed of the animation of positioning and transforming.
auto-zoom-out	boolean	false	Automatic restoration of the original size of an image after its zooming in by two fingers.

Events

name	type	description
touchstart	{type: "touchstart"}	The touchstart event is fired when one or more touch points are placed on the touch surface.
touchend	{type: "touchend"}	The touchend event is fired when one or more touch points are removed from the touch surface.
swipe	{type: "swipe", moveX: number, moveY: number}	Swipe event is opened, when a user shifts a zoomed image in any direction by a finger.
pinch	{type: "pinch"}	Pinch event is opened, when a user zooms an image in or out by two fingers.

Perhaps you will be interested in the expanded properties, methods and events of the commercial version.

Sponsors

We use Browserstack for cross-browser testing.