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.

Message from Certkiller Download braindump with latest free WP themes to pass 642-892 exam and become expert with our HP0-D07 web designing training course.

172 comments ↓

« Older comments
  • Christian Schenk says:
    May 4, 2010 at 12:14 am
    Hi Neal,
    sure, we could change the plugin in a way that restricts access to these settings e.g. to administrators only. Using a plugin like Adminimize may be a good alternative too.
  • asif eminov says:
    May 20, 2010 at 11:33 pm
    Thanks this plugin. I need this plugin. :)
  • Adding Video Using the ThickBox Plugin | Poderosa Ranch says:
    May 24, 2010 at 5:58 am
    [...] this tutorial you will need to have installed the ThickBox plugin By Christian Schenk.  You will also need a video produced using Camtasia Studio with the embedded [...]
  • Scarlet says:
    June 1, 2010 at 11:11 am
    Finally a plugin that does what it says it will.

    I have been trying for ages to get my images to show properly without having to use larger images just so people can see the details. The expert mode is very helpful and everything is easy to use.

    I do have a small border issue but in the grand scheme of things that is nothing a little tweek won’t fix.

    Thanks for a great plugin. My advise to anyone is to use thickbox first no others compare to the functionality of this.

  • Christian Schenk says:
    June 1, 2010 at 11:40 am
    Hi Scarlet,
    thanks a lot for this great feedback!
  • elena says:
    June 3, 2010 at 8:39 pm
    i want to send an id trough the url, but when shows me the thickbox, don’t recognize the id, how can i send it?
  • Christian Schenk says:
    June 3, 2010 at 11:06 pm
    Hi Elena,
    I don’t know what exactly you’ve tried so far but you can add parameters to the URL like you normally would. Just make sure to add them right after the ? and not at the end of the query string.
    I recommend reading the examples over here which should help you to fix your issue.
  • Kevin Mitchell says:
    July 6, 2010 at 2:44 am
    I am having an issue using ThickBox with the YouTube Gallery Plug-in. The video thumbnail shows up just fine, but when I click the thumbnail to have the video window pop-up, nothing happens. I have checked my html several times and have found nothing wrong. It worked when I first installed both plug-ins but then just randomly decided to stop working. Please help. Thank You.
  • Anne Dougherty says:
    July 17, 2010 at 2:05 pm
    Hi,

    I’ve been using thickbox for a while now on my personal blog and am in the process of converting my professional site from flat HTML to WordPress and am having an issue with sizing the photos.

    My “large” images are all 640px wide (not unreasonable these days) but thickbox is showing most of them around 467px.

    I admit javascript and jquery are a foreign language so I haven’t poked in there too much but I have checked the CSS and can’t find anything that is restricting the size of the image thickbox will display.

    Is there any way for us to change or control the size of the images that thickbox displays?

    Thanks in advance,
    Anne

  • Mark says:
    July 30, 2010 at 6:19 am
    Hi, I’m having similar issues as Kevin above. I am trying to add a video gallery from my YouTube links. The Thumbs show up GREAT but when I click the thumbs, nothing loads. Thanks in advance for your time and consideration!

    -Mark

  • codeman38 says:
    August 11, 2010 at 4:46 pm
    For anyone else whose paragraph spacing is wrecked by adding Thickbox, the following line in thickbox.css is to blame:

    *{padding: 0; margin: 0;}

    Removing it will restore everything to normal.

    Anyone know how best to make this selector more specific while still preserving the intended effect, for those of us who prefer to leave the default padding on things like paragraphs?

  • Christian Schenk says:
    August 11, 2010 at 5:19 pm
    Hi codeman38,
    I haven’t tried it but maybe you can just apply the above to #TB_window, i.e. only the ThickBox window; maybe you’ll have to include the overlay as well #TB_overlay.

Leave a Comment