Side-by-Side-use with the old fancybox?

[iJungleboy]

We have a lot of websites that use the existing fancybox for certain things, and we would like to introduce the new one as well.

This may result in scenarios where the old and new are running on the same page.

Is there a safe way to ensure that they don't conflict or don't both try to operate on the same images?

Or could the new fancybox just ensure that it doesn't operate on tags which were already processed by the previous one (and vica-versa)?

[fancyapps]

Hi,

That is interesting question. Honestly, I have not tested both version side by side. Fancybox prior 4 was jQuery based, v4 is written plain JS, but they all use event delegation and also check if event has defaultPrevented. Therefore I think they should both work fine, but the result will depend on what order scripts are loaded. I will check it when I have free time.

[iJungleboy]

Ok. I think we'll use another attribute to mark the new uses, and manually init Fancybox instead of using the auto-bind.

Does that sound like a good idea?

[fancyapps]

Sure, you could do like this:

1. Unbind default click handler:

Fancybox.unbind('[data-fancybox]');

2. Bind another selector

Fancybox.bind('[data-new-fancybox]', {});

As alternative would be to create custom click event listener on body element where you would check if Fancybox has started (using event.defaultPrevented) and then start Fancybox manually (using Fancybox.show()).

[fancyapps]

Hi,

I just wanted to note that v5 is a recent release and it doesn't auto-bind and you can also pass a container to attach the click event to.