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

  1. Is your markup correct? Have a look at the examples and learn how to supply markup ThickBox understands.
  2. You had ThickBox on your site and switched to Smoothbox and now it isn’t working? Don’t forget to set the class to smoothbox instead of thickbox in the HTML markup. In this regard, the libraries aren’t compatible with each other.
  3. Is the CSS and JavaScript included in your page? If you enabled the expert mode don’t forget to add the custom field thickbox to your page. Finally, make sure your theme has calls to wp_head and wp_footer in header.php and footer.php respectively.

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:

  1. download the uncompression version of ThickBox from here.
  2. do a search and replace, so everything fits your needs. For example, change close or Esc key on lines 128, 196 and 204.
  3. optional: compress the JavaScript with a tool.
  4. 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 head element:
    <script>
    function showThickbox() {
      $(document).ready(function() {
        tb_show("Page", "somepage.html?height=200&width=400", "");
      });
    }
    </script>

    Adapt Page and somepage.html and the following parameters to suit your needs.

  • Add this onload="showThickbox()" to e.g. the body element. 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:

MumsFlowerLadybugPlant

An iFrame is easy too.

225 comments ↓

  • Lee says:
    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.

  • […] 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:
    same here :/
  • 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:
    plugin installed n activated…image opening in new window…help!!!
  • ginny says:
    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!

  • 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:
    I’m really in despair. I’ve done all what is required to install this plugin, but it doesn’t work.
  • Markel says:
    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:
    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:
    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…
  • 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:
    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:
    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?
  • 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.

  • Emil says:
    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.

  • 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:
    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

  • Hi Inder,
    sounds great but might be hard to implement. If anyone wants to implement this feature contact me.
  • rudy says:
    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.
  • 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.
  • […] ThickBox: Embed ThickBox into your posts and pages. […]
  • morganfardo says:
    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

  • 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:
    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

  • 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.
  • […] going to show how to make the gallery images by the great plugin, Thickbox. I will demonstrate step by step as following […]
  • Rudy says:
    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:
    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:
    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!

  • Hi iTwins,
    a good workaround might be Google Analytics or any decent logfile analyzer, e.g. AWStats or Webalizer.
  • iTwins says:
    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.

  • […] hatte ich das Plugin “Thickbox” im Einsatz, dank der oben beschriebenen Schritte ist das nun nicht mehr nötig. Das […]
  • Webrocker says:
    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
  • Hi Tom,
    have a look at this new feature.
  • Webrocker says:
    Christian, many thanks, this is just what I needed…
    Again thanks for this cool plugin and your work!
    – Tom
  • pennywise says:
    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?

  • pennywise says:
    ok, sorry for that. my design that I’ve changed recently made it not working. Nothing wrong with the script 🙂
  • juan says:
    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 🙂

  • 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.
  • Chris Homan says:
    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

  • Chicoplay says:
    Hi Christian,

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

    Thanks.

  • Hi Chicoplay,
    I’ve added an iFrame example for you here. Read more about this over here.
  • […] 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 […]
  • Zach Blank says:
    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 = “”;

  • DeeQuu says:
    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.

  • sleek says:
    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!!
  • Michael Erb says:
    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.

  • 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.
  • […] 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 […]
  • Wilson says:
    I like this plugin, but in my blog i have many images.

    If i install this plugin, all my imagens don’t have class=”thickbox”

    How to add this for all images ??

  • Hi Wilson,
    there’re various plugins that do a search and replace in your content. Use one of these and try replacing img with img class="thickbox" . That will enable the ThickBox effect on all your images.
    Please make a backup of your WordPress database before doing this.
  • contezero74 says:
    Dear all, I just released a WordPress plugin that fix Thickbox CSS validation problem. You can find it here.

    At the same page, you can download a .zip file with an alternative CSS file and a Javascript that you can use to fix the problem if you don’t use WordPress.

    cheers

  • Hi contezero74,
    instead of fixing Thickbox you can use Smoothbox instead.
  • prateek says:
    the thickbox is working properly in one page but not working on another page even if the code is same <a href=”misc/mid_image/” class=”thickbox” rel=”gallery-plants”><img src=”misc/thumb_image/” height=”100″ width=”100″> what to do please help me out plzzzzzzzzz
  • bit says:
    Hi Christian, I followed your tutorial and video. I have installed and activated thickbox plugin on my wp 2.7. I added thickbox class and created the “thumb” dir. I also created the custom field key – “thickbox” value – “On” but the large image still opened in a new window…what’s wrong?
    Thanx for your attention
    B.
  • Hi bit,
    please send me a link to the page with the ThickBox and I’ll have a look…
  • bit says:
    Hi Christian, sorry for my late reply.
    Here it is the URL http://www.hiphopconnection.it/v3/category/info
    Click on the last image with the black cat “Bronx”.
    You can see the “thickbox” class from the browser’s source code.
    Many thanx
    B.
  • Hi bit,
    although the CSS in the HTML head is present the JavaScript in the footer is missing. Check whether there’s a call to wp_footer() in the footer.php of your theme – if that’s not the case, you’ll have to add it.
    BTW: the markup of your site is totally broken; validate with validator.w3.org. Have a look at line 54: seems like another call to wp_head() in your theme. Try fixing this too.
  • bit says:
    Ok Christian, i’ll try to do everything and I let you know.
    Many thanx again.
    B.
  • Courtney says:
    Hello,

    I have a new WordPress site I’m working on — version 2.7 — and I’m wondering if this still works in this version? I did exactly as instructed — activated it and tried to implement a simple image thickbox example. However, nothing happens. I’ve tried hardcoding the css and js references in the header myself but agai, nothing. Am I missing something obvious?

    Wait, I got it. The js had to be in the footer — and wasn’t be included in mine for one reason or another.

    My next question then is — can Quicktime movies be used here? So far it doesn’t seem to work, but I thought I’d check.

    Thanks, C

  • Hi Courtney,

    can Quicktime movies be used here?

    Sure: use an iFrame for this. Have a look at my example on this page.

  • Courtney says:
    How can I change the text in the box that says “Close or Esc Key?”
  • Hi Christian, I’m using thickbox for the second time in WordPress. The first time (WP 2.6.1, TB 1.2.1) I had no problems (http://www.yogawest.ca/yoga-class-schedule/ – click any of the instructor names)

    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

  • Hi 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.
  • Ian says:
    Hi Christian,

    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.

  • Hi Ian,
    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.
  • Michael says:
    Dear Christian,
    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
  • Hi Michael,
    check out this new section to learn how to do this.
  • Hello Christian,

    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

  • Hi Peter,
    there’re some validation errors on your site, i.e. you put br tags inside some title attributes – maybe that’s the reason for these rendering issues. Although that’s just a guess I would try to remove the validation errors.
  • Thanks Christian, very good point. I removed those errors, and indeed, it fixed some of the display issues in Firefox.
    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.

  • Hello Peter,
    I’d like to leave the comment intact for future reference.

    It would be interesting, however, to see whether there isn’t a way of positioning the window without having to specify its height

    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.

  • Adam says:
    Hey christian I can’t seem to get anything to display inside the thickbox. It just appears white
  • […] Plugin Ajax Edit Comments und  Lightbox (oder auch Greybox bzw. Thickbox) laufen seit einiger Zeit nicht mehr zusammen. Mit Ajax Edit Comments kann man seine Kommentare […]
  • Great Stuff.. thanks from Indonesian People 🙂
  • Louise says:
    There is a problem with this plugin and larger images in Internet Explorer 7 – it positions the images off the page. I fixed mine as I found an uncompressed version of ThickBox 3.0 that seemed to work for Internet Explorer 7 outside of WordPress, then compressed the JavaScript and uploaded it to the WordPress plugin folder which gets rid of the strange characters. But your default might still need looking at?
  • Hi Louise,
    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.
  • Neal says:
    Hi Christian, I seem to have a problem with the plugin after I upgraded today. I found when I took out the rel= attribute it works again but can’t go prev and next. Could you please help.
  • Hi Neal,
    I’ve just published a new release that fixes this problem. Sorry for the inconvenience.
  • Neal says:
    Worked like a charm, Thanks Christian!
  • Rahul says:
    Looks quite cool. Cheers mate.
  • Dean says:
    If you want to use WordPress’ “Gallery” shortcode in the post- the following code will add the thickbox class to attachment link automatically.

    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.

  • Hi Dean,
    thanks for the hint!
  • Rolograaf says:
    Please help me out. Thickbox is working but landscape pictures get scaled to a max height of 490px, while the width remains the original size. So a normal landscape picture shows up somewhat square and disformed.
    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?

  • Rolograaf says:
    Thanks for the tip! The CSS of Noctural theme had a max-width on the image, so that users would not mess up the lay-out.

    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.

  • narnigrin says:
    Hi!
    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_EVERYWHERE to false. 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.

  • Hi narnigrin,
    could you please have a look at your theme’s footer.php and make sure that there’s a call to wp_footer somewhere? If it’s not there add it and the JavaScript will be included in your page.
  • narnigrin says:
    @Christian: wp_footer is being called; in fact the same footer.php is used on both pages (the one where the javascript is included and the one where it mysteriously isn’t). The main difference between the working and the non-working page, as I can see it, is that on the working page, the sidebar isn’t called.
  • […] ThickBox ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is […]
  • I’m wondering how to style the link that opens the inline content I’ve implemented at http://www.arborhealing.com/

    I’ve tried adding thickbox.css that 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.

  • Hi Shawn,
    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 file thickbox.css. As for styling the link try adding a style attribute to the corresponding a element.
  • I think I need to switch to your plugin 🙂

    I just searched the web for thickbox plugin but it does look like I’m using another (with no styles apparently).

  • […] WordPress ThickBox plugin A plug-in for creating the Thickbox photo style. It also includes instructions for switching to the W3C-valid Smoothbox, along with some other useful modifications. […]
  • […] WordPress ThickBox plugin A plug-in for creating the Thickbox photo style. It also includes instructions for switching to the W3C-valid Smoothbox, along with some other useful modifications. […]
  • […] WordPress ThickBox plugin A plug-in for creating the Thickbox photo style. It also includes instructions for switching to the W3C-valid Smoothbox, along with some other useful modifications. […]
  • […] WordPress ThickBox plugin A plug-in for creating the Thickbox photo style. It also includes instructions for switching to the W3C-valid Smoothbox, along with some other useful modifications. […]
  • […] WordPress ThickBox plugin A plug-in for creating the Thickbox photo style. It also includes instructions for switching to the W3C-valid Smoothbox, along with some other useful modifications. […]
  • Nathaniel says:
    Question for you: I’m using the plugin to display html files on this page: http://www.capitalcitychristianchurch.org/?page_id=645. whenever you click on the link, however, it displays two x’s. I can’t figure out how to get rid of it. I’ve tested the page in both ff and ie with the same response. Any insight?
  • Hi Nathaniel,
    have a look at the source code for this particular page and you’ll see that ThickBox gets included from various locations, i.e. default WordPress and one from wpng-calendar.
    If you’d make sure that ThickBox would only run once the extra x would disappear; I’ve just tested that.
  • I am using Thickbox to show a video in an iframe. Works great except it messes with my wordpress templates css. It keeps the top navigation bar and RSS feed popups from showing. Any ideas. I tried changing it to the expert mode by changing line 40 to false and then adding a cutom field for thickbox and value on, but nothing happened.

    Appreciate the help.

  • tommylee says:
    Jason,

    Video is Flash? if so you need to set param ‘wmode=transparent’

    Hope that helps.

    T

  • Scott says:
    Thanks a ton for showing the onLoad event for the ThickBox. I have tried about 4 different examples of something similar with no luck and yours worked perfectly.

    Thanks!

  • […] Plugin WordPress ThickBox plugin by Christian Schenk Tags: Album, Gallery, Plugin, SmoothBox, Thickbox, […]
  • Tom B says:
    Great plugin.

    I have a strange problem that i’m unable to track, maybe someone here can help –
    The thickbox works but the “loading” image does not appear.

    When I first added thickbox to my site, it worked perfect.

    I then made two changes:
    I’m passing thickbox width and height parameters.
    I Edited thickbox.js to change the “Close or Esc” text (like in the guide here).

    Any ideas?

  • Tom B says:
    Found the problem – at the top of thickbox.js i had to change the path to the loadinAnimation image.

    That was one wasted hour.

  • Justin Adie says:
    Hi Christian
    i’m having an issue using thickbox with ajax content. the thickbox is delivering the content to the page as
    TITLE
    message body
    TITLE
    No content

    so the total thickbox size is twice as high as it should be and there is a redundant title line and a big blank space at the bottom.

    there is nothing untoward in my server code. for the time being it just looks like

    die ('foobar');

    i am using the latest version of your plugin together with WP 2.7.1.
    thanks for any assistance you can offer.

    Justin

  • pixelboy says:
    Ive included this on my blog but even if I untick the “Include jQuery:” option it is ticked when I revist the options.

    Am I doing something wrong?

  • Hi pixelboy,
    this might be a problem with the plugin. I’ll have a look at it soon and include a fix in the next release.
  • Lloyd says:
    When I use smoothbox the window is not centered. Any way to have it centered? The thickbox version centers.
  • Hi Lloyd,
    I’ve tested both versions and both are centered here. Have you tried this on another theme? Maybe your theme’s stylesheet is interfering here.
  • Thea says:
    Hi Christian,
    I too can’t turn off the jQuery option in the settings…it’s set to “true” no matter what. Unfortunately, this completely breaks the front page of my blog.

    Is there a way I can turn it off within the code? Or can I get a copy of the prior version of Thickbox somewhere? I can’t really let this sit until a new release…

  • Hi Thea,
    I’m sorry for the trouble.
    Earlier versions of the plugin are available here. If you’d like to change it in the code, search for “jquery” and comment out the corresponding lines.
  • Thea says:
    Thanks Christian,
    I’ve downgraded to v1.3.1 until there is a fix available. I’ll look forward to v1.4.1 🙂
  • Amber says:
    Hi Christian,

    Thanks for this plugin, it does what I need it to very simply! The one issue I’m running into is that when users running Safari open an image in my gallery, it opens a second instance of the image below and to the right. (example can be found here: http://tinypic.com/r/9itf6x/3) I followed the examples listed on the page but am not sure where I am going wrong at. Any ideas would be greatly appreciated! 🙂

  • Matt says:
    The thickbox.js isn’t being included into my header. I’m not sure what’s going on, any suggestions?

    http://www.relentlesshosting.com/~westray/nature-gallery/

  • Hi Matt,
    due to performance issues the JavaScript won’t be added to your site’s header but footer.
  • ffff says:
    Howdy howdy howdy,

    I’m not sure if this is something that can be done with the plugin, but figured best to ask here first.

    I use thickbox to open both images that are displayed in posts, as well as ones I simply refer to in text links.

    With images, WP has an advanced tab that allows me to edit the links class, ref & title, making it super easy to have it open in a thickbox.

    With text links, there is a dropdown for CSS classes, but thickbox is not listed there. There is also a spot for title.

    To add the thickbox class & rel information, I have to switch to html mode and edit it directly. It’s not the worst thing in the world, but if there’s a way to make the plugin include these in the visual editor, that would be awesome.

    Thanks!

  • Hi ffff,
    in fact, that’s a great idea and I’ll put it on my todo list. Since I’m very busy right now I can’t promise to add this right now but I’m planning to package a new release next month.
  • ashutosh says:
    Hi Christian,
    Thanks for this plugin.I have installed the pluggin and now i don’t want to include the pluggin in each and every page,so i enabled expert mode and added the custom field thickbox and value {on} to one of my page.But my nextgen gallery still don’t show up.I am using external flashviewer for nexgen gallery named tiltviewer.

    Note-When i disabled the expert mode the gallery shows up but my parent pages don’t show up.

  • Hi ashutosh,
    although I haven’t had a look at your site I guess this is some kind of JavaScript error. For instance you should make sure that jQuery will be included only once on your page.
    Regarding your note: if everything else seems to work fine with expert mode disabled try fixing the thing with your parent pages.
  • ashutosh says:
    Thanks Christian,
    It worked liked charm
  • ffff says:
    Oh, ps. You may have already fixed this but I came across a problem with this plugin a while back. Basically using an old version of thickbox.js. I presume the update you’re working on has the most current version, but figured I’d just bring it to your attention, just in case.

    Detail can be seen in the support ticket: http://wordpress.org/support/topic/281780

  • Hi 4f,
    thanks for the hint, very appreciated! I’ll have a look at the support ticket and I’ll make sure that the new version of the plugin uses the latest and greatest version of ThickBox.
  • Greg says:
    Tried the plug-in but couldn’t get it to work. I’ve used thickbox with static HTML before, and I just used a known-working piece of sample code.

    Still no dice, though. The behaviour is simply that the javascript isn’t being loaded and therefore the link target isn’t being “thickboxed”.

    Which leads me think that it’s something to do with the way the includes are being done.

    Since thickbox and mootools and jquery are all included with WordPress core as of 2.8.x., is it possible that your include mechanisms are in conflict with WordPress?

    My template page does not overtly call for those scripts to be loaded by default, which makes me wonder if I need to include them in my header.php…? Which confuses me a bit since I think the main purpose of the plug-in was for people to avoid needing to include the javascripts manually. 😉

    Pointers?

    Greg

  • Hi Greg,
    the plugin doesn’t use the default mechanism of WordPress to load the JavaScript/CSS. It was implemented this way because the plugin should allow you to select different versions of ThickBox, i.e. an english one, one with german text or even SmoothBox which is very similar to ThickBox. Another reason for this behaviour was the idea to put the CSS into the HTML header and the JavaScript somewhere at the bottom of the page; this should speed up loading of the page.
    If the theme or some other plugin already adds jQuery or ThickBox to a page, the plugin won’t notice it and you’ll end up with ThickBox included twice – this is something a future version should fix.
    Anyway, just make sure that your theme has got calls to wp_head and wp_footer in the files header.php and footer.php respectively. If that’s the case the plugin should work just fine.
    BTW: Looking at your site shows me that the frontpage includes jQuery three times; maybe this causes the plugin to fail.
  • Greg says:
    Interesting that JQuery is loaded 3 times on that site! I haven’t really investigated that one.

    The site I’m actually working on is a corporate site, so unfortunately there’s no public link to it right now. Looking at the source code post-render (ie. after all the includes are done) and that page only includes jQuery once, which is a manual include. Then I see only one include for your plug-in, which points to the .php.css file.

    I call wp_head and wp_footer in the header and footers respectively. Still no dice.

    I’ll drop you a confidential note as well, in which I can share some of the source code so that you’re not in the dark. 😉 Thanks for your time.

    Greg

  • Nate says:
    Where are the previous and next buttons? I see them on the plug-in page screenshot, but I don’t see them on my site. What’s up?
  • Hi Nate,
    have you had a look at the examples here? It seems that you’re looking for the description under Gallery Images. Don’t forget the rel attribute.
  • Nate says:
    Thanks, Chris, but I went with another plug-in. I wanted the next and previous arrows on either side of each image. And yes, it was the rel attribute I needed, but I didn’t see anything about needing that in your instructions. I just found it as a link in the Help paragraph. You might want to make that more clear, as it’s a key part of the code needed to make this work.
  • Hi Nate,
    since the instructions for ThickBox can be found on a separate website I haven’t copied those to my page. All these questions aren’t really related to the plugin but ThickBox itself, so I think it’s just okay to read about this stuff on the ThickBox page.

    Anyway, if you were able to do what you want with another plugin that’s fine too.

  • Ty Cammack says:
    Hey, I appreciate your efforts with thickbox. I’m having a hard time getting it all to come together – I’m trying to get youtube videos to play in a nice thickbox as your photos do. I’ve messed around with it on my site a lot. Could you include some instruction on how to get youtube videos to display using the plugin? That would be greatly appreciated by me and others, as I see there is no clear solution out there.

    Thanks!

  • Hi Ty,
    this is a quick (read: not that fancy) way to do this but here you go:

    1. open a text editor and enter the following HTML markup:
      <html>
      <head>
      <title>Video</title>
      </head>
      <body bgcolor="#000">
      <!-- code for video goes here -->
      </body>
      </html>

      Save the file to, say, video.html. Adjust the background color to suit your needs by changing the bgcolor attribute of the body element.

    2. replace the HTML comment inside the body element with the code that embeds the video; just copy the code from the right panel under the description of the video from the YouTube website.
    3. upload the file to your webserver via FTP or similar. If you don’t know how to do this use the media library that comes with WordPress to upload the file.
    4. advise ThickBox to show the file’s content with a link similar to the following:
      <a href="video.html?KeepThis=true&amp;TB_iframe=true&amp;height=480&amp;width=600">iFrame</a>

      Make sure that the location to the HTML file you uploaded earlier is correct.

    You can repeat this process for every video or in case you know a bit PHP you can use one script that displays the right video given some parameter.

  • Skawao says:
    Problem with Kapersky anti-virus; thickbox.js is detected as Trojan-Downloader.JS.Iframe.bxv

    have you heard about this problem ?

  • Josh says:
    Bei mir wird weder js noch jQuery eingebunden. Vielleicht eine Idee woran das liegen kann? Kann ich es zudem irgendwie bewerkstelligen, dass alle geposteten Bilder automatisch im Link die entsprechende class zugewiesen bekommen?

    Danke schon mal…

  • Hi Josh,
    bezüglich JavaScript und jQuery wird nicht eingebunden: Punkt 3 unter Hilfe bist du durchgegangen?
    Wenn du allen Bildern die Class zuweisen möchtest, würde ich dir den Search and Replace Plugin empfehlen, mit dem du bei sämtlichen Links die Class eintragen lassen kannst. Allerdings solltest du dabei etwas vorsichtig sein (Datenbank-Sicherung anlegen).
  • ffff says:
    Just saw the update! Woo!

    Was the text link class addition not a possibility?

  • Hi ffff,
    you’re talking about the rel and not the class attribute, right? Although it’s now possible to let the plugin add the class attributes to images generated by the gallery shortcode I haven’t worked on anything that’s got to do with the visual editor. I’m looking forward considering this for the next release.
  • Gabrielle says:
    Fantastic! This is just exactly what I needed! It took a couple of tries to get it going right. To get it to work I had to uncheck “Use script and style bundled with WordPress” I am using WP 2.8.6.

    My only question and this is really pertaining to WordPress, when someone creates a link there are some default classes in the editor, can “thickbox” be added to that drop down some how? The people I am setting blogs up for don’t understand html, but a simple drop down selection would work for them.

    Again, great plugin!! Thanks!

  • Hi Gabrielle,
    thank you for the short but nice review and yes, I’m looking forward to extend the rich text editor that comes with WordPress to make adding the class easier for everybody. This will be packaged into the next release which is due at the end of this month or at least early next month.
  • Gabrielle says:
    Hi Christian, thank you for letting me know about the WordPress upgrade. I have needed to have clients change classes on links, but working with code is too much for them. So this is good news. What I like the most about your plugin is that it allows me to use thickbox only on the links I want and not everything on the site. Changing the link class is crucial to having that flexibility too. With the WP upgrade that should be easier for the folks I have using this plugin to enhance a portfolio of their artwork.
  • Doug says:
    Hey, I’m having an issue where this plugin causes a problem with my theme. The theme uses a jQuery Carousel for the front page, and it works fine but when I activate this Plugin it stops working. The plugin itself works fine though when it is active, the carousel just stops working.

    Any ideas on how to fix this? The theme loads the following javascript:

    coda-slider
    jquery.localscroll-1.2.6-min
    jquery.scrollTo-1.4.0-min
    jquery.serialScroll-1.2.1-min
    jquery-1.2.6.min
    preloadCssImages

    Could the .js the plug-in loads be interfering with any of those? The jquery carousel only appears on the front page and I have no intention of using thickbox on the front page, is there any possibility of configuring the plugin to only load on post pages? Is this possible or doable? I have little in the way of php and javascript experiences, so in any sort of response treat it as though you’re talking to a 5 year old haha. Thanks!

  • Ali says:
    Excellent work.
    Very easy to implement.
  • Hi Doug,
    loading jQuery twice isn’t a good idea and may result in this error. Please have a look at the plugin’s option page and check out the help section on expert mode: this helps you to include jQuery and the CSS/JavaScript needed for ThickBox on particular pages only.
  • Doug says:
    Hey thanks for the prompt response Schenk,

    My only concern is I see expert mode mentioned once above but clicking on that doesn’t result in a link, and I don’t see an options page either here or in any of the included files in the plugin. Is there a page I’m missing? This would be exactly what I need, if I can set the default for the plugin to only be turned on when I make a certain change inside of the post in wordpress that would solve all my issues. Thanks!

  • Hi Doug,
    I’ve removed the dangling link you were talking about – the documentation regarding the settings of the plugin can be found on the settings page under Settings – ThickBox. Just click on the little “Help” links.
  • Doug says:
    Thanks, it’s exactly what I needed now! Works great, two thumbs up.
  • 2dot says:
    Hello,

    I keep getting an error when I click on the the thumbnail for the video to open in thickbox. It says “The URL is not valid and cannot be loaded.

    How can this error be corrected?

  • 2dot says:
    The previous error has been corrected. But still no success with the lightbox opening. I am trying to use the YouTube Simple Gallery Plugin, which requires your Thickbox Plugin.

    Please advise as to how to get your plugin to work with the YouTube one? Is there additional code that I need to insert in order to get your Plugin to work?

  • Hi 2dot,
    I haven’t heard of this plugin before, thus never tried it myself. So, I can’t tell you how to get this working. My best guess is that you’ll have to make sure that the links to the videos use the markup required by ThickBox; e.g. the class set to thickbox, etc. To learn more about this, please have a look at the examples that show you how to get ThickBox working.
  • Oliver says:
    Hallo Christian!
    Dein Plugin ist klasse! Die Standardfunktionalitäten habe ich ganz gut im Griff. Jetzt kämpfe ich mit einer speziellen Anforderung, für die ich keine Anleitungen finden konnte.

    Ich will Inline Content ausgeben, wenn auf ein Bild geklickt wird. Meine Versuche, den Quelltext der Examples so zu kombinieren, dass der Link auf dem Bild liegt und der verlinkte Inhalt “Inline-Bestandteil” der Seite ist, sind leider gescheitert. Geht dies grundsätzlich? Was ist zu tun?

  • Hallo Oliver,
    ob der Link nun über ein Bild ausgelöst wird oder einfach per Text sollte meiner Erfahrung nach egal sein. Schau doch mal auf der Admin-Seite des Plugins nach: dort gebe ich (nicht sichtbaren) Inline Content in den ThickBoxen aus, wenn du unter den einzelnen Einstellungsmöglichkeiten auf “Hilfe” klickst. Kannst du es dir dort abschauen?
    Ein anderes Beispiel habe ich gerade nicht zu Hand, solltest du es aber partout nicht zum laufen bekommen, melde dich nochmal bei mir.
  • Kyle says:
    I love the plugin.. however we have had to deactivate it because it causes our picture slider to stop working. Any ideas on how we can get both working?
  • Michelle says:
    Hello! I’m loving your plugin but have a problem. Like Doug, I have a slider on the home page which doesn’t work unless Expert mode is ticked.

    However, I’m also wanting to open popups onload instead of onclick for some pages. I have onload=”showThickbox()” in the body tag for all pages (ie in the template). The popups work when I include the the onload script at the bottom of the posts that I want popups for (so I can select which pages/posts have popups) – but only if Expert mode ISN’T ticked.

    So currently, either the popups work but the frontpage slider doesn’t, OR the slider works and the popups don’t.

    Note that image popups (where you have to click the thumbnail) only work when Expert mode is set to off.

    Currently working on a local installation for a client, so I can’t point you to the site. Using WP2.9.2, and latest Thickbox plugin and Arras theme. I can provide a copy of the generated source if that helps. Thanks!

  • Neal says:
    Is there anyway to remove the Thickbox settings tab in the WordPress administration panel for the role of an ‘Editor’? I don’t want any users messing with these settings.
  • Hi Neal,
    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.
  • asif eminov says:
    Thanks this plugin. I need this plugin. 🙂
  • […] this tutorial you will need to have installed the ThickBox plugin By Christian Schenk.  You will also need a video produced using Camtasia Studio with the embedded […]
  • Scarlet says:
    Finally a plugin that does what it says it will.

    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.

  • Hi Scarlet,
    thanks a lot for this great feedback!
  • elena says:
    i want to send an id trough the url, but when shows me the thickbox, don’t recognize the id, how can i send it?
  • Hi Elena,
    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 am having an issue using ThickBox with the YouTube Gallery Plug-in. The video thumbnail shows up just fine, but when I click the thumbnail to have the video window pop-up, nothing happens. I have checked my html several times and have found nothing wrong. It worked when I first installed both plug-ins but then just randomly decided to stop working. Please help. Thank You.
  • Anne Dougherty says:
    Hi,

    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 says:
    Hi, I’m having similar issues as Kevin above. I am trying to add a video gallery from my YouTube links. The Thumbs show up GREAT but when I click the thumbs, nothing loads. Thanks in advance for your time and consideration!

    -Mark

  • codeman38 says:
    For anyone else whose paragraph spacing is wrecked by adding Thickbox, the following line in thickbox.css is to blame:

    *{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?

  • Hi codeman38,
    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.
  • Huw Rowlands says:
    Hi,

    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

  • Joel says:
    New to WP and php all together. Using Youtube Simple Gallery and i can’t seem to understand how to open my videos within my [youtubegallery] tag with thickbox.. any code suggestion or is there a specific way to do this? thanks!
  • Licinio says:
    Hi! I’m using thickbox and nivoslider and they’re not working well together.

    When nivo works, thickbox doesn’t show the close button.

    When it shows… Nivo stops working… Any ideas?

    Thanks!!

  • Hi Licinio,
    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.
  • Ohad says:
    Hi,
    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
  • Hi Ohad,
    I recommend using Firefox along with the plugin FireBug which helps you debugging problems like this.
  • rafael says:
    am trying to open a html in a thickbox, and always open W=750 h 540, if possible change than value ????
    I use wordpress in localhost . thanks
  • Hi Rafael,
    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.
  • rafael says:
    you are the best ;0) thanks
  • Zak says:
    Hi, just wondering if anyone else has experience issues with thickbox working in FF and not in IE. I am very experienced in the different CSS rendering engines for IE 6 vs FF and have wasted thousands of hours like everyone else writing different markup for both browsers… but this is not CSS related… it seems to not be firing the script at all…
  • Zak says:
    SOLVED – In case anyone else has this issue:

    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!

  • Hi Zak,
    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.
  • Jess says:
    I am having a problem with the thickbox repeating itself. There’s one complete one, but after that there’s no space and the box repeats itself under the first one. How can I fix that?

    Is there a non-minified version of the code that I can edit? There are some things I want to change about the display.

  • Hi Jess,
    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.
  • akshay sharda says:
    hey,
    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
  • Amanda says:
    Thickbox is not working at all on my site. The plugin is activated, I have ticked “Add necessary class to gallery shortcode”, and my gallery shortcode looks like [gallery link="file"], and looking at the code, the thickbox class is successfully added to the anchor tag, but when I click on any of the images, there is no thickbox – the page just loads up the image file as if thickbox wasn’t installed at all. I’m using WP 3.1 and TB 1.5.
  • Hi Amanda,
    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.
  • Amanda says:
    Hi Christian

    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

  • Hi Amanda,
    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 😉

  • marco says:
    Hi Christian,
    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!
  • Orlando says:
    I cant get your plugin to work with Vimeo Simple gallery, can you please help me?
  • jdyck says:
    Can you upgrade your plugin to use the latest jQuery? Thanks.
  • Hi jdyck,
    unfortunately this may be not that easy because ThickBox isn’t developed any further and may not work with the most recent version of jQuery. Nevertheless, I’ll try this and will include an updated jQuery if it’s working without any issues.
    In the meantime you can go to the settings page of the plugin and configure it to use the jQuery that comes with WordPress – this way you’ll have a more recent version.
  • Martin says:
    Still not working at my blog. Can you help me?
  • Rachel says:
    Hello,
    I was having a conflict with Thickbox and a slideshow plugin, and I unticked the jquery checkbox in Thickbox. That made the slideshow plugin work, but Thickbox broke. Then I reverted back (disabled the slideshow plugin, re-ticked the jquery checkbox) and Thickbox is still broken. I can’t figure out why.
    http://www.cobblehill.org – if you click the newsletter button at the top, the sign-up form used to pop up as a thickbox.
  • Rachel says:
    oops, nevermind, i got it– accidentally deleted the wp footer thing
  • Glad to hear that you got it working eventually.
  • Sanford says:
    Christian – thanks for the Thickbox tool – but I am unclear as to why i can not get the content to appear in the Thickbox on my site.

    If you go to my site, you can see the sandwich board in the middle of the page. When I click on the board, the thickbox shows but the content does not. Any idea why?

  • Sarah says:
    I am trying to get this to show captions and not the image name – is that possible? This is the site in question:

    http://theteacupparlour.com/the-collection/

    Thanks!

    Sarah

  • Hi Sarah,
    simply provide the desired caption in the title field of the images. You can either edit them via the Media Library in the WordPress backend or directly when uploading the images to your site.
  • Sarah says:
    Hi there, the caption is in there in the caption field, I just don’t want to have to copy them all over again.
  • Hi Sarah,
    since you’re using the gallery shortcode that comes with WordPress you can either adapt the output of the gallery so ThickBox picks up the correct information or write a small tool that copies the relevant values in the database into the correct locations. Either way it might take some effort getting this just right.
  • Chris L says:
    Am so close….

    I’ve got the plug-in working on my site after using the expert mode…as it disabled the gallery feature when used normally.

    However it now disables the main menu on the thickbox enabled pages.

    Any suggestions as to how I can enable the plug-in without disabling the menu?

    i was originally using the wp-fancyzoom plug in. This works well but makes a double pop-up on my gallery pages. 🙁

    Have tried deleting the link URL from the gallery images using fancyzoom… but the damn links can’t be deleted.

  • Callum says:
    Hi,

    On the website that I provided with this feedback, the thickbox isn’t displaying the images due to the js script calls being called twice, how do I change this to get it to work properly. Its under Portfolio -> Club Flyers, then on the source html page its at the bottom (or nearish)

    Cheers

    Callum

  • Hi Callum,
    please either try the expert mode or the option that advices the plugin to use the JavaScript that comes with WordPress from the options menu which is part of the plugin.
  • Robert says:
    Hej Christian,

    ich möchte gerne Text und Bild zusammen mittels Thickbox darstellen. Der Text soll unter das Bild und mit Absätzen (also in Sinnabschnitte unterteilt) dargestellt werden.

    Wie lässt sich das bewerkstelligen? Irgend eine Idee? Ich habe schon alles mögliche ausprobiert, die Thickbox soll das ja von Haus aus können. Ich weiss nur nicht wie… 🙁

    Wenn du Tipps hast, ich wäre dir unendlich dankbar! 🙂

  • Hi Robert,
    das geht am besten mit dem sogenannten Inline content, den Du auf hidden setzen kannst; Infos dazu gibt es hier. Wenn Du unter Einstellungen – ThickBox die Optionen des Plugins aufrufst, solltest Du die Hilfe Links sehen: diese sind genau mit dieser Funktion gemacht – vielleicht kannst Du es dir dort ja abschauen.
  • Hello there!

    The thickbox is working in my blog. But it caused a bit of a problem in the margin of my paragraphs.

    So what I did is edit the css but now, my footer is not adjust to the very bottom of the page.

    I hope you get what I mean. I need help in this one

  • Hi Christian,

    I was able to solve the problem. I’m all good for now!

  • Md says:
    I have the same problem as Jayo but unfortunately he didn’t give a solution. When I activate ThickBox, it messes up the margins for paragraphs, media, etc.
  • Dear Md,
    this is most likely an issue regarding the specific theme you use. Try checking how the CSS selectors for these various margins are implemented and adjust them as needed.
  • Hi Christian,
    ich rufe auf meiner Website eine ThickBox mit Text, Audioplayer und Facebook-Button per Inline Content auf, das ganze funktioniert auch wunderbar, allerdings kann ich die Box zurzeit nur per Klick auf unformatierten Text aufrufen. Gibt es eine Möglichkeit, einen formatierten Text oder gar ein Bild/eine Grafik per Klick auf eine ThickBox zu linken?
    LG
  • Hi Adrian,
    grundsätzlich kannst Du die ThickBox auf beliebige Elemente – sprich Text, Bilder, Grafiken, etc. – aufrufen, so lange das a Element eine Klasse namens thickbox enthält. Vielleicht hilft dir weiter, dass man mehrere Klassen einfach durch Leerzeichen getrennt angegeben kann, also etwa folgendes, sollte es bspw. eine Klasse align-center geben:

    <a href="..." class="thickbox align-center">
      <!-- Beliebiges Element, etwa Text, Bild, etc. -->
    </a>

    Möglicherweise musst Du diese Anpassungen direkt am HTML vornehmen und dazu nicht den Standard-Editor von WordPress nutzen; erreichbar über das Tab “HTML” direkt rechts oben über dem Editor.

  • Pantoeflou says:
    Awesome!!!

    Spent a view days looking for something giving this functionality without braking my theme functions

    Very nice, thanks!

  • Sebastian Schwarz says:
    Hallo Christian!
    Ich möchte ein YouTube-Video in der Größe 960×720 Pixel durch ein Bild verlinken. Am besdten per iFrame – Wie mache ich das?

    …Ergänzung, das Video soll natürlich dann im iFrame laufen, wenn man das verlinkte Bild anklickt.

    LG Basti

  • Hallo Sebastian,
    schau dir am besten die Beispiele an. Dort findest Du Hinweise zum Einbinden von iFrames und wie genau der HTML Code dazu aussehen muss. Zusammengefasst solltest Du ein img-Element mit dem gewünschten Bild mit einem a-Element einfassen, das zum einen die Klasse “thickbox” enthält und zum anderen auf das iFrame verlinkt.
  • Todd Dawson says:
    I’m trying to build sites for artists, and am looking for the best plugin solutions. I see many people use NextGen Gallery, but your post here leads me to think I would only need Thickbox. Is this true?

    WordPress has a warning on your plugin page that the plugin hasn’t been updated in 2 years, and may not be compatible with current versions of WordPress. Will you be updating it anytime soon?

  • Dear Todd,
    if you just need the basic ThickBox functionality and got control over your images, i.e. you can resize and crop them before uploading or using the standard tools that come with WordPress, it’s likely that you just need this plugin. If you’re looking for some extra features you might want to check out NextGen Gallery in more detail.
    It is true that my plugin hasn’t been updated in a while but that’s just the case because there wasn’t a need to update it. Since ThickBox isn’t developed any further and the plugin provides all the features that most of the users and I need I haven’t changed anything in all this time. But it’s still compatible with the most recent version of WordPress.
    Anyway, I just might update the plugin to get rid of the notice on wordpress.org which some people might confuse with the fact that this plugin might not be working anymore.
  • Claire says:
    I’m using Auto ThickBox Plus. I need to ‘Open ThickBox onload instead of onclick’ as mentioned above, but I’m totally new to all this.
    When you say ‘add the following JavaScript snippet to your HTML header, i.e. somewhere inside the head element’, where does this mean exactly? Within the post? Or do I go to the PHP files. Sorry for the dumb question and thanks for the great plugin.
    C
  • Hi Claire,
    you’re right, you need to go to the PHP files of your theme and apply the changes there. Since I’m not familiar with the details of the Auto ThickBox Plus plugin you might want to ask its author and make sure that he maybe hasn’t got a more elegant solution in place already that you can use. If he doesn’t you can still use the above steps to get this working manually.
  • carole says:
    Oh. I thought this used the wordpress [gallery] shortcode. Bummer. What does a person do if changing the html is not an option?

    Wait, I got it. Thanks for the plugin!

  • Hi carole,
    I’m glad that you could figure it out! 😉