I've always prefered the looks of lightbox2 over Thickbox 3.1, but am usually using jquery over prototype and need some of the additional features of Thickbox (like being able to embed html in the lightbox). So I took it upon myself to edit the css, to move the menu bar from the top to the bottom, borrowed the close image from Lightbox2, and edited the javascript a little bit to support albums of html files.
The Lightbox image was licensed under the Creative Commons Attribution 2.5 License where as Thickbox 3.1 is under the MIT and GPL, so I don't know what that means to your legal experts, but there it is.
Download thickbox.js , ThickBox.css, the loading graphic (loadingAnimation.gif), the close button (close.gif), and the Mac Background Hack (macFFBgHack.png) to your local machine (or cut and paste the code from the tabs). Along with these three files, a copy of the jQuery JavaScript library is needed. For this site, and ThickBox, I am using the compressed version of jQuery.
Loading...
Loading...
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-to-file/jquery.js"></script>
<script type="text/javascript" src="path-to-file/thickbox.js"></script>
Once you have included the .js files, open thickbox.js and locate the tb_pathToImage and tb_pathToCloseImage variables at the top of the page. Once you have found it, make sure to change the values of tb_pathToImage and tb_pathToCloseImage to the paths where the loadingAnimation.gif and close.gif files are located on your own server.
2. Include the ThickBox CSS file in your web page. As of version 3.1-mf you will also need to update the path to the macFFBgHack.png in the thickbox.css file. Example options below:
<link rel="stylesheet" href="path-to-file/thickbox.css" type="text/css" media="screen" />
Or
<style type="text/css" media="all">@import "path-to-file/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.
Windows IE 6.0, Windows IE 7+, Windows FF 2.0.0.6+, Windows Opera 9.0+, Macintosh Safari 2.0.4+, Macintosh FF 2.0.0.6+, Macintosh Opera 9.10+
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.
As of 08/01/2007
As of 05/02/2007
As of 1/24/2007
As of 10/11/2006
As of 10/09/2006
As of 09/23/2006
As of 08/07/2006
As of 08/03/2006
As of 07/06/2006
This is the simplest example of ThickBox functionality. This example places a single image in a ThickBox (see demo tab).
<a href="images/single.jpg" title="add a caption to title attribute / or leave blank" class="thickbox"><img src="images/single_t.jpg" alt="Single Image"/></a>
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.
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.
<a href="images/plant1.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="images/plant1_t.jpg" alt="Plant 1" /></a>
<a href="images/plant2.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="images/plant2_t.jpg" alt="Plant 2" /></a>
<a href="images/plant3.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="images/plant3_t.jpg" alt="Plant 3" /></a>
<a href="images/plant4.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="images/plant4_t.jpg" alt="Plant 4" /></a>
Inline content on the page, either hidden or showing, can be placed in a ThickBox.
?height=300&width=300&inlineId=myOnPageContent
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.
the paragraph and input below in a ThickBox, or Show hidden modal content.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
<input alt="#TB_inline?height=300&width=400&inlineId=myOnPageContent" title="add a caption to title attribute / or leave blank" class="thickbox" type="button" value="Show" />
<a href="#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true" class="thickbox">Show hidden modal content.</a>
Opens URL's in an iframe inside of ThickBox. Yes, this is Greybox functionality.
?KeepThis=true&TB_iframe=true&height=400&width=600
Add all other query parameters before the TB_iframe parameters. Everything after the "TB" is removed from the URL.
<a href="ajax.PHP?keepThis=true&TB_iframe=true&height=250&width=400" title="add a caption to title attribute / or leave blank" class="thickbox">Example 1</a>
<a href="ajaxOverFlow.htm?keepThis=true&TB_iframe=true&height=300&width=500" title="add a caption to title attribute / or leave blank" class="thickbox">Example 2</a>
<a href="iframeModal.html?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=200&width=300&modal=true" title="add a caption to title attribute / or leave blank" class="thickbox">Open iFrame Modal</a>
This example is exactly like the single iFramed Content except that it allows use of the rel attribute to group the html together so they can be navigated in a ThickBox.
?KeepThis=true&TB_iframe=true&height=400&width=600
Add all other query parameters before the TB_iframe parameters. Everything after the "TB" is removed from the URL.
<a href="ajax.PHP?keepThis=true&TB_iframe=true&height=250&width=400" title="add a caption to title attribute / or leave blank" class="thickbox">Example 1</a>
<a href="ajaxOverFlow.htm?keepThis=true&TB_iframe=true&height=300&width=500" title="add a caption to title attribute / or leave blank" class="thickbox">Example 2</a>
<a href="iframeModal.html?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=200&width=300&modal=true" title="add a caption to title attribute / or leave blank" class="thickbox">Open iFrame Modal</a>
Use a hidden HTTP request (AJAX) to fetch files from the same server and have ThickBox display the contents of the files.
?height=300&width=300
In order to open new Ajax content in an open Ajax ThickBox, its code must also contain the appropriate HTML (class=""thickbox) to launch an Ajax ThickBox (see demo for example). The only catch is, the ThickBox calls must include both the width and height of the original ThickBox. If you leave it blank the window will resize to the default size(630x440).
<a href="ajaxOverFlow.html?height=300&width=300" title="add a caption to title attribute / or leave blank" class="thickbox">Scrolling content</a>
<a href="ajax.PHP?height=220&width=400" class="thickbox" title="add a caption to title attribute / or leave blank">No-scroll content</a>
<a href="ajaxLogin.html?height=85&width=250&modal=true" class="thickbox" title="Please Sign In">login (modal)</a>
<a href="ajaxTBcontent.html?height=200&width=300" class="thickbox" title="">Update ThickBox content</a>
This site was designed & built by Cody Lindley with jQuery (and then later modified by Matt Farmer, 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).