ThickBox 2.1.1
developed by Cody Lindley using jQuery
ThickBox is a webpage UI dialog widget written in JavaScript
on top of the jQuery library. Its function is to show a single
image, multiple images, inline content, iframed content, or
content served through AJAX in a hybrid modal.

Overview
 Examples
 Q&A
 Support
 Donate
Overview-
Features:
o
o
o
o
o
o
o
ThickBox was built using the super lightweight jQuery library. Compressed, the
jQuery library is 19k, uncompressed it's 55k.
The ThickBox JavaScript code and CSS file only add an additional 12k on top of
the jQuery code. Together, the compressed jQuery code and ThickBox only total
31k.
ThickBox will resize images that are bigger than the browser window.
ThickBox offers versatility (images, iframed content, inline content, and AJAX
content).
ThickBox will hide form elements in Windows IE 6.
ThickBox will remain centered in the window even when the user scrolls the page
or changes the size of the browser window. Clicking an image, the overlay, or
close link will remove ThickBox.
The ThickBox creator has decided that animation should be tailored by individual
authors. So yeah, ThickBox no longer animates. Is this a feature? Well, some
might say it is.




Download
ThickBox.js
ThickBox.css
loadingAnimation.gif
/* --------------------------------------------------------------------------------------------------------------*/
/* --------->>> global settings needed for thickbox <<<----------------------------------------------------------*/
/* --------------------------------------------------------------------------------------------------------------*/
*{padding: 0; margin: 0;}
html, body {
min-height: 100%;
height: auto !important;
height: 100%
}
/* --------------------------------------------------------------------------------------------------------------*/
/* --------->>> thickbox specific link and font settings <<<-----------------------------------------------------*/
/* --------------------------------------------------------------------------------------------------------------*/
#TB_window {
font: 12px Arial, Helvetica, sans-serif;
color: #333333;
}
#TB_secondLine {
font: 10px Arial, Helvetica, sans-serif;
color:#666666;
}
#TB_window a:link {color: #666666;}
#TB_window a:visited {color: #666666;}
#TB_window a:hover {color: #000;}
#TB_window a:active {color: #666666;}
#TB_window a:focus{color: #666666;}
/* --------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox settings <<<---------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------------------------------*/
#TB_overlay {
position: absolute;
z-index:100;
top: 0px;
left: 0px;
background-color:#000;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}
#TB_window {
position: absolute;
background: #ffffff;
z-index: 102;
color:#000000;
display:none;
border: 4px solid #525252;
text-align:left;
}
#TB_window img {
display:block;
margin: 15px 0 0 15px;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-top: 1px solid #666;
border-left: 1px solid #666;
}
#TB_caption{
height:25px;
padding:7px 30px 10px 25px;
float:left;
}
#TB_closeWindow{
height:25px;
padding:11px 25px 10px 0;
float:right;
}
#TB_closeAjaxWindow{
padding:5px 10px 7px 0;
margin-bottom:1px;
text-align:right;
float:right;
}
#TB_ajaxWindowTitle{
float:left;
padding:7px 0 5px 10px;
margin-bottom:1px;
}
#TB_title{
background-color:#e8e8e8;
height:27px;
}
#TB_ajaxContent{
clear:both;
padding:2px 15px 15px 15px;
overflow:auto;
text-align:left;
line-height:1.4em;
}
#TB_ajaxContent p{
padding:5px 0px 5px 0px;
}
#TB_load{
position: absolute;
display:none;
height:100px;
width:100px;
z-index:101;
}
#TB_HideSelect{
z-index:99;
position:absolute;
top: 0;
left: 0;
background-color:#fff;
border:none;
filter:alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
}
#TB_iframeContent{
clear:both;
border:none;
margin-bottom:-1px;
margin-top:1px;
_margin-bottom:1px;
}
How to Implement ThickBox:
Before you can implement ThickBox make sure the page that invokes ThickBox has a
valid DTD. This is required for ThickBox to look and function correctly.
1. ThickBox requires the jQuery JavaScript library; because of this, you will need to
include the jquery.js file in the head element of your web page, followed by the
thickbox.js file (NOTE: jquery.js must come first in the source order). Example below:
<script type="text/javascript" src="path-tofile/jquery.js"></script>
<script type="text/javascript" src="path-tofile/thickbox.js"></script>
Once you have included the .js files, open thickbox.js and search for the loading image
by name (loadingAnimation.gif). Once you have found it, make sure to change the image
path according to its location on your own server.
2. Include the ThickBox CSS file in your web page. Example options below:
<link rel="stylesheet" href="path-tofile/thickbox.css" type="text/css" media="screen" />
Or
<style type="text/css" media="all">@import "path-tofile/thickbox.css";</style>
Or, open the thickbox.css file and copy and paste the styles into an existing style sheet.
Be aware that the ThickBox CSS file will remove the browsers default padding and
margin for all elements.
3. View the examples to learn the many different ways to use and invoke ThickBox
functionality.
Supported & Tested Browsers
Windows IE 6.0, Windows IE 7 (7.0.5450.4), Windows FF 1.5.0.5, Windows Opera 9.0,
Macintosh Safari 1.3.2 & 2.0.3, Macintosh FF 1.5
MIT License/GNU License
http://www.opensource.org/licenses/mit-license.php
http://www.gnu.org/licenses/gpl.html
Permission is hereby granted, free of charge, to any person obtaining a copy of this
software and associated documentation files (the "Software"), to deal in the Software
without restriction, including without limitation the rights to use, copy, modify, merge,
publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons
to whom the Software is furnished to do so.
Change Log
As of 1/24/2007
o
Updated Thickbox to work with jQuery release 1.1.1
As of 10/11/2006
o
Updated jQuery code to release 1.0.2
As of 10/09/2006
o
Fixed scrolling issues with FireFox
As of 09/23/2006
o
o
o
o
o
o
Updated jQuery code to release 1.0.1
The escape key will now close ThickBox
Removed the necessity to have an extension to use the iframe content and ajax
content (image content still requires an extension)
When opening iframe content with thickbox the window will only appear after the
window has loaded its content (This will not work in Safari)
Moved the next and previous keyboard functionality for the gallery images to the
left < key (previous) and right > key (next). By doing this it fixes a known issue
with safari and the arrow keys. This also allows sites design to be scrolled
horizontally to use the arrow keys accordingly.
ThickBox will now work with sites that scroll horizontally. So, a ThickBox, not
matter if you scroll a website horizontally or vertically will always show up
centered in the window.
As of 08/07/2006
o
Fixed height issue of transparent iframe to hide select elements in IE
As of 08/03/2006
o
o
o
o
o
o
o
o
Added greybox functionality (iframed content)
Added titles to ThickBox for iframed, inline, and ajax content
Added image gallery functions (with keyboard navigation by using the left and
right arrow keys)
New (separate) CSS file specifically for ThickBox
Fixed Firefox caching issue when loading a ThickBox image for the first time
Cleaned up and optimized the thickbox.js file
Add the new file extension .bmp for ThickBox images
Removed set height on ThickBox so two lines of caption will stretch the window
vertically
As of 07/06/2006
o
o
Added the ability to use inline div elements to populate a ThickBox
Added the ability to use uppercase and lowercase extensions
o
o
o
o
o
Loading animation centers on the screen regardless of vertical scroll
In IE, select boxes are now hidden when ThickBox is open
Fixed a bug that occurs when no title is used on anchor elements
Fixed overlay so that it covers the screen during the loading animation (occurred
in FF and Opera)
Uses the new jQuery 1.0 – Alpha Release
back to top
Examples
Single Image


Demo
html
Description:
This is the simplest example of ThickBox functionality. This example places a single
image in a ThickBox (see demo tab).
Instructions:
o
o
o
Create a link element (<a href>)
Give the link a class attribute with a value of thickbox (class="thickbox")
Provide a path in the href attribute to an image file (.jpg .jpeg .png .gif .bmp)

Gallery Images


Demo
html
Description:
This example is exactly like the single image functionality except that it allows use of the
rel attribute to group images together so they can be navigated in a ThickBox. The ideal
usage would be for images galleries.
Instructions:
o
o
o
o
Create a link element (<a href>)
Give the link a class attribute with a value of "thickbox" (class="thickbox")
Provide a path in the href attribute to an image file (.jpg .jpeg .png .gif .bmp)
Give each link element the same rel element and value. (Example: rel="galleryplants")
Important to Remember:
While you have a ThickBox gallery image open, you can navigate forward and backward
through the images by using the left < key (previous) and right > key (next) on the
keyboard (Next and Previous links are also provided in the ThickBox). The images will
appear in the gallery from first to last as they appear in the HTML document flow.

Inline Content

Demo

html
Description:
Inline content on the page, either hidden or showing, can be placed in a ThickBox.
Instructions:
o
o
o
o
Create a link element (<a href>)
Give the link a class attribute with a value of thickbox (class="thickbox")
In the href attribute of the link add the following anchor: #TB_inline
In the href attribute after the #TB_inline add the following query string on to the
anchor:
?height=300&width=300&inlineId=myOnPageContent
o
Change the values of height, width, and inlineId in the query accordingly (inlineID
is the ID value of the element that contains the content you would like to show in a
ThickBox.
Important to Remember:
If the inline content in the ThickBox contains more content than the ThickBox dimensions
will show, a vertical scroll bar will appear so that the content can be scrolled. You can
avoid having the scroll by making sure the ThickBox has the appropriate dimensions in
order to show all of the inline content without having to scroll. In other words, if you don't
want scroll bars, increase the height and width of the ThickBox until the content does not
require scrolling.



iFramed Content
Demo
html
Description:
Opens URL's in an iframe inside of ThickBox. Yes, this is Greybox functionality.
Instructions:
o
o
o
o
Create a link element (<a href>)
Give the link a class attribute with a value of thickbox (class="thickbox")
In the href attribute of the link provide the URL you would like to display in a
ThickBox
In the href attribute, after the URL, add the following query on to the end of the
URL & any parameters you might add:
?KeepThis=true&TB_iframe=true&height=400&width=600
o
Change the values of height and width in the query accordingly
Important to Remember:
Add all other query parameters before the TB_iframe parameters. Everything after the
"TB" is removed from the URL.

AJAX Content


Demo
html
Description:
Use a hidden HTTP request (AJAX) to fetch files from the same server and have
ThickBox display the contents of the files.
Instructions:
o
o
o
o
Create a link element (<a href>)
Give the link a class attribute with a value of thickbox (class="thickbox")
Provide a path in the href to the file/directory on the server. (href="ajaxLogin.htm")
In the href attribute, after the URL path to the file, add the following query on to
the end of the URL:
?height=300&width=300
o
Change the values of height and width in the query accordingly
back to top
Q & AQuestion - I am using an older version of ThickBox. How do I upgrade?
Answer - I suggest stripping out the old CSS and JS and adding back in the
new code created for the current version of ThickBox. If that is bad news, then
hold tight - I have some good news, too. The way by which ThickBox is invoked
has not changed. So, there is no need to change the HTML that invokes a
ThickBox.
Question - Can I display Flash in a ThickBox?
Answer - In short, yes! However, I have not personally tested this yet. I have no
idea of the browser quirks and support surrounding the usage of Flash in a
ThickBox.
Question - Can a ThickBox appear over the top of my Flash content?
Answer - Yes! Have a look here for a full explanation.
Question - If we use this code for a client, can we donate money to thank you
for your efforts?
Answer - Yes, simply click on the "Donate" button in the next section to make a
PayPal donation.
Question - Can a ThickBox be opened from another ThickBox?
Answer - No, not yet.
Question - Will jQuery or ThickBox code break MooFx, Prototype,
Scriptaculous, or Lightbox?
Answer - Possibly, yes! However, most of the issues surrounding the use of
these libraries together is likely a conflict between Prototype and jQuery. Correct
me if I am wrong, but the occurrences of $ and $$ are particularly problematic.
For a more detailed explanation of the issues, visit the jQuery site.
Question - Can you view a PDF in a ThickBox?
Answer - The short of it is, yes! In fact, anything that can be viewed in a
browser can also be viewed in a ThickBox using an iframe. Check out the iframe
content example.
back to top
Support-
ThickBox has received more attention than I had initially expected - so much so that I am
a little overwhelmed with the notoriety and somewhat dumbfounded by all the individuals
using it. Truthfully, I developed the solution as a proof of concept and personal endeavor
to showcase the jQuery library. With that said, I think I might owe some people an
apology. ThickBox is not retail software. It has no support or documentation (except for
this site). It’s the start of a great script and should be used as a launching point. If you
see its potential, then the script was likely created for you. If, however, you only see the
limitations of the solution, then honestly, the script is likely not for you. With that said, I
am sorry that I do not have the time to respond to every email/comment requesting
support. However, if you send a detailed email of the issue, along with the browser(s)
and operating system(s) the issue is occurring in, the chances of getting direct support
will increase significantly. In addition to emailing me directory, and the choice for support
I would recommend, you can visit and pillaged the ThickBox Forum for peer support.
If past development is any indication, ThickBox will likely morph into another version in
the future. If at that point it can stand alone as useful to you, then use it. However, as of
today please do not expect a great deal of support for a script that was really never
meant to be a complete software solution. Remember, this stuff is free. If it so happens
to come wrapped with great documentation and support, then even better, but please
don't assume that it should.
back to top
Donate-
Knowledge is its own reward. While its true that my own personal enjoyment and
education continues to thrive as I develop ThickBox, a little bit of cash for a rainy day
never hurt anyone. So, if you're feeling gracious and would like to improve my monetary
situation out of gratitude, or maybe because my work on ThickBox has helped you
monetarily, you can give me a little cash for all my hard work by clicking on the "PayPal
Donate" button below and send me some cha-ching. Of course, this is not necessary,
even if you plan on using ThickBox commercially. As I said, knowledge is its own reward.
back to top
This site was designed & built by Cody Lindley with jQuery, Resolution dependent layout, Accessible, unobtrusive
JavaScript tabs with jQuery, JQuery Corner Styler, Interface elements for jQuery, Dan Webb - CodeHighlighter 0.2,
Dynamic Code Viewing with jQuery, and plenty of patience. Before you cut and paste any of the JavaScript found on this
site, you should know that I altered/optimized the previously mentioned scripts specifically for this site. Also, no images
were killed used during the development of this site (except for the images in the examples).