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:
- 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.
172 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.
I too can’t turn off the jQuery option in the settings…it’s set to “true” no matter what. Unfortunately, this completely breaks the front page of my blog.
Is there a way I can turn it off within the code? Or can I get a copy of the prior version of Thickbox somewhere? I can’t really let this sit until a new release…
I’m sorry for the trouble.
Earlier versions of the plugin are available here. If you’d like to change it in the code, search for “jquery” and comment out the corresponding lines.
I’ve downgraded to v1.3.1 until there is a fix available. I’ll look forward to v1.4.1
Thanks for this plugin, it does what I need it to very simply! The one issue I’m running into is that when users running Safari open an image in my gallery, it opens a second instance of the image below and to the right. (example can be found here: http://tinypic.com/r/9itf6x/3) I followed the examples listed on the page but am not sure where I am going wrong at. Any ideas would be greatly appreciated!
http://www.relentlesshosting.com/~westray/nature-gallery/
due to performance issues the JavaScript won’t be added to your site’s header but footer.
I’m not sure if this is something that can be done with the plugin, but figured best to ask here first.
I use thickbox to open both images that are displayed in posts, as well as ones I simply refer to in text links.
With images, WP has an advanced tab that allows me to edit the links class, ref & title, making it super easy to have it open in a thickbox.
With text links, there is a dropdown for CSS classes, but thickbox is not listed there. There is also a spot for title.
To add the thickbox class & rel information, I have to switch to html mode and edit it directly. It’s not the worst thing in the world, but if there’s a way to make the plugin include these in the visual editor, that would be awesome.
Thanks!
in fact, that’s a great idea and I’ll put it on my todo list. Since I’m very busy right now I can’t promise to add this right now but I’m planning to package a new release next month.
Thanks for this plugin.I have installed the pluggin and now i don’t want to include the pluggin in each and every page,so i enabled expert mode and added the custom field thickbox and value {on} to one of my page.But my nextgen gallery still don’t show up.I am using external flashviewer for nexgen gallery named tiltviewer.
Note-When i disabled the expert mode the gallery shows up but my parent pages don’t show up.
although I haven’t had a look at your site I guess this is some kind of JavaScript error. For instance you should make sure that jQuery will be included only once on your page.
Regarding your note: if everything else seems to work fine with expert mode disabled try fixing the thing with your parent pages.
It worked liked charm
Detail can be seen in the support ticket: http://wordpress.org/support/topic/281780
thanks for the hint, very appreciated! I’ll have a look at the support ticket and I’ll make sure that the new version of the plugin uses the latest and greatest version of ThickBox.
Leave a Comment