ngx-instagram-zoom

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

Same module is available for react here: react-instagram-zoom

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

License

MIT © https://github.com/AlexSapoznikov/ngx-instagram-zoom

---

---

---

Workspace

This project was generated with Angular CLI version 10.1.6.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.