如何在 Angular 9 中使用 ngx-image-zoom 在 hover 上的图像旁边显示图像缩放弹出窗口？

Question

image-zoom for zooming a product image on mouse hover but i want that when user hover mouse on that image, a div that displays the zoomed image pops beside the image like we get on amazon. I am not able to understand how to do that using ngx-image-zoom.

app.html

  <h1>
    {{title}}
  </h1>
  <lib-ngx-image-zoom
      [thumbImage]=myThumbnail
      [fullImage]=myFullresImage
   ></lib-ngx-image-zoom>

app.ts

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

Or is there any other plugin or library i can use to implement this easily?

Answer 1

Have you imported NgxImageZoomModule in your module as instructed in the npm page of this library?

Answer 2

Try using ng-img-magnifier npm package . Here is a working DEMO . Very easy to implement and fully customizable.

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