Here’s a video that shows you how to integrate a gallery with the WordPress ThickBox plugin into a page. The only premise is that you’ve successfully installed and activated the plugin.

You can watch the video here, on blip.tv or on YouTube:

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.

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>
<a href="[...]/images/ladybug.jpg" title="Ladybug" class="thickbox">
  <img src="[...]/images/thumbs/ladybug.jpg" alt="Ladybug" />
</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.

Expert mode

If you don’t want to include the CSS and JavaScript for ThickBox in every page on your blog but just on those pages that actually use ThickBox that’s possible too. Just open the file thickbox.php and change INCLUDE_JS_AND_CSS_EVERYWHERE (on line 40) to false.

Now the plugin will not include the JavaScript and CSS in ever page on your website you’ll have to enable it for specific posts or pages. You just have to add a custom field named thickbox with the value set to any non empty string. Once you’ve done that the CSS should appear in the header of your page and the JavaScript in the footer.

This isn’t the default behavior because it caused some hassle. But if you’re running a blog with a serious amount of visitors this will save you a lot of bandwidth.

Using Smoothbox instead of ThickBox

If you’d like to use Smoothbox instead of the original ThickBox, because it’s valid by W3C’s standards, do this: open thickbox.php with an editor and change the value of INCLUDE_SMOOTHBOX to true. Once you’ve done that, the CSS and JavaScript from Smoothbox will be included instead of the original code.

Hint: don’t forget to set the class to smoothbox instead of thickbox in the HTML markup. In this regard, they aren’t compatible with each other.

Circumventing the inclusion of jQuery

If you’ve already got jQuery, the CSS or JavaScript for ThickBox somewhere inside your theme, you can use the following switches to control the inclusion of the aforementioned snippets:

• INCLUDE_THICKBOX_CSS
• INCLUDE_THICKBOX_JAVASCRIPT
• INCLUDE_JQUERY

Just open the file thickbox.php and change the value for (some) of these properties to false. Deactivating everything would make this plugin quite pointless.

Example

A simple gallery of images might look like this:

An iFrame is easy too.