- 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.

Imageflow is a mimic of Apple’s cover flow for Mac OS X and iTunes, and combining it with Thickbox is similar to QuickLook for the Mac.

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.

Step 2

Change the longdesc attribute for each image in the imageflow div to:

where ‘caption’ is the caption of the image and ‘images/image.jpg’ is the URL of the image. Unfortunately the ‘slideshow1′ – gallery option doesn’t seem to work with this implementation. I’m looking into it, but in the mean time if you have any ideas let me know!

Step 3

Small CSS fixes: Open thickbox.css, and change the z-index of #TB_window to 10200 (higher than 10002). 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.

Change the z-index of #TB_overlay to 10199. This is to make sure the (grey) background is on top of the slider and scrollbar as well.

Step 4

There is no step 4
You can preview my hack here

OR – to make your life even easier – you can download the whole package here [106Kb]
** Version 1.3

I’m here for support, and will try to update to the latest version of Imageflow whenever it’s released. If you appreciate my work, then please do donate – it’s definitely not ‘free’ for me to do all this time-consuming stuff