I understand you can do a callback with colorbox when you use the close button per :
onClosed:function(){ alert('onClosed: colorbox has completely 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?
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 compatibility, it's recommended that you use the on
function instead of bind
.