Download links:
Slightly ThickerBox is a modification of Cody Lindley's Thickbox script. I modified it for use on my Jason's Toolbox Redesign. The modifications allow the script to generate "Previous Image" and "Next Image" links. The result is that you can use Slightly ThickerBox to create image galleries. In addition, you can create groups of galleries by setting a "rel" attribute on the links. (I also moved the Caption and Close link to the top and made the script case insensitive.)
NEW (08/31/2006): Updated Slightly Thickerbox to use JQuery 1.0.1 and the updated version of Interface Elements for JQuery.
NEW (08/03/2006): You can now add movies (MPEG or AVI) to a Slightly Thickerbox group. You can also group AJAX pages together. See the demo above. This could be used as a quick and easy way to put together an online presentation. I've also done a lot of backend code restructuring, but that won't concern most of you. If you were calling the TB_Show function directly, you'll need to change your reference to TB_ShowObj and pass it a reference to the object you want to display. For example:
TB_ShowObj(document.getElementByID("FirstElement"))
Finally, I've added support for the Interface Elements for JQuery. This is a JQuery plugin that, among other things, adds some more advanced animation capabilities. If you include the Interface Elements scripts (included with the download, see below for the code), then Slightly Thickerbox will use the advanced animation capabilities automatically. Otherwise, Slightly Thickerbox will use the built-in animation capabilities that JQuery possesses.
To use Slightly ThickerBox, add the following HEAD section of your website.
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>
<script type="text/javascript" src="js/thickbox.js"></script>
<link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" />
If you don't want to use the advanced animation effects that Interface elements for JQuery possesses, you would add the following to the HEAD section of your website instead.
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/thickbox.js"></script>
<link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" />
Now, where you want the images to appear, add the following code:
<a href="Filename.jpg" class="thickbox" rel="GroupName" title="Caption goes here" target="_blank"><img src="Thumbnail.jpg" /></a>
The result can be seen above. (Click one of the images or text links.) Note: The rel attribute is optional. If you leave it out, all Slightly Thickerbox items will be linked together.
Known Bugs (any suggestions on how to solve these bugs would be appreciated):