Tuesday, April 25th, 2006
ThickBox: lightboxes with any HTML
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.
- 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)
- 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.)
- I needed a small abstract pattern for creating custom dialog boxes.
- And lastly, I wanted to demonstrate the simplicity and power of Jquery.
Simple Usage
HTML:
-
-
<a href="linkToHtmlFile?height=size&width=size" title="Add a caption" class="thickbox">Link Text or Image</a>
-
4.1 rating from 161 votes
[…] 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. […]
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.
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. :)
Please, where is a demo available?
this link returns error
http://www.codylindley.com/blogstuff/js/thickbox/
sorry, I’ve found the demo in
http://jquery.com/demo/thickbox/
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/
MyGod! It’s very very nice script !! Thanks!!
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.
@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+.
Tried the examples on the url provided and got the following JavaScript alert:
[object Error]
IE 6, with ActiveX disabled.
[…] Ajaxian » ThickBox: lightboxes with any HTML Lightbox technique for focusing on the overlay, but allows arbitrary HTML and AJAH. (tags: ajax) […]
Cleanest implementation I have seen so far. Especially as we were already using Jquery.
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? ;-)
This is pretty clean and useful. Some of the codes from the core may not necessarily needed, and redundant. By keeping it clean, it saves on bandwidth. However, may I advise that you have a demo page to show more details on how your script works.
Good effort!
Siomply amazing plugin. Think I’ll integrate on my WP installation. THX
http://www.epeaksoft.com/site-map.html
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!
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/
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?
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