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 ↓
Plugin installed and activated.
Code added to the vertical images here: http://marathonmandesigns.co.uk/wp/?p=48#
Any help would be appreciated.
Thank you.
have a look at the video and you should get it working eventually.
If you still don’t know what to do: leave another comment with more details or write me an email.
added links to the scripts and css in the header and it works.
thanks for a great plugin!
you don’t have to add the JavaScript and CSS manually – the plugin does this for you. Anyway, if you’ve got it working this way and everything works just fine that’s great too.
There’s the howto and a video but I’ll try to improve this.
Your plugin did provide me with a nice library to reference with the WP support fix (code in the header), and I have lightbox. So thanks for your work. Besides, with the code built into the header, I don’t need to add any special fields to use lightbox.
I have tried all the instructions and cannot get neither the thickbox or the smoothgallery working. The plugins dont add its code to the header of footer. What can cause that issue?
there’re a couple of things that might go wrong:
wp_head()in the header of your theme and a call towp_footer()in the footer.thickbox(smoothgallery) to your post/page or try the expert mode.Have you read the FAQ and Other Notes? Here, here and there.
How the plugin could be localized when an image is showed via thickbox (the text under images like “image 1 of 3, full size, close)?
thanks
Sorry I wasnt clear enough. I need the plugin in more than one locale.
since you’ll have to modify the JavaScript of ThickBox I guess you’re better off asking Cody Lindley, the author of ThickBox.
can we add auto script in pages so that each image having link will be treated as a thickbox element and will be zoomify on click.Also On click we will see title on the image top/bottom that can be made as a link to actual location/post.
Thanks
-inder
sounds great but might be hard to implement. If anyone wants to implement this feature contact me.
since the CSS contains some hacks I don’t think that it will validate any time soon. If a new version of ThickBox comes with a better CSS, rest assured that I’ll definitely include it.
Update: I included Smoothbox! Have a look here, if you’d like to activate it.
for me it´s working great in safari, but open in a new page in IE7 and ask to download in firefox…
I copy the code to header and followed the video instructions but it didn´t work.
any clue?
thanks,
Morgan
if you had to copy the code to the header, I guess you did something wrong. Just activating the plugin will do it: the CSS and JavaScript will be included into every page. Then you’ll have to add some ThickBox-compliant markup: for more examples have a look here.
BTW: I’ve tested this plugin with IE6, Firefox 2 and 3, Safari 3 and Opera 9 – so the good news is, that it works with (almost) every browser.
Thanks a lot for the great thickbox! It’s the best I ever found.
Is there a possibility to make the “prev” and “next” link appear all over the left resp. right half of the image like in SmoothGallery? That would make your plugin perfect
Kind regards, Nico
although this may be possible somehow I’m just using the original ThickBox from here – if it gets implemented there, this plugin will have it too.
Since I’m no JavaScript guru, I don’t modify the scripts but use them on an as is basis. So you better implement it yourself or ask Cody Lindley to do it for you.
One more question, is there an easy way to find-n-replace all instances of class=”thickbox” for class=”smoothbox”?
http://wordpress.org/extend/plugins/search-and-replace/
Any idea? Any workarounds is very much appreciated!
Many thanks in advance!
a good workaround might be Google Analytics or any decent logfile analyzer, e.g. AWStats or Webalizer.
I have used all of the mentioned statistics tools and are still using them at this moment however none of them can keep track of clicked files/images. I have even tweaked Google Analytics to record files/images but no can do as it is very inaccurate.
Leave a Comment