How do I globally handle onClose event of fancybox?

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.


Try to use methods

beforeClose or afterClose

This code work fine

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

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.