1.2.1 • Published 3 years ago
ng-img-magnifier v1.2.1
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-magnifierUsing 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