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 ![]()
Patrick-
Any word on getting Fancybox working with the ImageFlow? I really could use it!
Thanks,
Cody
I completely agree. Thanks for the post!
Hey baneyy & Daniel,
I looked into the idea of FancyBox, but couldn’t see any easy way to implement it.
I don’t think it’d be too hard, but I’m not your man
I have no experience with FancyBox, but I will look into it this Christmas and hopefully post a new blog item!
yes Patrick, do it please with the fancybox – you would make me happiest man alive…
Hi Patrick, could you imagine to do the same with FancyBox?
http://fancybox.net/
Thanks Daniel
Hi Steve,
If I understand you correctly, you’re just using the javascript onclick function to get it to work.
In theory it should work, but there could be an incompatibility with Imageflow that is stopping it from working.
Is there a reason why you aren’t using the longdesc method as described?
Hi there,
I’ve changed this hack around slightly to activate using the onClick method in ImageFlow, however I seem to be having difficultly getting the ThickBox close functionality to work in IE7 – works as expected in Firefox.
The code is exactly as detailed here, only launched from the onClick callback – is it likely this is the root cause of the problem?
Any ideas appreciated.
Cheers,
Steve
Hi Vel,
Are you sure you’ve added thickbox.js to the head of your code?
If you give me a link to your page I can try and help
tb_show is not defined
javascript:tb_show(‘caption’,’./images/tempo/img.jpg’,'slideshow1′)
Line 1
I have this error plz tell me a solution