Welcome folks today in this blog post we will be using the ngx-image-zoom
library to zoom product
images on hover using typescript in browser. All the full source code of the application is shown below.
Get Started
In order to get started you need to make a new angular
project using the below command as shown below
ng new sampleproject
cd sampleproject
And after that you need to install the below libraries
using the below command as shown below
npm i ngx-image-zoom
And after that you will see the below directory
structure of the angular app as shown below
First of all you need to go to app.module.ts
file and copy paste the following code
app.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { NgxImageZoomModule } from 'ngx-image-zoom'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, NgxImageZoomModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule{} |
And now we need to go to app.component.html
file and copy paste the following code
app.component.html
1 2 3 4 5 6 7 8 9 10 |
<lib-ngx-image-zoom [thumbImage]=myThumbnail [fullImage]=myFullresImage [magnification]="1" [enableScrollZoom]="true" [enableLens]="true" [lensWidth]="500" [lensHeight]="500" [circularLens]="true" ></lib-ngx-image-zoom> |
As you can see in the above html
code we have the lib-ngx-image-zoom
directive in which we have the image
variable that we are having the zoom filter. And then we have the magnification
factor which is the numeric value. And then we have the lens
width and height which is set to 500
and then we have the option of circular
lens.
And now we need to go to app.component.ts
file and copy paste the below code
app.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 |
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { title = 'angular-img-hover'; myThumbnail = 'https://wittlock.github.io/ngx-image-zoom/assets/thumb.jpg'; myFullresImage = 'https://wittlock.github.io/ngx-image-zoom/assets/fullres.jpg'; } |
As you can see we are fetching the images
from the url and attaching to the thumbnail
url variable that we will be zooming in inside the html.