Angular Image Zoom

Image amplifier component for angular2+. See a demo here!

Properties

• image: Image tag reference.
• disabled: Whether disable component or not.
• zoom: Zoom level.
• ratio: Zoom glass size in pixels for zoom glass shape.
  • Ratio size for circle shape.
  • Base size for square shape.
• cursor: CSS cursor type.
• cursorgap: Gap in pixels between cursor and zoom glass. Only for corner type.
• type: Type of zoom glass cursor:
  • corner: Image-border limited zoom glass with corner-positioned cursor.
  • center: Zoom glass with corner-positioned cursor.
  • center-adjust: Image-border limited zoom glass with center-positioned cursor.
• shape: Shape of zoom glass:
  • square: Square shape.
  • circle: Circle shape.
• mouseout: Default onmouseout behaviour.
  • visible: Visible zoom glass.
  • hidden: Hidden zoom glass.
• load: EventEmitter<any> Event fired after image is loaded and setup done.
• error: EventEmitter<any> Event fired on image loading error.

Usage

component.html

    <app-image-zoom #preview
        [image]="image"
        [disabled]="false"
        [zoom]="2"
        [ratio]="100"
        [cursor]="'pointer'"
        [cursorgap]="5"
        [type]="'center'"
        [shape]="'circle'"
        [mouseout]="'visible'"

        (load)="zoomLoaded($event)"
        (error)="zoomError($event)">
    >
        <img #image style="max-width: 100%"
        src="https://raw.githubusercontent.com/apercova/angular-image-zoom/master/src/favicon.ico">
    </app-image-zoom>

component.ts

  ...
  
  zoomLoaded(target): void {
    console.log(target);
  }

  zoomError(error): void {
    console.error(error);
  }
  
  ...

Icons taken from freeiconshop.com

---

This project was generated with Angular CLI version 6.1.1.

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.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

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