Integrating thickbox with imageflow

- a simple hack

If you already use thickbox on your site, there's a simple way to integrate it with the ImageFlow script by Finn Rudolph.

Step 1

Make sure you have the thickbox.js, jquery.js and thickbox.css scripts uploaded to your server, and referenced in the head of your web page.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/thickbox.js"></script>
<link rel="stylesheet" type="text/css" href="styles/thickbox.css" media="screen" />

Step 2

Change the longdesc attribute for each image to:

javascript:tb_show( 'caption', 'images/image.jpg' , 'slideshow1' )

where 'caption' is the caption of the image, 'images/image.jpg' is the URL of the image and 'slideshow1' is the imageGroup of the image.

Note: the imageGroup option can be left blank if you do not want thickbox to add the images to a group. Setting it will allowing you to click prev / next while in thickbox to scroll through your images.

Step 3

Small CSS fix: Open thickbox.css, and change the z-index of #TB_window to something higher than 10002. I changed mine to 10200. The z-index of the #scrollbar and #slider in imageflow.css are 10001 and 10002 respectively. #TB_window must have a z-index higher than both of these.

Step 4

There is no step 4 ;)
You can preview my hack here