BIOSTALL

I’ve wrote a couple of posts previously about the jQuery ColorBox plugin. It really is one of my preferred lightboxes that I find myself using more and more as time goes on.

Today I want to answer a question that I’ve been asked a few times before and explain a situation I’ve found myself in a few times during past projects; how can we close the Colorbox from within an iFrame?

Opening The ColorBox

Before I begin to describe the solution let’s take a look at how we open the ColorBox in the first place. To do this we might do something like so:

<script>
	$(document).ready(function(){
		$(".iframeAnchor").colorbox({width:"80%", height:"80%", iframe:true});
	});
</script>
<a class='iframeAnchor' href="colorbox-iframe.html">Open ColorBox</a>

The two key parts here are setting the ‘iframe’ option to true, and specifying the source of the iFrame in the ‘href’ attribute of the link, in this case colorbox-iframe.html. It’s this file where our button to close the ColorBox will reside.

Closing The ColorBox

Now the ColorBox can be opened, let’s look at how we can close it. Using the example iFrame file from above we can simple add the following line of code to colorbox-iframe.html:

<input type="button" name="btnClose" value="Close" onclick="parent.$.colorbox.close()" />

Easy huh? We’re simply calling the standard public method to close a ColorBox button prefixing it with ‘parent.’ to refer to the iFrame’s parent.

jQuery’s ColorBox is one of my favourite and most used jQuery plugins. It’s simple to set up, looks great, very customisable and the website contains examples to cover every scenario you could imagine.

One thing that I couldn’t achieve right away however was how to get the current state of the ColorBox at any one time. Was it open? Was it closed? After a bit of playing around I discovered that the plugin creates an element with an ID of ‘colorbox’. By using this, combined with jQuery, I could then easily detect the current state by doing something like so:

if ($("#colorbox").css("display")=="block") {
	alert('ColorBox is currently open');
}else{
	alert('ColorBox is currently closed');
}

So there we have it. Simple huh? An another alternative is that you use the callback functionality of ColorBox and update a global JavaScript variable each time it is opened and closed, but I’ll save that for another day…

Update – 26th December 2010 (Credit to azrad)

Since writing this post it seems that ColorBox has been updated meaning the solution below is now longer needed. Simply using the latest version of colorbox will allow you to open the ColorBox onLoad.

I came across a scenario today where I needed to open the jQuery ColorBox as soon as the page loaded. After looking on the ColorBox website it read as follows:

And it can be called directly, without assignment to an element
Example: $.fn.colorbox({href:”thankyou.html”});

After attempting to add the above code to the onload event of the page nothing happened. No ColorBox, no errors, nothing. After a short while spent researching it appears that there is an extra parameter required called ‘open’ that, if set to TRUE, results in the ColorBox opening automatically with no input from the user. The resulting, and functioning, code now looked as follows:

<script type="text/javascript">
	$(document).ready(function() {
		$.fn.colorbox({href:"thankyou.html", open:true});
	});
</script>