ngx-image-zoom icon indicating copy to clipboard operation
ngx-image-zoom copied to clipboard

Two Issues: 1) Zoom-in shows content from cache. 2) Zoom-out using mouse wheel got opposite

Open TLKG opened this issue 3 years ago • 2 comments

Have a list of books, click on one will toggle to details of a book including book cover.

  1. 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?

  1. Wheeling out (zoom-out) indeed got the max zoom-in, then zoom-out.

Thank you.

TLKG avatar Mar 28 '21 04:03 TLKG

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>

mstojevski avatar May 16 '21 17:05 mstojevski

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.

TLKG avatar May 16 '21 22:05 TLKG