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 a pretty self explanatory there’s a help link next to every option.
Help
If the cool effect doesn’t seem to appear there’re some things you should check:
- Is your markup correct? Have a look at the examples and learn how to supply markup ThickBox understands.
- You had ThickBox on your site and switched to Smoothbox and now it isn’t working? Don’t forget to set the
classtosmoothboxinstead ofthickboxin the HTML markup. In this regard, the libraries aren’t compatible with each other. - Is the CSS and JavaScript included in your page? If you enabled the expert mode don’t forget to add the custom field
thickboxto your page. Finally, make sure your theme has calls towp_headandwp_footerinheader.phpandfooter.phprespectively.
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:
- download the uncompression version of ThickBox from here.
- do a search and replace, so everything fits your needs. For example, change close or Esc key on lines 128, 196 and 204.
- optional: compress the JavaScript with a tool.
- 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
headelement:<script> function showThickbox() { $(document).ready(function() { tb_show("Page", "somepage.html?height=200&width=400", ""); }); } </script>Adapt
Pageandsomepage.htmland the following parameters to suit your needs. - Add this
onload="showThickbox()"to e.g. thebodyelement. 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:
An iFrame is easy too.
114 comments ↓
have a look at the source code for this particular page and you’ll see that ThickBox gets included from various locations, i.e. default WordPress and one from wpng-calendar.
If you’d make sure that ThickBox would only run once the extra x would disappear; I’ve just tested that.
Appreciate the help.
Video is Flash? if so you need to set param ‘wmode=transparent’
Hope that helps.
T
Thanks!
I have a strange problem that i’m unable to track, maybe someone here can help -
The thickbox works but the “loading” image does not appear.
When I first added thickbox to my site, it worked perfect.
I then made two changes:
I’m passing thickbox width and height parameters.
I Edited thickbox.js to change the “Close or Esc” text (like in the guide here).
Any ideas?
That was one wasted hour.
i’m having an issue using thickbox with ajax content. the thickbox is delivering the content to the page as
TITLE
message body
TITLE
No content
so the total thickbox size is twice as high as it should be and there is a redundant title line and a big blank space at the bottom.
there is nothing untoward in my server code. for the time being it just looks like
i am using the latest version of your plugin together with WP 2.7.1.
thanks for any assistance you can offer.
Justin
Am I doing something wrong?
this might be a problem with the plugin. I’ll have a look at it soon and include a fix in the next release.
I’ve tested both versions and both are centered here. Have you tried this on another theme? Maybe your theme’s stylesheet is interfering here.
Leave a Comment