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.

Circumventing the inclusion of jQuery

If you’ve already got jQuery, the CSS or JavaScript for ThickBox somewhere inside your theme, you can use the following switches to control the inclusion of the aforementioned snippets:

  • INCLUDE_THICKBOX_CSS
  • INCLUDE_THICKBOX_JAVASCRIPT
  • INCLUDE_JQUERY

Just open the file thickbox.php and change the value for (some) of these properties to false. Deactivating everything would make this plugin quite pointless.

Example

A simple gallery of images might look like this:

MumsFlowerLadybugPlant

An iFrame is easy too.

50 comments ↓

#1 Lee on 02.12.08 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.

#2 » Blog Archive » ThickBox on 02.14.08 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. [...]

#3 amigib on 02.16.08 at 9:06 pm

same here :/

#4 Christian Schenk on 02.18.08 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.

#5 sahil on 02.18.08 at 1:23 pm

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

#6 ginny on 03.04.08 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!

#7 Christian Schenk on 03.04.08 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.

#8 Markel on 03.15.08 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.

#9 Markel on 03.15.08 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?

#10 Markel on 03.15.08 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!

#11 Amy Mahon on 04.03.08 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…

#12 Christian Schenk on 04.06.08 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.

#13 justin on 04.07.08 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.

#14 Tico on 05.05.08 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?

#15 Christian Schenk on 05.06.08 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.

#16 Emil on 05.13.08 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.

#17 Christian Schenk on 05.13.08 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.

#18 Inder on 05.28.08 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

#19 Christian Schenk on 05.29.08 at 3:13 pm

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

#20 rudy on 06.04.08 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.

#21 Christian Schenk on 06.04.08 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.

#22 Essential WordPress Plug-ins (urbanmainframe.com) on 07.05.08 at 9:08 pm

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

#23 morganfardo on 07.19.08 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

#24 Christian Schenk on 07.20.08 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.

#25 Nico Schulze on 07.26.08 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

#26 Christian Schenk on 07.26.08 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.

#27 » Blog Archive » How to make the gallery images by Thickbox plugin. on 08.02.08 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 [...]

#28 Rudy on 08.08.08 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”?

#29 Rudy on 08.08.08 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/

#30 iTwins on 08.12.08 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!

#31 Christian Schenk on 08.13.08 at 8:53 am

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

#32 iTwins on 08.16.08 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.

#33 Webrocker » Ausputzen im Codegebälk on 08.23.08 at 5:34 pm

[...] hatte ich das Plugin “Thickbox” im Einsatz, dank der oben beschriebenen Schritte ist das nun nicht mehr nötig. Das [...]

#34 Webrocker on 08.24.08 at 11:42 am

Hi Christian, danke für den Kommentar!
Vielleicht wäre es eine einfache Lösung, eine Option im Plugin einzuführen, die es ermöglicht, die thickbox.js und jQuery.js Einbindung zu deaktivieren - für den Fall, dass man beide Bibliotheken schon selbst im Header eingebunden hat. So würden sich die in dem Fall unnötigen doppelten Einbindungen sparen.
Viele Grüße und danke für das coole Plugin!
Tom

#35 Christian Schenk on 08.27.08 at 9:57 am

Hi Tom,
have a look at this new feature.

#36 Webrocker on 08.27.08 at 4:02 pm

Christian, many thanks, this is just what I needed…
Again thanks for this cool plugin and your work!
- Tom

#37 pennywise on 08.27.08 at 7:21 pm

Hi,

I don’t really know why, but it does not work anymore.

I have WP 2.6.1 and Thickbox 1.2.1. I’ve added the ‘class=”thickbox”‘ to each a-tag, but it’s just not working.

What kind of CSS or Script must be in the head-part of the document, that thickbox is working?

#38 pennywise on 08.27.08 at 7:23 pm

ok, sorry for that. my design that I’ve changed recently made it not working. Nothing wrong with the script :)

#39 juan on 08.29.08 at 1:45 pm

Hi, I dont know why, but the thickbox for my images are working but for the ajax content no.
Could you please take a look:

images: on the column “VER”

ajax content: column “+ info”

the web
http://tinyurl.com/6f2v7h

thanks a lot, have a nice day :)

#40 Christian Schenk on 08.30.08 at 3:44 pm

Hi Juan,
hm, the markup looks valid but it doesn’t work for me either. Since the page has JavaScript errors, maybe you should debug those with FireBug first.

#41 Chris Homan on 09.24.08 at 7:54 am

Hey There,

I came across this thread, and was hoping someone could help, im going crazy! I’ve been developing a site with jQuery tabs, innerfade, and swfObject, with much success. My plan was to integrate thickbox for the individual images, but for some reason, i can’t even get thickbox to kick in. The browser just goes right to the image in a new window. I know it’s something silly, could anyone help me out? I’ve worked with lightbox quite a bit, but even that wouldn’t work when i tried integrating it onto the page. Right now i’m just testing on one page, the first thumbnail (phoenix adult), that should definitely be doing some thickbox magic…have a look at the code…

http://dev.creativehinge.com/portfolio_temp.php

#42 Chicoplay on 09.29.08 at 9:09 pm

Hi Christian,

Do you know if is any way to use Thickbox with video tutorials like they do it in camtasia hompage?

Thanks.

#43 Christian Schenk on 09.30.08 at 5:49 pm

Hi Chicoplay,
I’ve added an iFrame example for you here. Read more about this over here.

#44 Thunfischmundgeruch » Blog Archive » Problem(e) gelöst on 10.05.08 at 12:33 pm

[...] mal aufgeräumt, unter anderem habe ich das “NextGEN Gallery” Plugin entfernt und das “Thickbox” Plugin installiert und stellte fest das ein Konflikt zwischen Thickbox und WP Grins besteht. Also habe ich [...]

#45 Zach Blank on 10.06.08 at 7:08 pm

Hey, Great plugin!

I think there is a minor bug with the loading gif and using pretty permalinks. With pretty permalinks the relative path to the loading gif changes. I am using smoothbox and updated smoothbox.js on line 53 to read:

$(’TB_load’).innerHTML = “”;

instead of:
$(’TB_load’).innerHTML = “”;

#46 DeeQuu on 10.28.08 at 11:33 am

I would have posted this for the official website, but it requires registration - so sorry for this if this doesn’t belong here.

My problem was a box that contained Inline Content and I wanted Next and Previous links for it. The thickbox removes the “original content” and puts it into TB_ajaxContent. So I had to make some changes into thickbox.

First: I have divs id=”x1″, id=”x2″, and so on. The link in the original thickbox link is &inlineId=x1, and so on. In the divs, I have next and previous links onclick=”changeContent(’x3′);” and onclick=”changeContent(’x1′);” (this is div id=”x2″). The function

function changeContent(fieldName1){
$("#TB_ajaxContent").empty();
$("#TB_ajaxContent").prepend($("#"+fieldName1).html());
return false;
}

After this I found out that thickbox empties the “original div” - SO in thickbox.js (not compressed) I changed:

if(url.indexOf('TB_inline') != -1){  
          $("#TB_ajaxContent").append($('#' + params['inlineId']).children());
          $("#TB_window").unload(function () {
            $('#' + params['inlineId']).append( $("#TB_ajaxContent").children() ); // move elements back when you're finished
          });
          tb_position();
          $("#TB_load").remove();
          $("#TB_window").css({display:"block"}); 
        }

to:

if(url.indexOf('TB_inline') != -1){  
 var cloneableDiv = $('#' + params['inlineId']).clone(true);        $("#TB_ajaxContent").append(cloneableDiv.children());
          tb_position();
         // $("#TB_load").remove();
          $("#TB_window").css({display:"block"}); 
        }

Hope this helps someone.

#47 sleek on 11.13.08 at 5:14 pm

I am grateful to you for this. For last 3 days I had wrecked my brain with nextgen and this simple code solved my problem in seconds!!

#48 Michael Erb on 11.13.08 at 8:04 pm

Because of validation errors with nextGEN Gallery, which uses thickbox, I’d like to use smoothbox. But there is scant information on how to implement this. Anyone able to help explain the install procedure to do this for WordPress?

I’ve got nextGEN Gallery installed in plugins and it’s working fine, except for the multitude of validation errors. I’ve downloaded smoothbox.css, smoothbox.js and loading.gif

I have no clue where to place these files so that nextGEN can use them instead of Thickbox. I tried just placing them in the nextgen-gallery -> thickbox directory and then seeing if I could select smoothbox in the nextGEN wordpress preferences Gallery -> Effects -> Custom but didn’t have any luck with that. I’m lost, dazed and confused.

#49 Christian Schenk on 11.15.08 at 2:57 pm

Hi Michael,
this isn’t an extension to NextGen Gallery and I can’t help you with that plugin. Go to this website and ask your question there.

#50 jQuery Konflikt mit Lightbox / Thickbox dank prototype.js on 11.30.08 at 5:02 pm

[...] jQuery.js, welches artverwandt zu prototype.js ist, welches Plugins wie Lightbox, Greybox oder auch Thickbox nutzen. Diese beiden Bibliothekdateien kommen sich bei paralleler Anwendung in die [...]

Leave a Comment