How do I globally handle the ifclose fancybox event?

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 shown on this page of the document:

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

However, I want to write something common and global for all fancybox that runs every time for any of fancybox. How can I do it? In short, I don’t want to write onClose code on every fancybox and I don’t want it to depend on the class id (Eg .fancybox in this case). How can I do it? I tried to write:

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

but it doesn’t work, and from the documents it looks like it’s a function to open progamically.

Answer 1

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

 $(".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 much about your goal, but I mean that you can always pass a named function instead of an anonymous one, so you always run the same function.

The above example should be a way if you want to do different things depending on each fancybox.

In addition, you can attach an event to any object that you want. Just use the window for convenience.

Edit

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

Answer 2

Try using methods

beforeClose or afterClose

This code is working fine

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

Answer 3

From what I see, Fancybox does not provide an API for this. You can use the hack instead. The lightbox closes when:

• close button pressed (div with class 'fancybox-close')
• Black background clicked (div with fancybox-overlay class)
• escape button pressed (e.which = 27)

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

Answer 4

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 versions other than 1.3.4, double-check the fancybox element selector for the overlay and close button with a dragonfly, firefly, or other.