Git Product home page Git Product logo

ngx-instagram-zoom's Introduction

ngx-instagram-zoom

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

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

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.

ngx-instagram-zoom's People

Contributors

alexsapoznikov avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.