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