wittlock/ngx-image-zoom

Multiple <ngx-image-zoom> elements on one page

Closed this issue · 5 comments

kettenbach-it commented

If I put e.g. 5 elements (all with the same settings) on one page, the first and second work as expected.
Starting from the third, the component does not work anymore.
On the third, it seems that the coordinates of the crosshair are being miscalculated.
In 4 and 5 no crosshair is there.

The options are:

      zoomMode="hover-freeze"
      enableScrollZoom="True"
      enableLens="True"
      lensWidth="200"
      lensHeight="200"
      magnification="0.5"
kettenbach-it commented

Even with isInsideStaticContainer it doesn't work as expected.

  private zoomMode = 'hover';
  private enableScrollZoom = true;
  private enableLens = true;
  private lensWidth = 200;
  private lensHeight = 200;
  private magnification = 0.5;
  private scrollParentSelector = 'mat-card';
  private isInsideStaticContainer = true;
wittlock commented

Going to have to look into this one. I see you mentioned scrollParentSelector as well, did you merge that PR for yourself to test? Otherwise it's merged in 0.5.0

wittlock commented

I think I've identified this bug as simply happening when the page is scrolled down and not being at the top. scrollParentSelector may work for getting around it for now but I'm going to have to look into some new ways to do my calculations to get around this issue.

wittlock commented

Hi @kettenbach-it - I just released a beta version 0.6.0 to npm where I rewrote a big chunk of how I calculate the zooming position. This has resolved some issues I've seen with big pages and several ngx-image-zoom elements. Would you mind giving it a test and see if it resolves your issues as well?

kettenbach-it commented

I'm sorry, this is not possible for me