Tuesday, April 25th, 2006

ThickBox: lightboxes with any HTML

Category: Toolkit, UI

<p>Cody Lindley wanted to do more with the lightbox technique, so he created ThickBox.

Why another box?

My version of the Lightbox technique includes functionality similar to that of the Greybox technique. That is, ThickBox can show html pages as well as images. The html that is shown inside ThickBox is pulled from the server using AJAX (really AXAH). I would like to think that my twist is bridging the gap between Greybox and Lightbox functionality.

Before I get into what it does, I’d like to give a couple of reasons why I felt (and maybe you do too) a ThickBox type solution was needed.

  1. File size! File size! File size! Prototype & Scriptaculous can add upwards of 100k to a page unless you gzip the js files. I simply wanted a solution that was more light weight, than heavy weight. (Using the compressed version of Jquery, along with my ThickBox code, the total file size is around 20k)
  2. Lightbox made me feel like I was in a box. I wanted the ability to load (with AXAH) structural markup in the lightbox, as well as images. (A little slice of flexibility over here, please.)
  3. I needed a small abstract pattern for creating custom dialog boxes.
  4. And lastly, I wanted to demonstrate the simplicity and power of Jquery.

Simple Usage

  1. <a href="linkToHtmlFile?height=size&width=size" title="Add a caption" class="thickbox">Link Text or Image</a>

Thickbox

Related Content:

Posted by Dion Almaer at 9:16 am
21 Comments

++++-
4 rating from 311 votes

21 Comments »

Comments feed TrackBack URI

[...] Via Ajaxian, descubro esta increible utilidad para mostrar contenidos mediante popupos no intrusivos al puro estilo Lightbox, con la diferencia de que la información a mostrar puede ser una página en vez de una imagen. Muy parecido al funcionamiendo de GreyBox. [...]

Pingback by aNieto2K | Lo que quiero, cuando quiero y como quiero » Popups no intrusivos con ThickBox — April 25, 2006

Nicely done, but they don’t catch the tab key so you can still tab to the underlying page. This is a common issue which all overlays have.

Comment by Gilles — April 25, 2006

Really Helpfull article, i’ve used lightbox before but thickbox is better for me … i guess it has some bugs n it need 2 b fixed. :)

Comment by Gautam — April 25, 2006

Please, where is a demo available?

this link returns error
http://www.codylindley.com/blogstuff/js/thickbox/

Comment by Guillermo — April 25, 2006

sorry, I’ve found the demo in
http://jquery.com/demo/thickbox/

Comment by Guillermo — April 25, 2006

Guillermo,

On codylindley.com’s homepage they explain the demo was “too much” for their host so they provided an alternate link:

http://jquery.com/demo/thickbox/

Comment by Sean Foushee — April 25, 2006

MyGod! It’s very very nice script !! Thanks!!

Comment by kuei — April 25, 2006

great job :)

Gilles is right about the tab issue, but i guess usability wise, it’s fine when you use it just to display images or web content without links or user interaction.

Comment by red — April 26, 2006

@red; Well the problem arises when you have a large page (e.g. more then 1 screenheight long with scrollbar). Lets assume you have a footer on the page with links in it but you are at the top of the page;

You click a link, the overlaybox is shown (doesn’t matter what type you use), and it’s shown at the top of the page. The user presses tab multiple times, and ends up with a focus rect on the bottom link which is in the footer.

Of course this is a wierd scenario, but it’s possible. I’ve made a “subModal” box, based on a few techniques which disables all elements that could receive a focus rect. Due to browser incompatibility issues, i choose to “hide” all links, because there was no way to disable the focus rect otherwise. I will be showing this code shortly when i finished it. For now, it works in both IE 5.5+ and Firefox 1.0+.

Comment by Gilles — April 26, 2006

Tried the examples on the url provided and got the following JavaScript alert:
[object Error]

IE 6, with ActiveX disabled.

Comment by José Jeria — April 26, 2006

[...] Ajaxian » ThickBox: lightboxes with any HTML Lightbox technique for focusing on the overlay, but allows arbitrary HTML and AJAH. (tags: ajax) [...]

Pingback by Labnotes » Blog Archive » links for 2006-04-27 — April 26, 2006

Cleanest implementation I have seen so far. Especially as we were already using Jquery.

Comment by Matti Putkonen — April 27, 2006

José, if I’m remembering correctly, Internet Explorer’s XMLHTTPRequest implementation requires ActiveX. You’ll get that same error for any page using AJAX if you leave ActiveX off… in which case, why are you on Ajaxian? ;-)

Comment by ceejayoz — April 28, 2006

Siomply amazing plugin. Think I’ll integrate on my WP installation. THX

Comment by Lautreamont — June 24, 2006

http://www.epeaksoft.com/site-map.html

Comment by offshore outsourcing — December 25, 2006

I included html tags into the title (links and br)
and, seems like, the thickbox height is wrong in Firefox.
Any ideas?

http://www.featurepics.com/Thickbox/Image-Gallery.aspx

IE – just perfect!

Comment by FP Images — March 15, 2007

I’ve make a port of Thickbox for Mootools.
I thought it would be cool to have it working with Mootools.
I added a small opacity effect when the window shows up, and on scroll.
Here is the project homepage : http://labs.gueschla.com/smoothbox/

Comment by Boris — March 19, 2007

As FP Images, I too expirience this problem with FIreFox. The background doesn’t cover the screen, but ended even before the image end. Any ideas?

Comment by Mor — April 13, 2007

Does anyone know how to make a greybox automatically open when the page loads?

Please email me at ((rawwebdesign at gmail (dot) company)) if you can figure it out!

Many thanks,

Brad

Comment by Brad — September 6, 2007

This is really cool. This looks like the way to go.

Comment by seowordplay — January 29, 2009

Simple and Effective explanation ;)

Comment by kaberdey — February 2, 2010

Leave a comment

You must be logged in to post a comment.