An upgrade to the jQuery Thickbox Plugin

Posted by Byrne, 4 May 2009

I have been doing a lot of work in jQuery as of late and stumbled across the popular jQuery plugin called "Thickbox" which works similarly to Lightbox, but is more fully featured.

ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

There were a couple of problems with the plugin though when I started using it. For one, the plugin has not been updated in a long time and was not compatible with the latest version of jQuery: 1.3.1. It also used a rather non-standard way of configuration and was completely non-extensible. In fact, it required users to edit CSS and Javascript files in order to point the library at the right images to use. That's no good at all because it makes it possible for a simple upgrade to break a site, granted in a minor way, but still.

No doubt the original author of the plugin has a million other things on his plate, so I thought I would chip in, upgrade the plugin, and contribute them back to the author and community, and if necessary take over maintenance of the plugin.

Download

Documentation

Installation Instructions

  1. Upload the thickbox files to your web server.

  2. In your web page using thickbox, import the javascript like so:

    <script type="text/javascript" src="jquery.thickbox-byrne.js"></script>

  3. In your web page, import the CSS like so:

    <link rel="stylesheet" href="thickbox.css" type="text/css" />

  4. Read the rest of this documentation and initialize thickbox according to your needs.

Options/Settings

The following options can be used when initializing Thickbox.

Usage

    $('a.thickbox').thickbox({
            macFFBgHack: 'images/macFFBgHack.png',
            loadingImage: 'images/thickbox-loading.gif'
    });

Demo

It worked!

Click me

Changes between 1.3 and 1.3-byrne

The version described here is '1.3-byrne' which is a fork of the original Thickbox plugin versioned 1.3. Here is a list of the changes I have made in my fork:

Filed in and tagged , , , ,

20 Comments

This is going to be some fantastically bad timing, but you should have a look at the Thickbox Reloaded version Klaus Hartl created a while back, in part because the original wasn't being worked on.

He made several programmatic and styling fixes and I can't remember whether or not they were all integrated with Cody's original when he did eventually do an update. Most importantly, though, it also implemented a way to assign the TB action to a jQuery selector(making it more "plugin-like"), so that authors wouldn't have to add the class="thickbox" every single time, and that definitely wasn't picked up by Cody. You can find Klaus' version in the jQuery Google Code project under trunk/plugins. You'll have to check the code out; the web interface only shows a partial listing for that dir. I'm having trouble finding the post--or I suspect e-mail--where Klaus went over all the details of what he changed, but here's a start.

Su at 2009-05-04T15:00:37-08:00

Aaaaaand on re-scan it looks from the usage snippet like you did your own implementation of the selector bit. The usage snippet was still referring a.thickbox and I glossed. At any rate, it might still be worth a peek at what Klaus did in case there's anything interesting.

Su at 2009-05-04T15:06:57-08:00

I should absolutely merge his changes in. Too bad I didn't look harder for work someone else had done. On the plus side it looks like are changes are compatible so they should be easy to merge in.

Byrne at 2009-05-04T15:08:32-08:00

Hi Byrne,

I used this thing somewhile ago. Glad you've made for MT4. But I cannot see the code which you are mentioning in bullet 2 and 3..... Do I miss something?

Hans Mestrum at 2009-05-05T07:03:49-08:00

Nope - I made a mistake in my Markdown. Thanks for pointing out the problem.

BTW - this is not for Movable Type. This is a generic jQuery plugin.

Byrne at 2009-05-05T09:50:21-08:00

I noticed you now assigned the path of macFFBgHack and loadingImage into the thickbox.js and a global JS file.

I'm not a programmer so I'd like to know; why is there a need to assign the image path in both JS files now?

BTW, your comment form kept saying I needed to input my email and URL when I've already did - in Chrome.

Danny Foo at 2009-05-12T04:03:07-08:00

There should be no need to specify the paths to the loadingImage and macFFBgHack directly in the javascript files anymore. You should specify those only through the allotted configuration parameters.

Byrne at 2009-05-12T07:10:25-08:00

How can I use this upgrade to load a thickbox when my page is fully loaded ?

I used to simply do :

$(document).ready(function(){ tb_show('title','myUrl',null); }

this no longer seems to work.

Kris Verheire at 2009-05-27T05:01:41-08:00

This is how that function call will translate to the new system:

$(document).ready(function(){ 
  tb_show('title','myUrl',null); 
});

Becomes:

$(document).ready(function() {
  $(a.thickbox).thickbox({
  });
});

This will trigger the thickbox when you click the a link with a class of thickbox. Are you trying to trigger it on page load?

Byrne at 2009-05-27T08:16:15-08:00

I am having the same problem with triggering the thickbox on page load.

How would I be able to do this using the new system?

Mike at 2009-05-27T11:29:05-08:00

The iframe portion doesnt work. Its trying to call tb_showIframe but cannot find the function.

Matt at 2009-05-27T11:31:42-08:00

So is there any way to get this to work with iframe content and to get it to work on load?

Mike at 2009-05-29T07:13:16-08:00

Does not work on IE7 or IE8, almost 30% of the lower part of the thickbox window is not visible, even if you scroll down it will not appear...

Hussain at 2009-06-16T18:40:24-08:00

I can't seem to get this to work after replacing the .js file and .css file from thickbox 3.1. Now it just follows the link and loads the target page (FF and IE). Is this only for .php or can it also be used in .aspx pages? My link is as follows:

<a href="page.aspx?height=600&width=950&modal=true" class="thickbox" title=""> Test </a>

If this is wrong, could you post an example usage?

Andy at 2009-07-09T12:42:25-08:00

Thanks for pointing out the problem

water meter at 2009-08-02T19:09:34-08:00

I too was having the issue with the iframe not working. The problem is that the iframe has an onload event attached that calls the tb_showIframe() function. Since the functions are all wrapped up in the plugin this caanot be called.

To fix the problem make the following change (approx. line 222):

} else if (settings.iframe) { tbposition(); tbshowIframe(); }

You can remove the "Safari fix" part, as it is basically doing the same thing as tb_showIframe() anyway.

I attached an updated zip with the changes to the ticket for this bug. If you want, go grab it: http://majordojo.lighthouseapp.com/projects/33302/tickets/4-thickbox-byrne-issue-error-on-modal-iframe

Tim Hobbs at 2009-10-15T08:41:59-08:00

Woops. Looks like the js layout got chewed up. Grab the updated zip for the proper fix.

Tim Hobbs at 2009-10-15T08:43:27-08:00

This doesn't solve my main gripe with thickbox. The most basic operation is to flash up an image in the middle of the screen, with html like:

If this code happens to be at the bottom of a long page - more than a scroll down - then the full image pops up at the top of the page - where the user has to scroll up to look for it.

Is there a solution to this?

John Larysz at 2010-01-07T06:56:16-08:00

OK, I'm wrong. Something is messing with me, but it's not thickbox.

John Larysz at 2010-01-07T09:23:48-08:00

It was the DTD. Ouch.

John Larysz at 2010-01-07T09:53:27-08:00