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.

225 comments ↓

Leave a Comment

Hint: consider reading the FAQ before submitting a question.