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:

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.

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.

• javascript
• jquery
• fancybox

• The weirdest thing about this question (and its accepted answer) is that onClose is not a valid (callback) option neither for fancybox v1.3.x or v2.x. You refer to fancyapps.com/fancybox/#docs but there is nothing about that onClose API option (onClosed is a valid option for fancybox v1.3.x though and it's documented at fancybox.net). – JFK Commented May 24, 2012 at 22:03
• @JFK: Thanks for pointing out. Neither did I realize it was a typo nor did Antonio realize. But that is not weird. It was my typo and the answer has typo because my question has typo. Typos are accepted. I accepted the answer due to concept that he provided and when I implemented the concept it seems to be working. Btw, what I really meant was beforeClose event. I hope that is there in API ;) – Tim Tom Commented May 25, 2012 at 1:58

4 Answers 4

Try to use methods

beforeClose or afterClose

This code work fine

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

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.

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.

Here is a decent solution for 1.3.4

$(document).delegate('#fancybox-close,#fancybox-overlay','click',function(){
    FancyBoxClosed(); 
});
$(document).keyup(function(e){
    if(e.keyCode == 27){
        if($('#fancybox-overlay').css('display') != 'none')
            FancyBoxClosed();
    }
});

function FancyBoxClosed()
{
    //global callback for fancybox closed
}

For a version other than 1.3.4 double check the fancybox element selectors for the overlay and close button using dragonfly, firefly, or other.