search

wittlock / ngx-image-zoom

Angular component for zoomable images
https://wittlock.github.io/ngx-image-zoom/
MIT License
134 stars 64 forks source link

Zoom only when keyboard is pressed #111

Open nicoesiea opened 1 year ago

nicoesiea commented 1 year ago

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 1 year ago

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

nicoesiea commented 1 year ago

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 1 year ago

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 1 year ago

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 1 year ago

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