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 ↓
sure, we could change the plugin in a way that restricts access to these settings e.g. to administrators only. Using a plugin like Adminimize may be a good alternative too.
I have been trying for ages to get my images to show properly without having to use larger images just so people can see the details. The expert mode is very helpful and everything is easy to use.
I do have a small border issue but in the grand scheme of things that is nothing a little tweek won’t fix.
Thanks for a great plugin. My advise to anyone is to use thickbox first no others compare to the functionality of this.
thanks a lot for this great feedback!
I don’t know what exactly you’ve tried so far but you can add parameters to the URL like you normally would. Just make sure to add them right after the ? and not at the end of the query string.
I recommend reading the examples over here which should help you to fix your issue.
I’ve been using thickbox for a while now on my personal blog and am in the process of converting my professional site from flat HTML to WordPress and am having an issue with sizing the photos.
My “large” images are all 640px wide (not unreasonable these days) but thickbox is showing most of them around 467px.
I admit javascript and jquery are a foreign language so I haven’t poked in there too much but I have checked the CSS and can’t find anything that is restricting the size of the image thickbox will display.
Is there any way for us to change or control the size of the images that thickbox displays?
Thanks in advance,
Anne
-Mark
*{padding: 0; margin: 0;}
Removing it will restore everything to normal.
Anyone know how best to make this selector more specific while still preserving the intended effect, for those of us who prefer to leave the default padding on things like paragraphs?
I haven’t tried it but maybe you can just apply the above to
#TB_window, i.e. only the ThickBox window; maybe you’ll have to include the overlay as well#TB_overlay.I am having trouble getting the full size images to appear.
I have thumbnails (provided by Featured Image), and when clicking the thumbnail, thickbox loads up but with no image!
Please can you help.
Here is my code:
<a class="thickbox" title="” href=”ID); ?>”>
Thanks
When nivo works, thickbox doesn’t show the close button.
When it shows… Nivo stops working… Any ideas?
Thanks!!
this can be an incompatibility of different JavaScript frameworks used by these two software packages. I suggest using a plugin like Firebug for Firefox to find out more about this issue.
I installed your plugin and got an error on page when it loads. Guess there is a confilct somewhere…
How can i find and solve it?
Thanks,
Ohad
I recommend using Firefox along with the plugin FireBug which helps you debugging problems like this.
I use wordpress in localhost . thanks
this issue is most likely related to your theme and not the plugin. If you need to work around this, you’ll have to manually adapt the CSS/JS files that come with this plugin. Maybe you can find more information on that here.
I found that the application: IE Tester (which I personally run on Windows XP on Paralells on a Mac) does not render the Thickbox in either IE 6,7,or8. True IE applications do.
I was pulling my hair out!
I couldn’t get back to you earlier but that’s true: IE Tester behaves differently in various situations and you shouldn’t trust it that much. I still recommend having various virtual machines running different versions of Windows and Internet Explorer to make sure that everything is working as expected. Of course, the amount of work you put into this depends on your particular project and most of the time IE Tester, browsershots.org or similar will cut it.
Is there a non-minified version of the code that I can edit? There are some things I want to change about the display.
I haven’t had this issue before but I guess it might be related to your theme. Have you tried the plugin with another theme? If it’s working there, you’ll have to adjust the CSS of the theme you’d like to use ThickBox with in the first place.
If you’d like to change the styling of the ThickBox I highly recommend not changing it in the JavaScript but simply in the CSS. If you’d like to dig deeper you can find an uncompressed version over here.
please help me,
i want to open all outgoing links in a thichbox, and my outgoing links are my permalinks itself i.e my post titles , i need some thing, please help me
all that seems to be correct but you could check whether the expert mode is activated on the plugin’s settings page; more on that in the FAQ. Furthermore it could be an incompatibility with another JavaScript framework and you will have to make sure that ThickBox is able to work correctly; using FireBug for Firefox may be a good starting point.
Thanks for the response – actually, it turns out that I had forgotten to include wp_footer() in my footer.
But on another note, if I check the “Use script and style bundled with WordPress” box, the images used for the Close button do not appear. Checking with Firebug, the URL for this image source appears to be “../wp-includes….. blah blah”.
The images are there, but if I am using pretty permalinks (ie, not in the root or 1 sublevel down), ../ does not create the right URL for these images. Where do I change this to be /wp-includes instead?
For example, if I am on a page http://www.oia.co.za/films/buffering/, the close button URL is http://www.oia.co.za/films/wp-includes/js/thickbox/tb-close.png, when it should be http://www.oia.co.za/wp-includes/js/thickbox/tb-close.png
I’ve seen the issue regarding the broken link to the close image on various blogs but it seemed to be a more general problem related to the specific installation of WordPress. That said, the plugin simply uses the scripts that come with WordPress and doesn’t change them in any way. Adding rewrite rules to the htaccess file works around this issue and has worked for me:
RewriteCond %{REQUEST_URI} !^/wp-includes/.*/loadingAnimation.gif$ RewriteCond %{REQUEST_URI} ^.*/loadingAnimation.gif$ RewriteRule ^.*loadingAnimation.gif$ /wp-includes/js/thickbox/loadingAnimation.gif [L] RewriteCond %{REQUEST_URI} !^/wp-includes/.*/tb-close.png$ RewriteCond %{REQUEST_URI} ^.*/tb-close.png$ RewriteRule ^.*tb-close.png$ /wp-includes/js/thickbox/tb-close.png [L]This might be a hack but I haven’t had the time checking this out in more detail yet. Anyway, it works
checking my error log i found the following entry:
[warn] mod_fcgid: stderr: PHP Notice: Use of undefined constant thickbox_init – assumed ‘thickbox_init’ in [...]/wp-content/plugins/thickbox/thickbox.php on line 138
It’s still working, just wanted to let you know.
PHP5/MySQL5, WP 3.1 + thickbox 1.5.
Thanks for the plugin!
Leave a Comment