ngx-pinch-zoom
Version:
Pinch zoom component for Angular2.
56 lines (35 loc) • 2.6 kB
Markdown
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](http://crystalui.org/components/pinch-zoom).
Install the npm package.
npm i ngx-pinch-zoom
Import module:
import { PinchZoomModule } from 'ngx-pinch-zoom';
@NgModule({
imports: [ PinchZoomModule ]
})
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>
| 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](http://crystalui.org/components/pinch-zoom).
We use Browserstack for cross-browser testing.
[](http://browserstack.com/)