wittlock/ngx-image-zoom

Zoom only when keyboard is pressed

Opened this issue · 5 comments

nicoesiea commented

Hello
I report a strange issue. My thumbnail is well-loaded, I do not have a bigger picture. But the lens appears only when I press a key in my keyboard... And the lens does not follow the mouse
Does someone have an explanation for this strange behavior?
Thx

wittlock commented

Could you post the template code where you use the library? And is there any errors in the console?

nicoesiea commented

There is no error in the console, here is the template I'm using:

<ngx-image-zoom
  thumbImage="https://wittlock.github.io/ngx-image-zoom/assets/thumb.jpg"
  fullImage="https://wittlock.github.io/ngx-image-zoom/assets/fullres.jpg"
  enableLens=true
  circularLens=true
  lensWidth=200
  lensHeight=200
  magnification=2
  maxZoomRatio=5
></ngx-image-zoom>
nicoesiea commented

And here is my issue: there is an existing key listener on the parent component:

@HostListener('document:keyup', ['$event'])
  onKeydownHandler(event: KeyboardEvent)

Having this code, the zoom by pressing a key is even not working :(
I'm wondering why the mouse event is not working :(
Is it possible there is other stuff on my code blocking the feature?

wittlock commented

I haven't experimented much with other event handlers around the same part, but the symptoms you describe make it sound plausible. Does it work if you remove the HostListener you have? Just as a way of isolating the cause? I do need to listen to various mouse events to be able to make the zooming happen, so if your HostListener is interfering maybe it's possible to make sure mouse events doesn't get consumed by it?

The ngx-image-zoom part seems to be set up correctly so I don't have much else to go on to guess what the issue is.

nicoesiea commented

than you for you answer
it comes from: changeDetection: ChangeDetectionStrategy.OnPush
back to DEFAULT value it is working fine !
But I'm wondering how to make it work with onPush ^^