Update: Modified to work with version 1.3 of 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.
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.
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.
<link rel="stylesheet" type="text/css" href="/styles/thickbox.css" media="screen" />
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!
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.
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 🙂