Module provides for image zooming and positioning with use of gestures on a touch screen.
Switch branches/tags
Nothing to show
Clone or download
Latest commit 362e896 Sep 22, 2018
Permalink
Failed to load latest commit information.
e2e v1.1.0 Jul 15, 2018
src Option names Sep 22, 2018
.editorconfig v0.3 Oct 22, 2017
.gitignore v1.1.0 Jul 15, 2018
LICENSE Create LICENSE May 15, 2018
README.md Merging Aug 8, 2018
angular.json Implement support for generic html element Aug 31, 2018
package.json Implement support for generic html element Aug 31, 2018
tsconfig.json v1.1.0 Jul 15, 2018
tslint.json v1.1.0 Jul 15, 2018
yarn.lock Implement support for generic html element Aug 31, 2018

README.md

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.

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
height 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.
double-tap boolean true Zooming in and zooming out of an image, depending on its current condition, with double tap.
zoom-button boolean true Show the button for zooming in or zooming out of an image (available in desktop mode).
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.
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

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

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.
double-tap {type: "double-tap"} Double-tap event is opened by a double touch, consisting of two quick taps.
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.
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.
horizontal-swipe {type: "horizontal-swipe", moveX: number} Horizontal swipe event is opened, when a user moves the finger horizontally.
vertical-swipe {type: "vertical-swipe", moveY: number} Vertical swipe event is opened, when a user moves the finger vertically.

Sponsors

We use Browserstack for cross-browser testing.

Browserstack