bind a jquery function to fancybox .close() event

Question

I would like to trigger a simple jQuery function based on a fancybox closing. it is the only fancybox on the page

$.fn.fancybox.close = function() {
    $('#sub_cont').hide(250, function() {
    $('#IDsearchform input').val('');
    });
 });

ofcourse the above doesn't work

how about when you initialize the fancybox using the onClosed option? — Matt, Apr 22 '11 at 01:53

Chandu · Accepted Answer · 2013-10-08T00:55:49.460

49

*Update: * Please take a note of @mathoiland's answer, "It looks like Fancybox 2 deprecated the onClosed callback. It now uses afterClose." if you are using FancyBox 2.x

Pass the onClosed option to the fancybox function.

i.e:

$("<YOUR-SELECTOR>").fancybox({
  onClosed: function() {
    $('#sub_cont').hide(250, function() {
    $('#IDsearchform input').val('');
    });
  })
});

edited Oct 08 '13 at 00:55

answered Apr 22 '11 at 01:50

Chandu

74,913
16
123
127

1

thanks it's works fine for me :-) but you need to add single quotes like this 'onClosed' – Peeyush Aug 02 '11 at 05:01
8

`onClosed` depreciated please use `afterClose` – Ajmal Salim Jun 04 '13 at 18:00
@Ajmal Did you care you read the post, where I mentioned that the solution I proposed (which was valid at the time I answered the question), is now deprecated and to check matthoiland's answer? Am not sure why you still thought that the answer shd be downvoted..not that I care... – Chandu Jun 05 '13 at 03:49

score 34 · Answer 2 · answered Nov 27 '11 at 05:38

34

Just a note. It looks like Fancybox 2 depreciated the onClosed callback. It now uses afterClose.

See the new documentation under 'Callbacks'. http://fancyapps.com/fancybox/

answered Nov 27 '11 at 05:38

matthoiland

912
11
24

score 18 · Answer 3 · answered Aug 27 '12 at 17:36

In latest version of fancybox you might need to use 'afterClose' in place of 'onClosed'

so this code..

$("<YOUR-SELECTOR>").fancybox({
  onClosed: function() {
    $('#sub_cont').hide(250, function() {
    $('#IDsearchform input').val('');
    });
  })
});

should become ...

$("<YOUR-SELECTOR>").fancybox({
  afterClose: function() {
    $('#sub_cont').hide(250, function() {
    $('#IDsearchform input').val('');
    });
  })
});

score 7 · Answer 4 · answered Apr 22 '11 at 01:54

7

$("#myfancybox").fancybox({
    'onClosed'  : function() {
             $('#sub_cont').hide(250, function() {
                $('#IDsearchform input').val('');
             });
    }
});

answered Apr 22 '11 at 01:54

Matt

6,397
7
44
72

bind a jquery function to fancybox .close() event

4 Answers4