ngx-image-zoom
ngx-image-zoom copied to clipboard
Two Issues: 1) Zoom-in shows content from cache. 2) Zoom-out using mouse wheel got opposite
Have a list of books, click on one will toggle to details of a book including book cover.
- While lib-ngx-image loads dynamic img successfully, zoom-in always shows content of first book. For example, click on any book, say book A from the list into reviewing and zooming book cover, then from now on review any other books the magnifier content is always book A. Tried the timer fix on #36 didn't help. Guess because List-of-Books and Detail-of-Book are in the same component and are toggled using [hidden].
<!-- book detail section including book cover img -->
<div [hidden]="!Detail">
<lib-ngx-image-zoom [thumbImage]=myCover [magnification]="1"
[enableScrollZoom]="true"
[enableLens]="true"
[lensWidth]="200">
</lib-ngx-image-zoom>
</div>
<!-- list of book -->
<div [hidden]="Detail">
...
</div>
showBookDetailIncludingCover(book: any)
{
this.myCover = null; // try reset and clear, still the same.
this.myCover = book.imgSrc;
this.Detail = true; // setTimeout() didn't help.
...
}
Is it any way to reset the content of magnifier?
- Wheeling out (zoom-out) indeed got the max zoom-in, then zoom-out.
Thank you.
You should also provide fullImage
even its same as thumbImage
, so both thumbImage and magnifer updates on change.
<lib-ngx-image-zoom [thumbImage]=myCover [magnification]="1" [enableScrollZoom]="true" [fullImage]="myCover" // Add this [enableLens]="true" [lensWidth]="200"> </lib-ngx-image-zoom>
Correct, that's how I found out the fix. Thank you very much for the response.
On May 16, 2021 at 10:20 AM, Milan Stojevski @.***> wrote:
You should also provide fullImage even its same as thumbImage, so both thumbImage and magnifer updates. <lib-ngx-image-zoom [thumbImage]=myCover [magnification]="1" [enableScrollZoom]="true" [fullImage]="myCover" // Add this [enableLens]="true" [lensWidth]="200">
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.