Skip to content

Latest commit

 

History

History
91 lines (70 loc) · 3 KB

README.md

File metadata and controls

91 lines (70 loc) · 3 KB
Raw

Angular Image Zoom

https://apercova.github.io/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.