CODEWITHSUNDEEP
angular
Sachin Chandra
Sachin Chandra

Reputation: 39

How to use Image Zooming features in Angular 5

I am developing a web application in Angular 5 and I want to use Image zooming features something like explained in the below link

https://www.w3schools.com/howto/howto_js_image_zoom.asp

The link explains very nicely some image zooming features but it uses java script defined in tag.

My query is how can I use such features in Angular 5 or Angular 6

Thanks Sachin

Upvotes: 0

Views: 21607

Answers (3)

Salahuddin Ahmed
Salahuddin Ahmed

Reputation: 5650

Use ngx-image-zoom library for image zooming, so install it like this:

$ npm install ngx-image-zoom --save

After installation is completed, decorate your Angular app template, component and module like this:

app.component.html:

<lib-ngx-image-zoom
    [thumbImage]=myThumbnail
    [fullImage]=myFullresImage>
</lib-ngx-image-zoom>

app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  myThumbnail="Thumb image path goes here";
  myFullresImage="Fullers image path goes here";
}

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppComponent } from './app.component';
 
// Import the library
import { NgxImageZoomModule } from 'ngx-image-zoom';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxImageZoomModule // <-- Add this line
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Upvotes: 0

Sheikh Muhammad Umar
Sheikh Muhammad Umar

Reputation: 56

Use this ng-img-magnifier npm package. Click DEMO to see the working example on this Angular Image Zoom Package. It is easy to implement and provide full customization.

<ng-img-magnifier [thumbImage]='img' [fullImage]='img2'
    [imgWidth]='imgWidth' [imgHeight]='imgheight'
    [top]='top' [right]='right'
    [lensWidth]='lensewidth' [lensHeight]='lensheight'
    [resultWidth]='resultWidth' [resultHeight]='resultheight'>
</ng-img-magnifier>

Upvotes: 0

Akj
Akj

Reputation: 7231

Try something like this:

DEMO

HTML:

<h1>Image Zoom</h1>

<p>Mouse over the image:</p>

<div class="img-zoom-container" (mouseenter)="imageZoom('myimage', 'myresult');">
    <img id="myimage" src="https://user-images.githubusercontent.com/263237/36633897-d3237f2e-19ad-11e8-960a-daaf5ca3088a.png"
     width="300" height="240">
    <div id="myresult" class="img-zoom-result"></div>
</div>

CSS:

* {box-sizing: border-box;}

.img-zoom-container {
  position: relative;
} 

.img-zoom-lens {
  position: absolute;
  border: 1px solid #d4d4d4;
  /*set the size of the lens:*/
  width: 40px;
  height: 40px;
}

.img-zoom-result {
  border: 1px solid #d4d4d4;
  /*set the size of the result div:*/
  width: 300px;
  height: 300px;
}

Upvotes: 8

Related Questions