I'm stuck with a problem with Fancybox windows. I use fancybox to display the content of a hidden div on my page (".popup" fancybox below). In that content, there is a link to a new fancybox content called #exemple. When I click on the link in the first fancybox, it loads the second fancybox content (iframe - this works fine). But I'd like to e back to the first fancybox when the user hits the close button of the second fancybox.

I tried with "onClosed" event but it doesn't work ...

Is there a way to do that?

Thank you in advance for your help!

Here is the code I use :

$("#exemple").fancybox({
    'width'             : '100%',
    'height'            : '100%',
    'titleShow'         : true,
    'titlePosition'     : 'over',
    'titleFormat'       : formatTitle,
    'autoScale'         : false,
    'centerOnScroll'    : true,
    'type'              : 'iframe',
    'onClosed'          : function() {
            alert('test');
            $(".popup").trigger('click');
        } 
});

$(".popup").fancybox({
    'autoScale'         : false,
    'centerOnScroll'    : true
});

// and here is the HTML code to trigger the hidden div:
<a style="font-weight: bold;" href=#data class=popup>our data</a>

//and the HTML code of the link inside the hidden div that gets displayed in the fancybox:
<a id=exemple title="xxx" href=xxx.php?id=xxx>link</a>

I'm stuck with a problem with Fancybox windows. I use fancybox to display the content of a hidden div on my page (".popup" fancybox below). In that content, there is a link to a new fancybox content called #exemple. When I click on the link in the first fancybox, it loads the second fancybox content (iframe - this works fine). But I'd like to e back to the first fancybox when the user hits the close button of the second fancybox.

I tried with "onClosed" event but it doesn't work ...

Is there a way to do that?

Thank you in advance for your help!

Here is the code I use :

$("#exemple").fancybox({
    'width'             : '100%',
    'height'            : '100%',
    'titleShow'         : true,
    'titlePosition'     : 'over',
    'titleFormat'       : formatTitle,
    'autoScale'         : false,
    'centerOnScroll'    : true,
    'type'              : 'iframe',
    'onClosed'          : function() {
            alert('test');
            $(".popup").trigger('click');
        } 
});

$(".popup").fancybox({
    'autoScale'         : false,
    'centerOnScroll'    : true
});

// and here is the HTML code to trigger the hidden div:
<a style="font-weight: bold;" href=#data class=popup>our data</a>

//and the HTML code of the link inside the hidden div that gets displayed in the fancybox:
<a id=exemple title="xxx" href=xxx.php?id=xxx>link</a>

• javascript
• fancybox

• can you make a jsfiddle? – armonge Commented Oct 17, 2011 at 21:48

3 Answers 3

I was working with same thing and onClosed was not working. After lots of research I figured out that there is some kind of versioning problem and onClosed works in older versions of fancy box. The other approach, which worked for me, is as following using beforeClose instead of onClosed.

‘beforeClose’: function() { alert(‘test’) },

This might be helpful for some of the readers.

It would help if you had a jsFiddle to work from, but first try wrapping the onClosed function code in a setTimeout. A zero time should be sufficient:

'onClosed' : function() {
    setTimeout(function(){
        $(".popup").trigger('click');
    }, 0);
} 

'onClosed'=> 'js:function() { alert("test") }',

note : we need to put "js:"

i m calling fancybox automatically (using extension)

It is Working fine for me