How to Check if jQuery’s ColorBox is Open or Closed

October 20th, 2010 - Posted by Steve Marks to Javascript / jQuery, Web Development.

Get jQuery Colorbox State

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…

This entry was posted on Wednesday, October 20th, 2010 at 7:23 pm by +Steve Marks and is filed under Javascript / jQuery, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.
Comments...

Fear not, we won't publish this

Comments (3)
  1. Anonymous says:

    if ($(‘#colorbox’).is(‘:visibile’)) {
    [...]
    }

  2. Ares says:

    Actually, color box has a built-in event (cbox_closed) that gets called once it is closed.

    All you need to do is bind document against it. This is be a better future-proof approach.

  3. ramesh says:

    what can i say…just one word AWESOME!!!!!!!!!!!!!!!!