Go To Content
codylindley.com

codylindley.com

ThickBox 3

2 May 07 | Permanent Link | Add Comments

ThickBox is now moving from version 2.X to 3. This change may come as a surprise to many of you, since I said I was going to stop working on it. However, as time and circumstances have marched on, I once again find myself in a familiar position – working for a company that has embraced the use of ThickBox. That being the case, I started improving version 2.1.3 a couple of months back. Originally, I thought I would just quietly improve the code for my own personal use, but after some thought, I decided to release my improvements so all who use the script can benefit. So here it is, ThickBox 3. A big thanks goes out to Klaus Hartl whose improvements to ThickBox laid the ground work for ThickBox 3.

Here is the change log:

  • If sizes are not set for width and/or height (inline, iframe, and ajax content), ThickBox will default to a width of 630px and a height of 440px
  • iframe hack to hide “select” elements now only runs in IE 6
  • Scrollbars are removed in IE 6 when a ThickBox is opened (to counter IE 6’s errant width and height calculations)
  • Cleaned code using JSLint
  • A new compressed thickbox.js using Packer
  • Updated ThickBox to use jQuery 1.1.2
  • Major updates to JavaScript and CSS to address scrolling and overlay issues
  • Replaced pre-loader image, and Pre-loader image is now being pre-loaded
  • ThickBox now works with image maps (“area” elements) and form buttons (“input” elements), just like links (“a” elements)
  • If you use Ajax content, ThickBox will now open new content in the current ThickBox. That is, after the content is loaded into a ThickBox (via Ajax), it will be parsed for any area, link, or input elements with a class of “thickbox”. This will allow you to load new content into the current ThickBox
  • Added the ability to create a real modal window when using inline or Ajax content
 
  1.   #1 Comment Posted by karlin vicencio on May 2, 06:47 PM

    hello!
    I’m Karlin, you can e-mail me back at cutesykayus@gmail.com
    My problem is this, i used your thickbox code.. i include all the js and css but what happened is that the popup thickbox was too small and it popped inside the gallery iframe.. i tried to put the ?KeepThis=true&TB_iframe=true&height=400&width=600 but nothing has changed maybe because the href should also be a page, but mine is the path of where the images are located because im using ASP. By the way structure of coding is this.. the code for my iframe is on a separate module, i just included it on the main page.. and on my iframe module is where i placed the js & css.. maybe thats the reason why the thickbox appeared to be small and popped inside the i frame, though everything’s okay, it displays the images from the database its just that it was very tiny and it popped inside the iframe.. but when i placed the js & css on the main page it didnt read the js & css.. it just display the image on a blank page

  2.   #2 Comment Posted by IAMWW on May 4, 09:11 AM

    I love thick box and tried it on a couple of projects. However, at the time the projects had to work perfectly in IE 6. I am looking forward to giving the new version a go.

  3.   #3 Comment Posted by Sven on May 6, 01:53 AM

    I’m using Thickbox 2.1 now for a while. It works fine with IE but it give some problems with viewing in Firefox. The layout of my website is completely messed up as soon as I add the line with thickbox.css in my source. I’m using tables in html for my layout. This table is centered in the window, but when I ad the line with thickbox.css the table moved to the top in IE (can be solved with adding some margins) but in FF the table moved to the upper left corner!

    Now I hope this problem is solved with version 3 but I can’t reach the site of jquery. Can anyone send me version 3 of thickbox.js and .css?

    Is anyone have some suggestions how I can solve this problem, I like to hear it too. The problems can be seen with firefox at the following site:
    www.svenscheffers.com/new
    (beta version of my new site)

    Thanks! Sven

  4.   #4 Comment Posted by Jack on May 6, 04:27 PM

    ... working for a company that has embraced the use of ThickBox…

    That being the case, wouldn’t it be great to include an option for watermakering inside thickbox? ;)

    I’m using thickbox for images within my WordPress blog as well as for the Plogger Gallery (embedded inside WP). What I really lack is an option to watermark all of those images that are marked with ‘class=“thickbox”’.

    What do you think? Could this be done? I really really would love to see that embedded into Thickbox.

  5.   #5 Comment Posted by Jack on May 8, 04:12 AM

    I tried the new version with the compressed code (if that’s ok to do), but nothing happened when clicking on the thumbs for the popups. I did’nt alter de css, only replaced the content of the two .js files.

  6.   #6 Comment Posted by Rob on May 13, 07:45 AM

    My Mom needed a gallery for her site and this is just the thing. Thanks!

  7.   #7 Comment Posted by Pedro on May 25, 06:58 AM

    Hi, is it possible to open another instance of thickbox inside a already open thickbox? What it does now is destroy the parent thickbox and replace it with the new one. What I actually needed is cascading thickboxes…

    Thanks, keep on the good work!!

  8.   #8 Comment Posted by Brandon on Jun 2, 11:14 PM

    Just wanted to say thanks for the update, it’s a very user friendly and intuitive plugin.

    I would like to put in a feature request though, I think it would be nice to have “previous” and “next” control via the keyboard just like the escape key for “close”.

    Just a thought, thanks again for all the hard work and the excellent product, helps novice coders like myself produce great work.

  9.   #9 Comment Posted by Danny on Jun 27, 10:26 AM

    thank you so much!

    i try the demo in http://jquery.com/demo/thickbox/ , i found that the “Gallery Images Demo” can’t change the photo or quit by press key( <- , -> , Esc ), is there something wrong?

  10.   #10 Comment Posted by Danny on Jun 27, 06:26 PM

    ok,i know what’s wrong!

    use the keycode 37,39 but not 188,190 .

  11.   #11 Comment Posted by Leonie on Sep 4, 05:26 AM

    I am having a problem with the height in thickbox I used the inline content example . to dictate height and width it works fine with 2 of the video’s (height 405px)but the 3rd video (height 425px). . doesn’t change instead I get a scrollbar and some of my content disappears in both Firefox 2.0 and IE 7.0 do you know of any work arounds or any known css style clashes.

  12.   #12 Comment Posted by Joybracher on Sep 19, 01:08 PM

    I have a problem, I load my website’s pages with ajax…and those pages loaded with ajax have links to images which are supposed to be loaded with thickbox. The problem seems to be that thickbox can’t be applied to those images, how is that? Somehow thickbox can’t “see” the content inserted to the page with ajax as those images can not be opened in thickbox? so I assume thickbox can’t read the new content inserted to the page through ajax? I also run the TB_init() function AFTER I’ve loaded the ajaxed content to the page, but it still doesn’t work, ideas how to solve this? thanks.

  13.   #13 Comment Posted by crashdj on Oct 2, 06:39 AM

    how i can keep visible the scrool bar site when thickbox popup is open???
    on shop.php click 1 or 2 link under the image

    thanks