ngx-instagram-zoom

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

Usage no npm install needed!

<script type="module">
  import ngxInstagramZoom from 'https://cdn.skypack.dev/ngx-instagram-zoom';
</script>

README

ngx-instagram-zoom

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

NPM JavaScript Style Guide

Install

npm install --save ngx-instagram-zoom

Demo

  • Open this CodeSandbox example in mobile to try it:

https://codesandbox.io/s/ngx-instagram-zoom-hgnlh

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.