search

jackmoore / wheelzoom

A small script for zooming IMG elements with the mousewheel/trackpad.
http://www.jacklmoore.com/wheelzoom
MIT License
342 stars 95 forks source link

wheelzoom and fancybox #29

Closed raynbow2411 closed 7 years ago

raynbow2411 commented 7 years ago

wheelzoom and fancybox v3 seem to conflict with each other. When wheelzoom is added the first image wheel zooming works but when you go to the next slide it doesn't display.This doesn't happen when the wheelzoom is removed.

Any ideas why this is happening?

Regards.

jackmoore commented 7 years ago

Wheelzoom only works with an existing DOM element, and when you go to the next slide fancybox creates new DOM elements (I assume). Fancybox should have some sort of callback that fires each time content is displayed / generated. You should be able to assign Wheelzoom in that callback so that it is applied each time to an existing DOM element. Hope that makes sense.

raynbow2411 commented 7 years ago

Hi and yes it makes sense and I was able to use a callback and hook Wheelzoom  on each specific element. I still appreciate your prompt answer and appreciate the ease of use of your plugin.

Best Regards! Ray  On 2017-06-05 1:16:04 PM, Jack Moore notifications@github.com wrote: Wheelzoom only works with an existing DOM element, and when you go to the next slide fancybox creates new DOM elements (I assume). Fancybox should have some sort of callback that fires each time content is displayed / generated. You should be able to assign Wheelzoom in that callback so that it is applied each time to an existing DOM element. Hope that makes sense. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub [https://github.com/jackmoore/wheelzoom/issues/29#issuecomment-306247729], or mute the thread [https://github.com/notifications/unsubscribe-auth/AbzNnQhxpAEPeMqpOwPinTcOPi-Wt7TVks5sBDfUgaJpZM4NvRIn].

raynbow2411 commented 7 years ago

There is what seems to be a bug. When you grab an image that has Wheelzoom attached to it and you grab an image with your mouse and move it slightly up and then slightly down the image disappears. This doesn't happen when Wheelzoom is not attached to the slide (img).

You can test this in Codepen :  https://codepen.io/raynbow/pen/XgWeqv

Any ideas?

Best Regards, Ray

On 2017-06-05 1:16:04 PM, Jack Moore notifications@github.com wrote: Wheelzoom only works with an existing DOM element, and when you go to the next slide fancybox creates new DOM elements (I assume). Fancybox should have some sort of callback that fires each time content is displayed / generated. You should be able to assign Wheelzoom in that callback so that it is applied each time to an existing DOM element. Hope that makes sense. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub [https://github.com/jackmoore/wheelzoom/issues/29#issuecomment-306247729], or mute the thread [https://github.com/notifications/unsubscribe-auth/AbzNnQhxpAEPeMqpOwPinTcOPi-Wt7TVks5sBDfUgaJpZM4NvRIn].

jackmoore commented 7 years ago

I consider this to mostly be a facybox bug. It is firing the afterShow event each time you grab-drag-release. This is causing Wheelzoom to be applied multiple times, which confuses it because the first time around it replaces the img src with a transparent pixel.

Here is an updated pen that works around the issue: https://codepen.io/anon/pen/weBYpe

I should also fix Wheelzoom so that it can't be reapplied, but doing that means it has to track internally which elements have already had it applied, which can be problematic for garbage collection (minor issue).

raynbow2411 commented 7 years ago

That's great thanks for your quick reply. I agree that the afterShow event is being fired multiple times and therefore causing Wheelzoom to be applied multiple times. You should possibly modify your code on your end so that you won't have to deal with users having the same issue in the future.

Thank again! On 2017-06-05 7:05:00 PM, Jack Moore notifications@github.com wrote: I consider this to mostly be a facybox bug. It is firing the afterShow event each time you grab-drag-release. This is causing Wheelzoom to be applied multiple times, which confuses it because the first time around it replaces the img src with a transparent pixel. Here is an updated pen that works around the issue: https://codepen.io/anon/pen/weBYpe [https://codepen.io/anon/pen/weBYpe] I should also fix Wheelzoom so that it can't be reapplied, but doing that means it has to track internally which elements have already had it applied, which can be problematic for garbage collection (minor issue). — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub [https://github.com/jackmoore/wheelzoom/issues/29#issuecomment-306335071], or mute the thread [https://github.com/notifications/unsubscribe-auth/AbzNne173-4z8VM2W9tb2XzTBzhMCMvoks5sBImagaJpZM4NvRIn].