Integrating thickbox with imageflow

August 5th, 2008 § 34 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

§ 34 Responses to Integrating thickbox with imageflow"

  • Avinash says:
    April 19, 2012 at 12:46 pm

    have you tried to hack it with fancybox!! I was looking for it!!!

  • Walter Victor says:
    February 13, 2011 at 4:15 pm

    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?

  • Rik Barwick says:
    January 24, 2011 at 9:56 pm

    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

  • Patrick says:
    June 26, 2010 at 12:31 pm

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

« Older 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: 34 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