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.
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 in the imageflow div to:
javascript:tb_show( 'caption', 'images/image.jpg', 'slideshow1' )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 🙂
34 comments for “Integrating thickbox with imageflow”