IvyPinch

Javascript library for images scaling and dragging with touch screen gestures; API support for complex actions available.

Live demo can be found on home page.

Installation

Install the npm package.

npm i ivypinch

When initializing, enter a container selector and a license key:

var myPinch = new IvyPinch({
    key: 'MY_KEY'
    element: '.pinch-zoom'
});

Usage

Put an image inside the container, its content will be scaled with a pinch zoom after the library is initialized.

<div class="pinch-zoom">
    <img src="...">
</div>

Initialize the library and pass the container selector as an argument.

var myPinch = new IvyPinch({
    element: '.pinch-zoom'
});

Pay attention to the parameters of the viewport metatag, it is recommended to limit scaling 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">.

It is recommended to set the maximum height and width of an image with the CSS properties:

max-width: 100%; 
max-height: 100%;

License

You can freely use IvyPinch in non-commercial projects (get a license key) or on the localhost domain. You can also use a trial version on any other domain. 20 function calls are available in the trial version after each page load. For commercial projects the following two license types are available: for one domain and for an unlimited number of domains.

Properties

name	type	default	description
transitionDuration	number	200	Animation speed of scaling and aligning, in milliseconds.
autoZoomOut	boolean	false	Automatic restoration of the original size of an image after its zooming in by two fingers.
doubleTap	boolean	true	Scaling with double tap.
doubleTapScale	boolean	false	Zoom in factor for double tap.
limitZoom	number	3	Limitation of a maximum zoom 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 to the original scale, depending on its current scale.
alignImage()	Press images to the edges of the parental element.

Events

name	description
touchstart	One or more touch points are placed on the touch surface.
touchend	One or more touch points are removed from the touch surface.
swipe	A user moves a zoomed image in any direction by a finger.
pinch	A user zooms an image in or out by two fingers.
double-tap	Double touch, consisting of two quick taps.