WordPress ThickBox Plugin

I created a plugin for WordPress that helps you to embed ThickBox into your blog. Just install and activate the plugin, add ThickBox compliant markup wherever you want and you’re all set. Furthermore, you can use SmoothBox instead of ThickBox if you like.

You can download the plugin here.

How to

Once you activate the plugin it’ll include the CSS and JavaScript for ThickBox into each and every page on your blog. This way you can put ThickBox compliant markup wherever you want and everything should work as expected.

Have a look at these examples if you’d like to know how to insert the code into a post or page. For the gallery on this page I used the following markup:

<a href="[...]/images/flower.jpg" title="Flower" class="thickbox">
  <img src="[...]/images/thumbs/flower.jpg" alt="Flower" />
</a>

All you have to do is to put an img tag inside an a tag where the former holds the smaller and the latter holds the larger image. This results in a nice image gallery.

Configuration

The plugin comes with a settings page that helps you to adapt the plugin’s behavior to suit your needs. Although most of the options are pretty self explanatory there’s a help link next to every option.

Help

If the cool effect doesn’t seem to appear, go check these things:

  1. Is your markup correct? Have a look at the examples and learn how to supply markup ThickBox understands.
  2. You had ThickBox on your site and switched to Smoothbox and now it isn’t working? Don’t forget to set the class to smoothbox instead of thickbox in the HTML markup. In this regard, the libraries aren’t compatible with each other.
  3. Is the CSS and JavaScript included in your page? If you enabled the expert mode don’t forget to add the custom field thickbox to your page. Finally, make sure your theme has calls to wp_head and wp_footer in header.php and footer.php respectively.

Still need help? Write a comment.

Special use cases

Here I collect some special issues regarding ThickBox.

Changing ‘close or Esc key’

The plugin comes with the default (english) and a german translation of ThickBox and SmoothBox. Whether you just want to change the text saying close or Esc key or add more internationalization to ThickBox you can do it like so:

  1. download the uncompression version of ThickBox from here.
  2. do a search and replace, so everything fits your needs. For example, change close or Esc key on lines 128, 196 and 204.
  3. optional: compress the JavaScript with a tool.
  4. copy the new JavaScript file over the original one in the plugin located under wp-content/plugins/thickbox/thickbox/thickbox.js.

Once you’ve done that the ThickBox is customized to suit your needs. But instead of replacing the original version of ThickBox you can read more about variants in the corresponding help box on the plugin’s settings page; indeed, you can manage more than one variant with the plugin.

Open ThickBox onload instead of onclick

In case you’d like to open a ThickBox onload instead of the usual onclick here you go:

  • add the following JavaScript snippet to your HTML header, i.e. somewhere inside the head element: 
    <script>
function showThickbox() {
  $(document).ready(function() {
    tb_show("Page", "somepage.html?height=200&width=400", "");
  });
}
</script>

    Adapt Page and somepage.html and the following parameters to suit your needs.

  • Add this onload="showThickbox()" to e.g. the body element. This way the Thickbox loads every time the page loads.

That’s it. Now use PHP to to add some sophistication to this.

You can download a working example here; have a look at the file test.html first.

Examples

A simple gallery of images might look like this:

MumsFlowerLadybugPlant

An iFrame is easy too.

170 comments ↓

« Older comments
Newer comments »
  • Webrocker » Ausputzen im Codegebälk says:
    August 23, 2008 at 5:34 pm
    [...] hatte ich das Plugin “Thickbox” im Einsatz, dank der oben beschriebenen Schritte ist das nun nicht mehr nötig. Das [...]
  • Webrocker says:
    August 24, 2008 at 11:42 am
    Hi Christian, danke für den Kommentar!
    Vielleicht wäre es eine einfache Lösung, eine Option im Plugin einzuführen, die es ermöglicht, die thickbox.js und jQuery.js Einbindung zu deaktivieren – für den Fall, dass man beide Bibliotheken schon selbst im Header eingebunden hat. So würden sich die in dem Fall unnötigen doppelten Einbindungen sparen.
    Viele Grüße und danke für das coole Plugin!
    Tom
  • Christian Schenk says:
    August 27, 2008 at 9:57 am
    Hi Tom,
    have a look at this new feature.
  • Webrocker says:
    August 27, 2008 at 4:02 pm
    Christian, many thanks, this is just what I needed…
    Again thanks for this cool plugin and your work!
    - Tom
  • pennywise says:
    August 27, 2008 at 7:21 pm
    Hi,

    I don’t really know why, but it does not work anymore.

    I have WP 2.6.1 and Thickbox 1.2.1. I’ve added the ‘class=”thickbox”‘ to each a-tag, but it’s just not working.

    What kind of CSS or Script must be in the head-part of the document, that thickbox is working?

  • pennywise says:
    August 27, 2008 at 7:23 pm
    ok, sorry for that. my design that I’ve changed recently made it not working. Nothing wrong with the script :)
  • juan says:
    August 29, 2008 at 1:45 pm
    Hi, I dont know why, but the thickbox for my images are working but for the ajax content no.
    Could you please take a look:

    images: on the column “VER”

    ajax content: column “+ info”

    the web
    http://tinyurl.com/6f2v7h

    thanks a lot, have a nice day :)

  • Christian Schenk says:
    August 30, 2008 at 3:44 pm
    Hi Juan,
    hm, the markup looks valid but it doesn’t work for me either. Since the page has JavaScript errors, maybe you should debug those with FireBug first.
  • Chris Homan says:
    September 24, 2008 at 7:54 am
    Hey There,

    I came across this thread, and was hoping someone could help, im going crazy! I’ve been developing a site with jQuery tabs, innerfade, and swfObject, with much success. My plan was to integrate thickbox for the individual images, but for some reason, i can’t even get thickbox to kick in. The browser just goes right to the image in a new window. I know it’s something silly, could anyone help me out? I’ve worked with lightbox quite a bit, but even that wouldn’t work when i tried integrating it onto the page. Right now i’m just testing on one page, the first thumbnail (phoenix adult), that should definitely be doing some thickbox magic…have a look at the code…

    http://dev.creativehinge.com/portfolio_temp.php

  • Chicoplay says:
    September 29, 2008 at 9:09 pm
    Hi Christian,

    Do you know if is any way to use Thickbox with video tutorials like they do it in camtasia hompage?

    Thanks.

  • Christian Schenk says:
    September 30, 2008 at 5:49 pm
    Hi Chicoplay,
    I’ve added an iFrame example for you here. Read more about this over here.
  • Thunfischmundgeruch » Blog Archive » Problem(e) gelöst says:
    October 5, 2008 at 12:33 pm
    [...] mal aufgeräumt, unter anderem habe ich das “NextGEN Gallery” Plugin entfernt und das “Thickbox” Plugin installiert und stellte fest das ein Konflikt zwischen Thickbox und WP Grins besteht. Also habe ich [...]
  • Zach Blank says:
    October 6, 2008 at 7:08 pm
    Hey, Great plugin!

    I think there is a minor bug with the loading gif and using pretty permalinks. With pretty permalinks the relative path to the loading gif changes. I am using smoothbox and updated smoothbox.js on line 53 to read:

    $(’TB_load’).innerHTML = “”;

    instead of:
    $(’TB_load’).innerHTML = “”;

  • DeeQuu says:
    October 28, 2008 at 11:33 am
    I would have posted this for the official website, but it requires registration – so sorry for this if this doesn’t belong here.

    My problem was a box that contained Inline Content and I wanted Next and Previous links for it. The thickbox removes the “original content” and puts it into TB_ajaxContent. So I had to make some changes into thickbox.

    First: I have divs id=”x1″, id=”x2″, and so on. The link in the original thickbox link is &inlineId=x1, and so on. In the divs, I have next and previous links onclick=”changeContent(’x3′);” and onclick=”changeContent(’x1′);” (this is div id=”x2″). The function

    function changeContent(fieldName1){
$("#TB_ajaxContent").empty();
$("#TB_ajaxContent").prepend($("#"+fieldName1).html());
return false;
}

    After this I found out that thickbox empties the “original div” – SO in thickbox.js (not compressed) I changed:

    if(url.indexOf('TB_inline') != -1){  
          $("#TB_ajaxContent").append($('#' + params['inlineId']).children());
          $("#TB_window").unload(function () {
            $('#' + params['inlineId']).append( $("#TB_ajaxContent").children() ); // move elements back when you're finished
          });
          tb_position();
          $("#TB_load").remove();
          $("#TB_window").css({display:"block"}); 
        }

    to:

    if(url.indexOf('TB_inline') != -1){  
 var cloneableDiv = $('#' + params['inlineId']).clone(true);        $("#TB_ajaxContent").append(cloneableDiv.children());
          tb_position();
         // $("#TB_load").remove();
          $("#TB_window").css({display:"block"}); 
        }

    Hope this helps someone.

  • sleek says:
    November 13, 2008 at 5:14 pm
    I am grateful to you for this. For last 3 days I had wrecked my brain with nextgen and this simple code solved my problem in seconds!!
  • Michael Erb says:
    November 13, 2008 at 8:04 pm
    Because of validation errors with nextGEN Gallery, which uses thickbox, I’d like to use smoothbox. But there is scant information on how to implement this. Anyone able to help explain the install procedure to do this for WordPress?

    I’ve got nextGEN Gallery installed in plugins and it’s working fine, except for the multitude of validation errors. I’ve downloaded smoothbox.css, smoothbox.js and loading.gif

    I have no clue where to place these files so that nextGEN can use them instead of Thickbox. I tried just placing them in the nextgen-gallery -> thickbox directory and then seeing if I could select smoothbox in the nextGEN wordpress preferences Gallery -> Effects -> Custom but didn’t have any luck with that. I’m lost, dazed and confused.

  • Christian Schenk says:
    November 15, 2008 at 2:57 pm
    Hi Michael,
    this isn’t an extension to NextGen Gallery and I can’t help you with that plugin. Go to this website and ask your question there.
  • jQuery Konflikt mit Lightbox / Thickbox dank prototype.js says:
    November 30, 2008 at 5:02 pm
    [...] jQuery.js, welches artverwandt zu prototype.js ist, welches Plugins wie Lightbox, Greybox oder auch Thickbox nutzen. Diese beiden Bibliothekdateien kommen sich bei paralleler Anwendung in die [...]
  • Wilson says:
    December 13, 2008 at 10:49 pm
    I like this plugin, but in my blog i have many images.

    If i install this plugin, all my imagens don’t have class=”thickbox”

    How to add this for all images ??

  • Christian Schenk says:
    December 14, 2008 at 2:01 pm
    Hi Wilson,
    there’re various plugins that do a search and replace in your content. Use one of these and try replacing img with img class="thickbox" . That will enable the ThickBox effect on all your images.
    Please make a backup of your WordPress database before doing this.
  • contezero74 says:
    December 15, 2008 at 6:36 pm
    Dear all, I just released a WordPress plugin that fix Thickbox CSS validation problem. You can find it here.

    At the same page, you can download a .zip file with an alternative CSS file and a Javascript that you can use to fix the problem if you don’t use WordPress.

    cheers

  • Christian Schenk says:
    December 15, 2008 at 6:39 pm
    Hi contezero74,
    instead of fixing Thickbox you can use Smoothbox instead.
  • prateek says:
    December 17, 2008 at 7:46 am
    the thickbox is working properly in one page but not working on another page even if the code is same <a href=”misc/mid_image/” class=”thickbox” rel=”gallery-plants”><img src=”misc/thumb_image/” height=”100″ width=”100″> what to do please help me out plzzzzzzzzz
  • bit says:
    December 30, 2008 at 3:53 pm
    Hi Christian, I followed your tutorial and video. I have installed and activated thickbox plugin on my wp 2.7. I added thickbox class and created the “thumb” dir. I also created the custom field key – “thickbox” value – “On” but the large image still opened in a new window…what’s wrong?
    Thanx for your attention
    B.
  • Christian Schenk says:
    December 30, 2008 at 7:00 pm
    Hi bit,
    please send me a link to the page with the ThickBox and I’ll have a look…
  • bit says:
    January 7, 2009 at 11:51 pm
    Hi Christian, sorry for my late reply.
    Here it is the URL http://www.hiphopconnection.it/v3/category/info
    Click on the last image with the black cat “Bronx”.
    You can see the “thickbox” class from the browser’s source code.
    Many thanx
    B.
  • Christian Schenk says:
    January 8, 2009 at 3:48 pm
    Hi bit,
    although the CSS in the HTML head is present the JavaScript in the footer is missing. Check whether there’s a call to wp_footer() in the footer.php of your theme – if that’s not the case, you’ll have to add it.
    BTW: the markup of your site is totally broken; validate with validator.w3.org. Have a look at line 54: seems like another call to wp_head() in your theme. Try fixing this too.
  • bit says:
    January 9, 2009 at 5:03 pm
    Ok Christian, i’ll try to do everything and I let you know.
    Many thanx again.
    B.
  • Wordpress Plugins for Photo Galleries - Photoblogging Part II : Web Design Resources Blog & Graphics Blog with Lists of Web Site Design Tools says:
    January 14, 2009 at 5:39 am
    [...] WP ThickBox [...]
  • Courtney says:
    January 22, 2009 at 5:35 pm
    Hello,

    I have a new Wordpress site I’m working on — version 2.7 — and I’m wondering if this still works in this version? I did exactly as instructed — activated it and tried to implement a simple image thickbox example. However, nothing happens. I’ve tried hardcoding the css and js references in the header myself but agai, nothing. Am I missing something obvious?

    Wait, I got it. The js had to be in the footer — and wasn’t be included in mine for one reason or another.

    My next question then is — can Quicktime movies be used here? So far it doesn’t seem to work, but I thought I’d check.

    Thanks, C

  • Christian Schenk says:
    January 22, 2009 at 10:17 pm
    Hi Courtney,

    can Quicktime movies be used here?

    Sure: use an iFrame for this. Have a look at my example on this page.

  • Courtney says:
    January 23, 2009 at 9:29 pm
    How can I change the text in the box that says “Close or Esc Key?”

Leave a Comment