The Blackbox

This is a very quick run through on how to get a basic jquery thickbox (blackbox) popup working, containing an image, and is based on the official demo page. The actual thickbox demo page has more advanced options available and full documentation – this is intended for those who don’t wish to know the full ins and outs of the functionality, but just want it working!

So let’s get started….

The first thing to do is download the latest version of jquery.

Next grab:

• thickbox.js (thickbox-compressed.js)
• thickbox.css
• loadingAnimation.gif

First, make sure the page you are trying to use the Thickbox on, has a valid DTD – it will not function correctly if you don’t. I as a rule, use the Strict DTD.

Next we include the javascript files we have downloaded, and the css file – taking note to replace the path and filenames if you downloaded the compressed versions:

<input type=”radio” name=”payRemainingBalance” value=”true” checked=”checked”/>
<script type=”text/javascript” src=”javascript/jquery.1.6.4.pack.js“></script>
<script type=”text/javascript” src=”javascript/thickbox-compressed.js“></script>
<link rel=”stylesheet” href=”css/thickbox.css” type=”text/css” media=”screen” />

Now that we have those included, we need to quickly edit thickbox.css, and tell it where to find the loadingAnimation.gif that we downloaded earlier. By default it looks for images/loadingAnimation.gif, so if this is where you’ve put it, you can ignore this step.

We should now be good to go, to try your thickbox out – there are a few ways to do this,the most common being from a text or image link, opening up the thickbox to contain an image, so we’ll use that as our example.

Text link:

<a href=”path-to-your/image.jpg” class=”thickbox”>Show Image</a>

Image link:

<a href=”path-to-your/image.jpg” class=”thickbox”><img src=”path-to-your/link-image.jpg” /></a>

The class=”thickbox” is the important bit, so make sure you’ve got that in there!

This should give you a working, (very) basic example of the thickbox. Once you’re happy with that, look at the rest of the examples, and you will find you can use it for various things, not just for showing pictures!

As part of a recent project, I had to make a payment page clear, user friendly and intuative.  One of the key things was to only display fields when certain options were selected – in this case, when a radio button had a certain value.

<input type=”radio” name=”payRemainingBalance” value=”true” checked=”checked”/> the full amount ($amountDue).
<input type=”radio” name=”payRemainingBalance” value=”false” /> another amount. (Enter the amount you wish to pay in the field below)</td>
<div id=”anotherAmount”>
Another Amount: <input type=”text” name=”paymentAmount” id=”paymentAmount” maxlength=”8″ />
</div>

Using jQuery, this is very simple to do:

<script type=”text/javascript”>

$(document).ready(function(){
$(“input[@name='payFullAmount']“).click(function(){
$(“input[@name='payFullAmount']:checked”).val() == ‘false’ ? $(“#anotherAmount”).show() : $(“#anotherAmount”).hide();
});
});

</script>

As we don’t have an id on the radio button, we use the name of the input as the identifier, and a simple one liner to establish what the new value of the radio button is.

Due to the focus being on making it clear what is happening, it could be quite easy when you select the radio button, to miss what has changed on the page (a new input box appearing), so I decided to try and highlight the newly displayed input box by fading the background colour of the input box, in and out.  In order to do this in jQuery, you need the jQuery Color plugin.

<script type=”text/javascript”>

$(document).ready(function(){
$(“input[@name='payFullAmount']“).click(function(){
$(“input[@name='payFullAmount']:checked”).val() == ‘false’ ? $(“#anotherAmount”).show() : $(“#anotherAmount”).hide();

if ($(“input[@name='payFullAmount']:checked”).val() == ‘false’) {
$(“#paymentAmount”).animate({ backgroundColor: “#EFB559″ }, 1000).animate({ backgroundColor: “#FFFFFF” }, 1000).animate({ backgroundColor: “#EFB559″ }, 1000).animate({ backgroundColor: “#FFFFFF” }, 1000);
}

});
});

</script>

Our starting background colour is #FFFFFF, we fade to #EFB559 in 1 second, back to #FFFFFF in 1 second, to #EFB559 in 1 second, and finally back to #FFFFFF in 1 second.  This gives the effect of highlighting the field in an orange colour twice, hopefullyhelping the user notice what has changed on the page.