WordPress ThickBox plugin

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.

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>
<a href="[...]/images/ladybug.jpg" title="Ladybug" class="thickbox">
  <img src="[...]/images/thumbs/ladybug.jpg" alt="Ladybug" />
</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.

Expert mode

If you don’t want to include the CSS and JavaScript for ThickBox in every page on your blog but just on those pages that actually use ThickBox that’s possible too. Just open the file thickbox.php and change INCLUDE_JS_AND_CSS_EVERYWHERE (on line 40) to false.

Now the plugin will not include the JavaScript and CSS in ever page on your website you’ll have to enable it for specific posts or pages. You just have to add a custom field named thickbox with the value set to any non empty string. Once you’ve done that the CSS should appear in the header of your page and the JavaScript in the footer.

This isn’t the default behavior because it caused some hassle. But if you’re running a blog with a serious amount of visitors this will save you a lot of bandwidth.

Using Smoothbox instead of ThickBox

If you’d like to use Smoothbox instead of the original ThickBox, because it’s valid by W3C’s standards, do this: open thickbox.php with an editor and change the value of INCLUDE_SMOOTHBOX to true. Once you’ve done that, the CSS and JavaScript from Smoothbox will be included instead of the original code.

Hint: don’t forget to set the class to smoothbox instead of thickbox in the HTML markup. In this regard, they aren’t compatible with each other.

Example

A gallery of images might look like this:

Tags: javascript, plugin, thickbox, WordPress
Video: Watch this!
Donation: Consider a donation.
Features: RSS, leave a response or trackback.

33 Responses to “WordPress ThickBox plugin”

Lee says:
February 12th, 2008 at 11:44 pm

Hi, really like the simplicity of this plugin but for some reason the thickbox effect isn’t happening - the link is opening in a separate window.

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.

» Blog Archive » ThickBox says:
February 14th, 2008 at 1:03 am

[...] ThickBox is a WordPress plugin that adds the lightbox functionality to images in your posts. You can download it from the WordPress site. I found a little hack was necessary to get it to work as I didn’t fully understand the instructions provided on the author’s website. [...]

amigib says:
February 16th, 2008 at 9:06 pm

same here :/

Christian Schenk says:
February 18th, 2008 at 9:21 am

Hi,
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.

sahil says:
February 18th, 2008 at 1:23 pm

plugin installed n activated…image opening in new window…help!!!

ginny says:
March 4th, 2008 at 3:18 am

I found the answer to the opening in a new window problem: http://wordpress.org/support/topic/143768

added links to the scripts and css in the header and it works.

thanks for a great plugin!

Christian Schenk says:
March 4th, 2008 at 11:28 am

Hi ginny,
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.

Markel says:
March 15th, 2008 at 9:48 pm

I’m really in despair. I’ve done all what is required to install this plugin, but it doesn’t work.

Markel says:
March 15th, 2008 at 9:58 pm

I also added links to the scripts and css in the header as above, but it doesn’t work - the image opens in a new window. What may be the problem?

Markel says:
March 15th, 2008 at 10:14 pm

I’m very sorry for being so impatient and writing that stuff above. I’ve found how to fix it! I both added links in the header and inserted ThickBox compliant markup and now it works ok! Amazing Thanks a lot for this plugin!

Amy Mahon says:
April 3rd, 2008 at 9:36 pm

Everyone who complained about it not working and then inserted the links in the header is totally missing the point of your lightweight plugin. I think you need some better documentation…

Christian Schenk says:
April 6th, 2008 at 2:14 pm

Hi Amy,

I think you need some better documentation…

There’s the howto and a video but I’ll try to improve this.

justin says:
April 7th, 2008 at 10:54 am

Maybe it’s because I’m running 2.5, but your plugin didn’t cut it for me even after following your directions and watching your video. When the majority of your users say it needs improvement, they are usually right.

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.

Tico says:
May 5th, 2008 at 10:08 pm

hello,
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?

Christian Schenk says:
May 6th, 2008 at 6:15 am

Hi Tico,
there’re a couple of things that might go wrong:

the plugins aren’t activated
make sure that there’s a call to wp_head() in the header of your theme and a call to wp_footer() in the footer.
add a custom field named thickbox (smoothgallery) to your post/page or try the expert mode.

Have you read the FAQ and Other Notes? Here, here and there.

baron says:
May 7th, 2008 at 5:13 pm

hi there .thanks for plugin:

Does anybody know if tis script is compatible with Wordpress 2.5.1 ?

Thanks in advance for any help on this!

best regards

Emil says:
May 13th, 2008 at 1:28 pm

Hello,
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.

Christian Schenk says:
May 13th, 2008 at 3:03 pm

Hi Emil,
since you’ll have to modify the JavaScript of ThickBox I guess you’re better off asking Cody Lindley, the author of ThickBox.

Inder says:
May 28th, 2008 at 6:58 pm

hi,

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

Christian Schenk says:
May 29th, 2008 at 3:13 pm

Hi Inder,
sounds great but might be hard to implement. If anyone wants to implement this feature contact me.

rudy says:
June 4th, 2008 at 1:47 am

Is there any chance to include VALIDATED CSS code for the next edition of the plugin. Right now, using the Thickbox plugin breaks my CSS validation.

Christian Schenk says:
June 4th, 2008 at 1:04 pm

Hi Rudy,
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.

Essential WordPress Plug-ins (urbanmainframe.com) says:
July 5th, 2008 at 9:08 pm

[...] ThickBox: Embed ThickBox into your posts and pages. [...]

morganfardo says:
July 19th, 2008 at 2:27 am

Hi!

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

Christian Schenk says:
July 20th, 2008 at 11:18 am

Hi 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.

Nico Schulze says:
July 26th, 2008 at 1:58 am

Hi Christian,

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

Christian Schenk says:
July 26th, 2008 at 5:43 pm

Hi 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.

» Blog Archive » How to make the gallery images by Thickbox plugin. says:
August 2nd, 2008 at 3:20 pm

[...] going to show how to make the gallery images by the great plugin, Thickbox. I will demonstrate step by step as following [...]

Rudy says:
August 8th, 2008 at 12:31 am

Christian, thanks so much for including the smoothbox. Now my site validates both the xhtml and css.

One more question, is there an easy way to find-n-replace all instances of class=”thickbox” for class=”smoothbox”?

Rudy says:
August 8th, 2008 at 12:56 am

Never mind, I found a plugin which does direct mysql search and replace queries. With this plugin I did a search and replace on the content table (all posts and pages) and now I am running smoothbox. Thanks so much.

http://wordpress.org/extend/plugins/search-and-replace/

iTwins says:
August 12th, 2008 at 9:09 pm

Hi, recently I found a great plugin called Ozh’ Click Counter that counts and displays the the number of clicks of an image. I really want both Ozh and Thickbox to work HOWEVER, Ozh is not compatible with Thickbox.

Any idea? Any workarounds is very much appreciated!

Many thanks in advance!

Christian Schenk says:
August 13th, 2008 at 8:53 am

Hi iTwins,
a good workaround might be Google Analytics or any decent logfile analyzer, e.g. AWStats or Webalizer.

iTwins says:
August 16th, 2008 at 4:38 am

Thanks Christian. I guess that’s a No!

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.

Lee says:
February 12th, 2008 at 11:44 pm
Hi, really like the simplicity of this plugin but for some reason the thickbox effect isn’t happening - the link is opening in a separate window.

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.
» Blog Archive » ThickBox says:
February 14th, 2008 at 1:03 am
[...] ThickBox is a WordPress plugin that adds the lightbox functionality to images in your posts. You can download it from the WordPress site. I found a little hack was necessary to get it to work as I didn’t fully understand the instructions provided on the author’s website. [...]
amigib says:
February 16th, 2008 at 9:06 pm
same here :/
Christian Schenk says:
February 18th, 2008 at 9:21 am
Hi,
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.
sahil says:
February 18th, 2008 at 1:23 pm
plugin installed n activated…image opening in new window…help!!!
ginny says:
March 4th, 2008 at 3:18 am
I found the answer to the opening in a new window problem: http://wordpress.org/support/topic/143768

added links to the scripts and css in the header and it works.

thanks for a great plugin!
Christian Schenk says:
March 4th, 2008 at 11:28 am
Hi ginny,
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.
Markel says:
March 15th, 2008 at 9:48 pm
I’m really in despair. I’ve done all what is required to install this plugin, but it doesn’t work.
Markel says:
March 15th, 2008 at 9:58 pm
I also added links to the scripts and css in the header as above, but it doesn’t work - the image opens in a new window. What may be the problem?
Markel says:
March 15th, 2008 at 10:14 pm
I’m very sorry for being so impatient and writing that stuff above. I’ve found how to fix it! I both added links in the header and inserted ThickBox compliant markup and now it works ok! Amazing Thanks a lot for this plugin!
Amy Mahon says:
April 3rd, 2008 at 9:36 pm
Everyone who complained about it not working and then inserted the links in the header is totally missing the point of your lightweight plugin. I think you need some better documentation…
Christian Schenk says:
April 6th, 2008 at 2:14 pm
Hi Amy,

I think you need some better documentation…

There’s the howto and a video but I’ll try to improve this.
justin says:
April 7th, 2008 at 10:54 am
Maybe it’s because I’m running 2.5, but your plugin didn’t cut it for me even after following your directions and watching your video. When the majority of your users say it needs improvement, they are usually right.

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.
Tico says:
May 5th, 2008 at 10:08 pm
hello,
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?
Christian Schenk says:
May 6th, 2008 at 6:15 am
Hi Tico,
there’re a couple of things that might go wrong:
- the plugins aren’t activated
- make sure that there’s a call to wp_head() in the header of your theme and a call to wp_footer() in the footer.
- add a custom field named thickbox (smoothgallery) to your post/page or try the expert mode.
Have you read the FAQ and Other Notes? Here, here and there.
baron says:
May 7th, 2008 at 5:13 pm
hi there .thanks for plugin:

Does anybody know if tis script is compatible with Wordpress 2.5.1 ?

Thanks in advance for any help on this!

best regards
Emil says:
May 13th, 2008 at 1:28 pm
Hello,
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.
Christian Schenk says:
May 13th, 2008 at 3:03 pm
Hi Emil,
since you’ll have to modify the JavaScript of ThickBox I guess you’re better off asking Cody Lindley, the author of ThickBox.
Inder says:
May 28th, 2008 at 6:58 pm
hi,

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
Christian Schenk says:
May 29th, 2008 at 3:13 pm
Hi Inder,
sounds great but might be hard to implement. If anyone wants to implement this feature contact me.
rudy says:
June 4th, 2008 at 1:47 am
Is there any chance to include VALIDATED CSS code for the next edition of the plugin. Right now, using the Thickbox plugin breaks my CSS validation.
Christian Schenk says:
June 4th, 2008 at 1:04 pm
Hi Rudy,
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.
Essential WordPress Plug-ins (urbanmainframe.com) says:
July 5th, 2008 at 9:08 pm
[...] ThickBox: Embed ThickBox into your posts and pages. [...]
morganfardo says:
July 19th, 2008 at 2:27 am
Hi!

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
Christian Schenk says:
July 20th, 2008 at 11:18 am
Hi 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.
Nico Schulze says:
July 26th, 2008 at 1:58 am
Hi Christian,

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
Christian Schenk says:
July 26th, 2008 at 5:43 pm
Hi 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.
» Blog Archive » How to make the gallery images by Thickbox plugin. says:
August 2nd, 2008 at 3:20 pm
[...] going to show how to make the gallery images by the great plugin, Thickbox. I will demonstrate step by step as following [...]
Rudy says:
August 8th, 2008 at 12:31 am
Christian, thanks so much for including the smoothbox. Now my site validates both the xhtml and css.

One more question, is there an easy way to find-n-replace all instances of class=”thickbox” for class=”smoothbox”?
Rudy says:
August 8th, 2008 at 12:56 am
Never mind, I found a plugin which does direct mysql search and replace queries. With this plugin I did a search and replace on the content table (all posts and pages) and now I am running smoothbox. Thanks so much.

http://wordpress.org/extend/plugins/search-and-replace/
iTwins says:
August 12th, 2008 at 9:09 pm
Hi, recently I found a great plugin called Ozh’ Click Counter that counts and displays the the number of clicks of an image. I really want both Ozh and Thickbox to work HOWEVER, Ozh is not compatible with Thickbox.

Any idea? Any workarounds is very much appreciated!

Many thanks in advance!
Christian Schenk says:
August 13th, 2008 at 8:53 am
Hi iTwins,
a good workaround might be Google Analytics or any decent logfile analyzer, e.g. AWStats or Webalizer.
iTwins says:
August 16th, 2008 at 4:38 am
Thanks Christian. I guess that’s a No!

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.