Prototype.js conflict

[dandovnar]

Hello! I've tried to use Fancybox with Prototype.js and Fancybox.bind() is not working. Is it possible to use both of scripts together?

Here's an example: https://jsfiddle.net/phwos6y9/1/

Thanks!

[fancyapps]

Hi,

The problem is that Prototype messes with the event object and Fancybox does not receive event.target, it is empty!

It is hard to debug, but you could try to observe that by yourself with this snippet:

document.body.addEventListener(
    "click",
    function (event) {
      console.log(event.target);
    },
    false
);

If I then click on the links, the output is empty for the fraction of second, but then it magically changes to actual value. I suspect that Prototype receives event by reference, removes target, does some stuff and then places back. But Fancybox click handler executes before it is placed back and therefore it can not figure out what to do and does not start.

I could not figure out a simple workaround for this issue, Prototype.js is not updated since 2015, therefore you will have to do things differently - use Prototype.js to create click event (on links or any other element), then start Fancybox manually using Fancybox.show() method.

[heliomedia-de]

Hi!

@dandovnar
Have you implemented a workaround in the meantime? I'm currently facing the same problem and don't want to get rid of prototype completely as it has a lot of dependencies.

[dandovnar]

Hi! I'm using Fancybox.show() method as Jānis suggested. If you need help, I can create an example for you.