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 ↓
In my current install (WP 2.7, TB 1.2.1)the content is not loading into the thickbox overlay when I click on a thickbox enabled image (http://mubi.ca/collaborators/ – click any of the images).
I tried changing the configuration to smoothbox and it loaded the content into the overlay but placed the overlay at the bottom of the page (below the website). As far as I can see everything is the same, except the WP version.
Any suggestions?
thx
Justin
just tested your page with Firefox 3.0, Safari 3.2 and Opera 9.50 and can’t reproduce the problem – everything seems to work fine here.
Love the plug-in but I’m having a couple of issues with it on FF on the Mac.
If you take a look at my main site page (WP-based), when you click to watch any of the videos (an iFrame implementation of an html page with embedded QuickTime file) the audio begins to play, but the video does not load.
It can be sporadic however, sometimes appearing, sometimes not. If you then look at the actual single post page, the QT files loads in just fine.
Obviously there is something in the code on the main index that’s causing a conflict, but I can’t figure out what.
The second issue is a display problem with the QT movie files when the Flash-based Audio Player plugin is directly behind the Thickbox window. This causes the video file to skip and have strange redraw problems.
Image examples of what I’m seeing are here:
Non-loading QuickTime video
http://skitch.com/albo/bnh9p/the-art-of-the-title-sequence
QuickTime and Flash overlay
http://skitch.com/albo/bnh9f/danger-diabolik-opening-title-sequence-the-art-of-the-title-sequence
Thank you for your time.
I could just reproduce this error and opened your page with Safari 3, Firefox 3, Opera 9.5 and IE 6: it just works with Safari. While Firefox displays the ThickBox, Opera and IE won’t even show the desired effect.
I poked around a bit, but wasn’t able to fix this problem. Maybe it has got to do with different QuickTime plugins in the browsers or because your site doesn’t validate (309 errors) or because Safari isn’t just that picky.
I would try fixing all those validation errors or display the video as flash instead; e.g. embedded from YouTube, Vimeo or blip.tv. I never had problems with flash videos so far.
I deadly wish to know how to force thickbox onload of a wordpress page (for login or newsletter subscription). It’s so necessary but I couldn’t find any direct nor indirect solution.
Regards
Michael
check out this new section to learn how to do this.
Thank you very much for this plug-in. I was looking for a simple way to present images in a gallery, and tried half a dozen plug-ins before stumbling upon yours (and applying it here).
It turns out that the simplest ones are often the best!
I just have one question: is there a way to force the whole window to be more “central”? If you take a look at the “Ships” section of the gallery to which I linked, and click on the sixth image, you’ll see that suddenly it goes way too high. How to fix this?
Also, I’ve noticed that it doesn’t render quite so well in Firefox (Opera & Safari render it in the same way, but Firefox puts all the images lower and reduces the size of the frame around the image). Any ideas on how to fix that?
Thank you once again,
Peter
there’re some validation errors on your site, i.e. you put
brtags inside sometitleattributes – maybe that’s the reason for these rendering issues. Although that’s just a guess I would try to remove the validation errors.However, the length of the captions still seems to disagree with Firefox… I’ll try checking the CSS again, to see if there isn’t a height attribute that Firefox uses but that Opera and Safari don’t.
Actually, never mind: Firefox isn’t at all the problem.
The problem is that the floating window’s position is based on the image only, not on the “image + caption”. This means that the image itself is centred, but with a long caption, the whole window won’t be in the middle of the screen.
Any ideas on how to get the “top:50%” property to apply to the whole window?
Solution found, and you can probably remove the previous comments!
So… the problem is that the javascript file sets the height of the window to “c+60?, “c” being the size of the image (I decompressed the javascript to find that out).
Now, this is fine, except when you have big captions, because then you can easily break that 60px limit, therefore making the whole window bigger than it was planned to be. However, when the window grows, its position stays the same, and you can thus arrive at a point where the description goes beyond the available screen in your browser (I’m on a 13” MacBook, so it’s not hard for me to go beyond that limit).
The solution I found was to change that 60 to 150, because it makes most of my “image + caption” couples appear in the middle of the screen.
It would be interesting, however, to see whether there isn’t a way of positioning the window without having to specify its height, because that would eliminate the problem related to long captions.
I’d like to leave the comment intact for future reference.
If you find a solution to this as well I’d be interested to hear about it. Currently I haven’t got that much time to help you figuring this out.
I made sure that the plugin contains the latest version of ThickBox and SmoothBox; just packaged a new release with the most recent versions. I hope this helps.
rel=attribute it works again but can’t go prev and next. Could you please help.I’ve just published a new release that fixes this problem. Sorry for the inconvenience.
function wpf_attachment_link($link) {
global $post;
$link = str_replace("href","class='thickbox' href",$link);
return $link;
}
add_filter('wp_get_attachment_link', 'wpf_attachment_link');
Further, to link thumbnails to images, can use this shortcode [gallery link=image], in the post.
thanks for the hint!
Picture-Properties tell me for example: 800px × 540px (scaled to 490px × 540px)
Portrait pictures have their width limited to 490px and give following properties in an example:
643px × 800px (scaled to 490px × 800px)
See this thumbnail gallerie: http://rolograaf.nl/2009/04/10/10-april-2009-glitterclub-125-jaar-jubileum-paard-van-troje/
What can it be that I do wrong?
Sorry for blaming your plugin…
The page you saw did not load the thumb-gallery, this should be fixed now, and thickbox is working nicely.
I’m having a somewhat random problem with the Thickbox plugin. As I am only using it on two pages, I’ve set
INCLUDE_JS_AND_CSS_EVERYWHEREtofalse. On one of the two pages, I’m opening content in a thickboxed iframe, and it works fine, whereas on the other where I’m just trying to open images, nothing happens (i.e. the images open as normal, no Thickbox). The script doesn’t seem to be included in the source, although the CSS is.I’m using WP 2.7.1 with Thickbox 1.3.1, if it makes a difference.
could you please have a look at your theme’s
footer.phpand make sure that there’s a call towp_footersomewhere? If it’s not there add it and the JavaScript will be included in your page.I’ve tried adding
thickbox.cssthat I found here and it seemingly had no effect on the content (but maybe I did it wrong).I looked at the plugin files and didn’t see where CSS even existed, but I must be missing it (?) or maybe I need to add it elsewhere?
Can you help me to understand how I would style the inline content and the link pointing to this? The link doesn’t seem to respond to other CSS elements I have in the site for link style.
it seems that you aren’t using this plugin, so I don’t know whether the following advice will be of any help to you. You can find the CSS under
wp-content/plugins/thickbox/thickbox, it’s the filethickbox.css. As for styling the link try adding astyleattribute to the correspondingaelement.I just searched the web for thickbox plugin but it does look like I’m using another (with no styles apparently).
Leave a Comment