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 🙂
have you tried to hack it with fancybox!! I was looking for it!!!
I’m just trying this out and it works until I add any <a href elements. As soon as I add some sort of link to the page, the thickbox just sits at the loading animation. If I delete the <a's, the thickbox works again. Any insight on that?
Hi there, thanks for this post!
I have used this myself with other JS on the images which works well! However i am trying to use thickbox to display an webpage with an embedded uickTime video with little joy, it works in most browsers but misbehaves in Safari, any ideas?
Cheers for any pointers Patrick!
Rik
I still haven’t found a way round Fancybox, unfortunately.
I thought I’d have some time this summer to look over things, but unfortunately that’s not going to be the case.
If I ever do make the hack, I’ll be sure to let everyone know 🙂