Blog » Thickbox
Posted April 24th, 2006 by John Resig
Cody Lindley just released a brand new version of Lightbox/Greybox called Thickbox. This release offers some great, added, functionality over the other libraries. Specifically, this release is completely unobtrusive - it uses the natural href, src, and title attributes to seed the box, when it pops up. Even if you don’t have Javascript enabled, it still behaves naturally. It is also capable of dynamically loading blocks of html and displaying it in the overlay. In all, it’s a great release, not the least of which is the fact that it uses jQuery to pull it all together. So check it out, play with it, and let Cody know what you think of it!
April 24th, 2006 at 1:43 pm
I’m liking it - jQuery is getting more useful with projects like this done on top of it.
April 24th, 2006 at 3:11 pm
@Andre Lewis - Thanks Andre. If you like things build on top of jquery you should check out Easy DOM creation for jQuery and Prototype.
Link:
http://mg.to/2006/02/27/easy-dom-creation-for-jquery-and-prototype
April 24th, 2006 at 3:15 pm
@Andre - Oops! I was meaning to link to this article.
http://mg.to/2006/01/25/json-for-jquery
Sorry about that. John, feel free to fix my stupidity.
April 25th, 2006 at 12:45 am
PERFECT.. That’s awesome. Just what I needed..
April 25th, 2006 at 8:17 am
Excellent work Cody, very timely.
April 25th, 2006 at 4:51 pm
Using the ajax load function to pull parts of the document in is nice but (always a but somewhere) wouldn’t it be more accessible if the documents had doctypes and all the markup?
Is it possible at this time to use jquery to return the full html of the document and then select just the stuff between the body ( or some other )tag for inserting in the case of ajax?
It would just be awesome to see this script and jquery working together to do the correct accessible semantic web thing instead of a partially correct inaccesible web thing ( so last year )
April 25th, 2006 at 11:35 pm
To Abba Bryant:
One way to do this would be to use a dynamic language (PHP or Ruby) to generate the html for the Thickbox. Then you could have the script detect whether the request is ajax or just a normal get and return an html snippet or a whole valid xhtml document (respectively).
In ruby on rails it’s as easy as adding something like this to your controller:
if request.xhr?
render ’stuff’, :layout => :none
else
render ’stuff’
I’m sure this can be done in PHP also.
April 26th, 2006 at 7:02 pm
@abba - It’s possible to have a regular expression, using javascript remove or leave (no js) on these pages when they are loaded. I’m thinking about this for the next version?
April 27th, 2006 at 6:16 am
Very cool script. Will definately be using this one on our apps next version.
May 15th, 2006 at 6:02 pm
Has anyone had any problems with the Thickbox. We have it working and it does what we want - however- intermittently when a thumbnail is clicked we get the new image appear in a new browser window by itself with a white background- if we go back and pick the image again all works again no problem.
It is not one specific image or page that is causing the problem.
May 22nd, 2006 at 6:38 pm
@Scott_S: This happens when you click a Thickbox link before the page has finished loading. If the javascript hasn’t added the onclick events to the links they fall back to just pulling out the original file.
This happens with every unobtrusive link enhancement script: Lightbox, Greybox, etc.
The only way around it is to make your page content interesting enough to hold the users attention for a few more seconds before they feel like clicking something.
June 5th, 2006 at 11:23 am
For your provided example page, it seems that a strange display bug is created in Firefox (1.5.0.4/Win) if you swap out the jQuery file with the compressed version of jQuery. Clicking on one of the two thumbnails causes a flash/refresh on the right side of the screen. Any ideas what the difference between teh two .js files might be causing?
June 5th, 2006 at 11:30 am
@Scott S.: I experience the same thing using Firefox/Win each time a page is loaded fresh for the first time (or cache is cleared), regardless of how much time I wait after page load. Clicking back, it works from then on (until I clear cache & refresh again).
April 27th, 2008 at 3:04 am
[…] April 24th, 2006 Thickbox released: Thickbox [edit] March […]