ng-img-magnifier

Project status

This project is in it's development phase, new features will be coming soon. Tested with different angular versions.

About

ng-img-magnifier was developed for the easy of implementing image zoom / magnifier on hover. It provide all the options for customization. Very simple to install and implementable in any angular project.

Available options

| Option | Default value | Description | Example | | :----------: | :-----------: | :--------------------------------------------------------: | :-----------------: | | thumbImage | none | (Required) - Smaller version of image to display. | [thumbImage]='img1' | | fullImage | none | (Required) - Original/HD version of image to zoom/magnify. | [fullImage]='img2' | | top | 2% | Magnified image margin from top. Value in percentage. | [top]='2' | | right | 1% | Magnified image margin from right. Value in percentage. | [right]='1' | | lensWidth | 150px | Lens width to move on image. Value in px. | [lensWidth]='150' | | lensHeight | 150px | Lens height to move on image. Value in px. | [lensHeight]='150' | | resultWidth | 35% | Width of the zoomed/magnified image. Value in percentage. | [resultWidth]='35' | | resultHeight | 60% | Height of the zoomed/magnified image. Value in percentage. | [resultHeight]='35' | | imgWidth | 300px | Width of the thumbImage. Value in px. | [imgWidth]='300' | | imgHeight | 300px | Height of the thumbImage. Value in px. | [imgHeight]='300' |

Screenshot

Installation

To install this library, run:

$ npm i ng-img-magnifier

Using this library

From your Angular AppModule:

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { ImgMagnifier } from "ng-img-magnifier";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ImgMagnifier],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

After importing the library, use ng-img-magnifier in your Angular application:

<!-- You can now use ng-img-magnifier in app.component.html -->
<h1>
  Image Zoom with ng-img-magnifier
</h1>
<ng-img-magnifier [thumbImage]='img' [fullImage]='img2'
    [top]='top' [right]='right'
    [lensWidth]='lensewidth' [lensHeight]='lensheight'
    [resultWidth]='resultWidth' [resultHeight]='resultheight'
    [imgWidth]='imgWidth' [imgHeight]='imgheight'>
</ng-img-magnifier>

License

MIT © Sh. M. Umar