如何在Angular 9中使用ngx图像缩放在悬停时在图像旁边显示图像缩放弹出窗口

Question

图像缩放用于在鼠标悬停时缩放产品图像，但我希望当用户将鼠标悬停在该图像上时，显示缩放图像的div会弹出在图像旁边，就像我们在亚马逊上看到的那样。我无法理解如何使用ngx图像缩放来做到这一点。

app.html

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

应用

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

或者有没有其他插件或库可以让我轻松实现？

Answer 1

您是否按照此库的npm页面中的说明在模块中导入了NgxImageZoomModule？

Answer 2

尝试使用ng img放大器npm包。这是一个正在工作的演示。非常易于实现，并且完全可定制。

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