How do I globally handle onClose event of fancybox?

Question

I am using Fancybox in my application. Now to handle the close event we write something like:

$(".fancybox").fancybox({onClose:function(){alert('blah');}}

as seen on this doc page:

http://fancyapps.com/fancybox/#docs

However I want to write something common and global to all fancybox that gets run everytime for any of the fancybox. How do I do that? In short I don't want to write the code of onClose on each fancybox and don't want it to be dependent upon class,id (Eg. .fancybox in this case). How do I do that? I tried to write:

$.fancybox({onClose:function(){alert('blah');}}

but it doesn't work and from the docs it looks like this is the function for opening progammatically.

Answer 1

I'm not sure if this is the best solution but I would go for a pub/sub pattern so, in your fancybox you should do something like that.

$( ".fancybox" ).fancybox( {
    onClose: function () {
        $( window ).trigger( 'fancyboxClosed' );
    }
} );

Then, somewhere in your code:

$( window ).on( 'fancyboxClosed', function () {
    // Your global function for fancybox closed
} );

I don't know very much about your purpose but have in mind you can always pass a named function instead of an anonymous one so you always trigger the same function.

The above example should be the way to go if you want to make different things depending on each fancybox.

Also, you can attach the event to whatever object you want. Just used window for convenience.

Edit

You can also edit your fancybox source to do that (edit for 1.3.4) just add $(window).trigger('fancyboxClosed'); to around line 953.

Answer 2

Try to use methods

beforeClose or afterClose

This code work fine

$(".fancybox").fancybox({beforeClose:function(){alert('blah');}}

Answer 3

From what I see, Fancybox is not providing any API for that. You can instead use a hack. The lightbox is closed when:

1. close button is clicked (div with class 'fancybox-close')
2. black background is clicked (div with class 'fancybox-overlay')
3. escape button is pressed (e.which = 27)

So, you can add a click handler to body to check if event.target is .fancybox-close or .fancybox-overlay. Also add a keydown handler to document to listen if escape key is pressed.