CODEWITHSUNDEEP
angular
Anikesh
Anikesh

Reputation: 13

Angular image zoom hover effect

i am a fresher in angular. can you tell me which zoom hover effect will work in ecommerce product image?

Also I have tried ngx-img-zoom npm but not working.

//test.component.html
  <ngx-img-zoom
  [zoomImageSrc]="zoomImageSrc"
  [previewImageSrc]="previewImageSrc" 
  [imgStyle]="'width:515px; height:515px; bottom:0;  left:0;  right:0;  top:0;  margin:0 auto; border:1px solid #dcdcdc;'" 
  [resultStyle]="`width:824px; height:824px; background-repeat: no-repeat; z-index: 2; position:absolute;
                 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
                  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); top: 0;left: 100%;`"
  [lensStyle]="'width:155px; height:155px"
  [enableZoom] = "enableZoom"
  [containerStyle]=""
></ngx-img-zoom>

//test.component.ts
  constructor(private ngxImgZoom: NgxImgZoomService) {
    this.ngxImgZoom.setZoomBreakPoints([{w: 100, h: 100}, {w: 150, h: 150}, {w: 200, h: 200}, {w: 250, h: 250}, {w: 300, h: 300}]);

Upvotes: 0

Views: 18257

Answers (2)

Sheikh Muhammad Umar
Sheikh Muhammad Umar

Reputation: 56

There is no properly working npm package for Angular image zoom except ng-img-magnifier. Here is the working DEMO.

Install:

npm i ng-img-magnifier

Implementation:

<ng-img-magnifier
[thumbImage]='img' [fullImage]='img2'>
</ng-img-magnifier>

For lens, thumbnail, and zoom customisation try:

<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>

This image zoom similar to Amazon or W3school will work for you.

I hope this will resolve your issue.

Upvotes: 0

Chanaka Weerasinghe
Chanaka Weerasinghe

Reputation: 5742

You can active using

https://www.npmjs.com/package/ngx-image-zoom

    npm i ngx-image-zoom

Here is working Example

Import it to your `App Module`

    import { NgxImageZoomModule } from 'ngx-image-zoom';
    
    @NgModule({
      imports:      [ BrowserModule, FormsModule, NgxImageZoomModule ],
      declarations: [ AppComponent, HelloComponent ],
      bootstrap:    [ AppComponent ]
    })
    export class AppModule { }

then

    <lib-ngx-image-zoom
        [thumbImage]=myThumbnail
        [fullImage]=myFullresImage
        [magnification]="1"
        [enableScrollZoom]="true"
        [enableLens]="true"
        [lensWidth]="200"
    ></lib-ngx-image-zoom>

declare image in your .ts file

myThumbnail="https://wittlock.github.io/ngx-image-zoom/assets/thumb.jpg";
  myFullresImage="https://wittlock.github.io/ngx-image-zoom/assets/fullres.jpg";

Upvotes: 4

Related Questions