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 thoughts on “WordPress ThickBox Plugin”

  2. Pingback: » Blog Archive » ThickBox

  7. Christian Schenk

    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

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

  9. Markel

    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

    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

    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…

  13. justin

    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

    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

    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

    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.

  18. Inder

    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

  20. rudy

    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

    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. Pingback: Essential WordPress Plug-ins (urbanmainframe.com)

  23. morganfardo

    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

    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

    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

    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. Pingback: » Blog Archive » How to make the gallery images by Thickbox plugin.

  28. Rudy

    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”?

  30. iTwins

    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!

  32. iTwins

    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. Pingback: Webrocker » Ausputzen im Codegebälk

  34. Webrocker

    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

  37. pennywise

    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?

  39. juan

    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 🙂

  41. Chris Homan

    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

  44. Pingback: Thunfischmundgeruch » Blog Archive » Problem(e) gelöst

  45. Zach Blank

    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

    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

    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

    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.

  50. Pingback: jQuery Konflikt mit Lightbox / Thickbox dank prototype.js

  51. Wilson

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

  52. Christian Schenk

    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.

  53. contezero74

    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

  55. prateek

    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

  56. bit

    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.

  59. Christian Schenk

    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.

  61. Pingback: Wordpress Plugins for Photo Galleries - Photoblogging Part II : Web Design Resources Blog & Graphics Blog with Lists of Web Site Design Tools

  62. Courtney

    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

  65. Justin Tilson

    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

  67. Ian

    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.

  68. Christian Schenk

    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.

  69. Michael

    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

  71. Peter Craddock

    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

  72. Christian Schenk

    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.

  73. Peter Craddock

    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.

  74. Christian Schenk

    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.

  76. Pingback: wordpress rozszerzenia — m.jacewicz.com

  77. Pingback: Kommentare bearbeiten! | BlogFrosch

  79. Louise

    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?

  80. Christian Schenk

    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.

  81. Neal

    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.

  85. Dean

    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.

  87. Rolograaf

    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?

  88. Rolograaf

    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.

  89. narnigrin

    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.

  90. Christian Schenk

    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.

  91. narnigrin

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

  92. Pingback: The Top 7 Best Wordpress Plugins

  93. Pingback: Chris Fernando Dot Net » Blog Archive » Best Plugins Every WordPress Blogger Should Use

  94. Shawn Honnick

    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.

  95. Christian Schenk

    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.

  96. Shawn Honnick

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

  97. Pingback: Ultimate Guide To Using WordPress For A Portfolio | Fonts, How-To | Smashing Magazine

  98. Pingback: Ultimate Guide To Using WordPress For A Portfolio ??

  99. Pingback: Ultimate Guide To Using WordPress For A Portfolio

  100. Pingback: Ultimate Guide To Using WordPress For A Portfolio | jeremiahnellis.com/design_life

  101. Pingback: Ultimate Guide To Using WordPress For A Portfolio | Designurimagination Blog - Let Your Imagination Fly

  103. Christian Schenk

    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.

  104. Jason Clemens

    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.

  106. Scott

    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!

  107. Pingback: WordPress ThickBox plugin

  108. Tom B

    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?

  109. Tom B

    Found the problem – at the top of thickbox.js i had to change the path to the loadinAnimation image.

    That was one wasted hour.

  110. Justin Adie

    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

  111. pixelboy

    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?

  113. Lloyd

    When I use smoothbox the window is not centered. Any way to have it centered? The thickbox version centers.

  114. Christian Schenk

    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.

  115. Thea

    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…

  116. Christian Schenk

    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.

  117. Thea

    Thanks Christian,
    I’ve downgraded to v1.3.1 until there is a fix available. I’ll look forward to v1.4.1 🙂

  118. Pingback: 10 Best WordPress Plugins – March 2009 | Best Wordpress | rooteto.com - Ertu?rul SA?LAM

  119. Amber

    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! 🙂

  122. ffff

    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!

  123. Christian Schenk

    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.

  124. ashutosh

    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.

  125. Christian Schenk

    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.

  127. ffff

    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

  128. Christian Schenk

    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.

  129. Greg

    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

  130. Christian Schenk

    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.

  131. Greg

    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

  132. Nate

    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?

  134. Nate

    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.

  135. Christian Schenk

    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.

  136. Ty Cammack

    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!

  137. Christian Schenk

    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.

  138. Skawao

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

    have you heard about this problem ?

  139. Pingback: 6 trendów w szablonach WordPress, czyli jak by? na czasie | Sekrety WordPress

  140. Josh

    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…

  141. Christian Schenk

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

  143. Christian Schenk

    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.

  144. Gabrielle

    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!

  145. Christian Schenk

    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.

  146. Gabrielle

    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.

  147. Doug

    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!

  149. Christian Schenk

    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.

  150. Doug

    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!

  151. Christian Schenk

    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.

  153. 2dot

    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?

  154. 2dot

    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?

  155. Christian Schenk

    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.

  156. Oliver

    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?

  157. Christian Schenk

    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.

  158. Kyle

    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?

  159. Michelle

    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!

  160. Neal

    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.

  163. Pingback: Adding Video Using the ThickBox Plugin | Poderosa Ranch

  164. Scarlet

    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.

  166. elena

    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?

  167. Christian Schenk

    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.

  168. Kevin Mitchell

    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.

  169. Anne Dougherty

    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

  170. Mark

    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

  171. codeman38

    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?

  172. Christian Schenk

    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.

  173. Huw Rowlands

    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

  174. Joel

    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!

  175. Licinio

    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!!

  176. Christian Schenk

    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.

  177. Ohad

    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

  179. rafael

    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

  180. Christian Schenk

    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.

  182. Zak

    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…

  183. Zak

    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!

  184. Christian Schenk

    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.

  185. Jess

    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.

  186. Christian Schenk

    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.

  187. akshay sharda

    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

  188. Amanda

    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.

  189. Christian Schenk

    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.

  190. Amanda

    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

  191. Christian Schenk

    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 😉

  192. marco

    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!

  195. Christian Schenk

    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.

  197. Rachel

    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.

  200. Sanford

    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?

  201. Pingback: WordPress ?? Lightbox ???? « leocao

  203. Christian Schenk

    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.

  205. Christian Schenk

    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.

  206. Chris L

    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.

  207. Callum

    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

  208. Christian Schenk

    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.

  209. Robert

    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! 🙂

  210. Christian Schenk

    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.

  211. Jayo Santaigo

    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

  213. Md

    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.

  214. Christian Schenk

    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.

  215. Adrian Richter

    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

  216. Christian Schenk

    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.

  217. Pantoeflou

    Awesome!!!

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

    Very nice, thanks!

  218. Sebastian Schwarz

    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

  219. Christian Schenk

    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.

  220. Todd Dawson

    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?

  221. Christian Schenk

    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.

  222. Claire

    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

  223. Christian Schenk

    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.

  224. carole

    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!

Comments are closed.