Ngx-instagram-zoom NPM

ngx-instagram-zoom

Angular component that implements Instagram-like zoom for mobile. No dependencies.

Install

npm install --save ngx-instagram-zoom

Demo

Open this CodeSandbox example in mobile to try it:

Usage

Import NgxInstagramZoomModule in your module file

import { NgxInstagramZoomModule } from 'ngx-instagram-zoom';

@NgModule({
  declarations: [AppComponent],
  imports: [
    ...
    NgxInstagramZoomModule,
    ...
  ],
  bootstrap: [AppComponent]
})

export class AppModule {}

Wrap anything you want to make zoomable with <Zoomable></Zoomable> tags.

<Zoomable>
    <img
      src="https://github.com/AlexSapoznikov/react-instagram-zoom/blob/master/example/public/cat.png?raw=true"
      alt="Cat"
    />
</Zoomable>

👉 It can zoom in any content (not only images) that css transform can be applied to.

Docs

Props	Type	Default	Description
releaseAnimationTimeout	number	500	Animation speed for restoring original size of the image when user lifts up fingers.
maxScale	number	Number.MAX_SAFE_INTEGER	Max zoom. For example value of 1 won't allow zooming in, value of 2 allows to zoom up to 100%.
zIndex	number	Number.MAX_SAFE_INTEGER	z-index that is applied when zooming in.
style	object	{}	Allows to add style to Zoomable component.
className	string	undefined	Allows to add className to Zoomable component

Events
onReleaseAnimationStart	TouchEvent	undefined	Event when release animation starts
onReleaseAnimationEnd	TouchEvent	undefined	Event when release animation ends
onTouchStart	TouchEvent	undefined	Event when touch starts
onTouchMove	TouchEvent	undefined	Event when touch is in process
onTouchEnd	TouchEvent	undefined	Event when touch ends