Unbind/Destroy fancybox 2 events

Question

I am having a strange issue, I have code that pulls content via ajax and then binds Fancybox (2) to certain elements. The issue is that when I "refresh" this page I call the same function that pulls and binds Fancybox again.

My normal approach that has been working up until I changed to Fancybox 2 is to unbind the elements and rebind them. This however does not seem to be working with FB2.

I have tried the following:

$('.tool_button').unbind('click.fb');
$('.tool_button').unbind('click');
$('.tool_button').unbind();
$('.tool_button').off('click.fb');
$('.tool_button').off('click');
$('.tool_button').off();

I did notice the following in the source file which may be of use (starting line 652):

// Unbind the keyboard / clicking actions
    unbindEvents: function () {
        if (F.wrap && isQuery(F.wrap)) {
            F.wrap.unbind('.fb');
        }

        D.unbind('.fb');
        W.unbind('.fb');
    }

If anyone could help here it would be much appreciated.

Thanks in advance. Nick

Answer 1

I know this is an old thread, but just wanted to confirm OAC Designs is absolutely right: Unbinding the .fancybox links only works if the live parameter is set to false.

However, you can also destroy Fancybox at the dom level, regardless of the live parameter, by doing:

$(document).unbind("click.fb-start");

Or

$(document).off("click.fb-start");

---

JSFiddle

Check out this JSFiddle for reference.

Answer 2

If you include the attribute live:false then you will be able to remove the handlers from your elements using .off()

After digging through the source code i've also found that the specific event is click.fb-start, if you want to target it specifically.

For example:

$(".fancybox").attr('rel', 'gallery').fancybox({live: false});
//remove click handler
$('.fancybox').off("click.fb-start");

​ FYI In the documentation it says the following about live:

live: If set to true, fancyBox uses "live" to assing click event. Set to "false", if you need to apply only to current collection, e.g., if using something like - $( "#page" ).children().filter('a').eq(0).fancybox();

jsFiddle

Here is a jsFiddle demonstrating

http://jsfiddle.net/DigitalBiscuits/DBvt7/211/

Answer 3

Thanks for the response, I have not tested the above, I used a different approach to resolve the issue.

What I did was instead of using the default Fancybox functionality I created functions for where I would need Fancybox and manually called Fancybox in each case which thus didn't bind the event.

This isn't the best approach and the above may be better but I will get to testing this in the new year :)

Thanks again.

Answer 4

You can use this code to destroy fancybox functionality on links:

jQuery('a').unbind('click.fb').removeData('fancybox');