Integrating thickbox with imageflow

August 5th, 2008 § 33 comments

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 :)

Donate to Quicksilver 1Password Plugin

Tagged imageflow, javascript, thickbox

§ 33 Responses to Integrating thickbox with imageflow"

  • Cody says:
    June 6, 2010 at 7:47 am

    Patrick-

    Any word on getting Fancybox working with the ImageFlow? I really could use it!

    Thanks,
    Cody

  • web designer in toronto says:
    February 12, 2010 at 5:43 am

    I completely agree. Thanks for the post!

  • Patrick says:
    January 28, 2010 at 9:06 pm

    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 :(

  • Patrick says:
    November 25, 2009 at 7:11 pm

    I have no experience with FancyBox, but I will look into it this Christmas and hopefully post a new blog item!

  • barneyy says:
    November 25, 2009 at 4:32 pm

    yes Patrick, do it please with the fancybox – you would make me happiest man alive…

  • Daniel says:
    October 2, 2009 at 12:34 pm

    Hi Patrick, could you imagine to do the same with FancyBox?
    http://fancybox.net/
    Thanks Daniel

  • Patrick says:
    September 25, 2009 at 5:41 pm

    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?

  • Steve says:
    September 24, 2009 at 5:45 pm

    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

  • Patrick says:
    July 3, 2009 at 8:16 am

    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

  • vel says:
    July 3, 2009 at 8:11 am

    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

« Older Comments
Newer Comments »

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

*

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

What's this?

You are currently reading Integrating thickbox with imageflow at Web Design.

meta

  • Author: Patrick
  • Comments: 33 Comments
  • Categories: Web Design

  • Pages

    • About Patrick Robertson
    • Bits & Bobs
    • Designing the World
    • Tags
    • Websites
  • Categories

    • Apps (5)
    • Holidays (1)
    • Mac OS X (8)
    • SEO (2)
    • Uncategorized (1)
    • Web Design (4)

© Patrick Robertson 2012

Powered by WordPress