Thickbox
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!
I’m liking it – jQuery is getting more useful with projects like this done on top of it.
@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
@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.
PERFECT.. That’s awesome. Just what I needed..
Excellent work Cody, very timely.
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 )
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.
@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?
Very cool script. Will definately be using this one on our apps next version.
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.
@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. :)
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?
@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).
I’m trying to call thickbox from within a div. The content of that div is dynamically loaded using the jQuery’s load function.
It fails.
The thickbox is created perfectly if I call it from outside the div, but called from the dynamically loaded content inside the div, it acts just like any other link and redirects to the desired page.
Does someone have a solution to this issue? How do I call a thickbox from within a dynamically loaded div?
I really like your Thickbox and have used it on my site. Thanks for the great work.