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!

JavaScript bra size calculator