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.
214 comments ↓
unfortunately this may be not that easy because ThickBox isn’t developed any further and may not work with the most recent version of jQuery. Nevertheless, I’ll try this and will include an updated jQuery if it’s working without any issues.
In the meantime you can go to the settings page of the plugin and configure it to use the jQuery that comes with WordPress – this way you’ll have a more recent version.
I was having a conflict with Thickbox and a slideshow plugin, and I unticked the jquery checkbox in Thickbox. That made the slideshow plugin work, but Thickbox broke. Then I reverted back (disabled the slideshow plugin, re-ticked the jquery checkbox) and Thickbox is still broken. I can’t figure out why.
http://www.cobblehill.org – if you click the newsletter button at the top, the sign-up form used to pop up as a thickbox.
If you go to my site, you can see the sandwich board in the middle of the page. When I click on the board, the thickbox shows but the content does not. Any idea why?
http://theteacupparlour.com/the-collection/
Thanks!
Sarah
simply provide the desired caption in the title field of the images. You can either edit them via the Media Library in the WordPress backend or directly when uploading the images to your site.
since you’re using the gallery shortcode that comes with WordPress you can either adapt the output of the gallery so ThickBox picks up the correct information or write a small tool that copies the relevant values in the database into the correct locations. Either way it might take some effort getting this just right.
I’ve got the plug-in working on my site after using the expert mode…as it disabled the gallery feature when used normally.
However it now disables the main menu on the thickbox enabled pages.
Any suggestions as to how I can enable the plug-in without disabling the menu?
i was originally using the wp-fancyzoom plug in. This works well but makes a double pop-up on my gallery pages.
Have tried deleting the link URL from the gallery images using fancyzoom… but the damn links can’t be deleted.
On the website that I provided with this feedback, the thickbox isn’t displaying the images due to the js script calls being called twice, how do I change this to get it to work properly. Its under Portfolio -> Club Flyers, then on the source html page its at the bottom (or nearish)
Cheers
Callum
please either try the expert mode or the option that advices the plugin to use the JavaScript that comes with WordPress from the options menu which is part of the plugin.
ich möchte gerne Text und Bild zusammen mittels Thickbox darstellen. Der Text soll unter das Bild und mit Absätzen (also in Sinnabschnitte unterteilt) dargestellt werden.
Wie lässt sich das bewerkstelligen? Irgend eine Idee? Ich habe schon alles mögliche ausprobiert, die Thickbox soll das ja von Haus aus können. Ich weiss nur nicht wie…
Wenn du Tipps hast, ich wäre dir unendlich dankbar!
das geht am besten mit dem sogenannten Inline content, den Du auf
hiddensetzen kannst; Infos dazu gibt es hier. Wenn Du unter Einstellungen – ThickBox die Optionen des Plugins aufrufst, solltest Du die Hilfe Links sehen: diese sind genau mit dieser Funktion gemacht – vielleicht kannst Du es dir dort ja abschauen.The thickbox is working in my blog. But it caused a bit of a problem in the margin of my paragraphs.
So what I did is edit the css but now, my footer is not adjust to the very bottom of the page.
I hope you get what I mean. I need help in this one
I was able to solve the problem. I’m all good for now!
this is most likely an issue regarding the specific theme you use. Try checking how the CSS selectors for these various margins are implemented and adjust them as needed.
Leave a Comment