I understand you can do a callback with colorbox when you use the close button per :

onClosed:function(){ alert('onClosed: colorbox has pletely closed'); }

however I am closing colorbox from the iframe itself after a successful ajax request like :

if(json.status == 'success') {
parent.$j.fn.colorbox.close();
}

My question is how can I then have the parent window be notified that the colorbox has been closed and then run a callback from there? Is this possible?

I understand you can do a callback with colorbox when you use the close button per :

onClosed:function(){ alert('onClosed: colorbox has pletely closed'); }

however I am closing colorbox from the iframe itself after a successful ajax request like :

if(json.status == 'success') {
parent.$j.fn.colorbox.close();
}

My question is how can I then have the parent window be notified that the colorbox has been closed and then run a callback from there? Is this possible?

• javascript
• jquery
• colorbox

1 Answer 1

The onClosed event will be fired even when the colorbox is closed from within your iframe, and it will be fired in the context of the parent already. So you could just put your callback in the onClosed function:

$("a.pic").colorbox({
    onClosed: function() {
        myCallback;
        //do other stuff
    },
    //or if everything is in the callback:
    onClosed: myCallback,
    href:"myDog.jpg"
});

As far as notifications, if everything is in your callback, that's all you need. If you've got more going on and can't get everything into that callback, you could use jQuery's trigger to fire another "closed" event:

$.colorbox({
    onClosed: function() {
        $(window).trigger("colorboxClosed");
    },
    href:"myDog.jpg"
});

Then bind functions to that custom event:

$(window).bind("colorboxClosed", function() {
    alert("closed");
});

If you are using jQuery 1.7+ and don't need backwards patibility, it's remended that you use the on function instead of bind.