Fadebox
Download | Projects Page | Technology Page
What is It?
Fadebox is a jQuery plugin that overlays images on a web page. For a demo, see my photo gallery and click on one of the images. Fadebox allows you to display large images effectively and provides slide show functionality.
There are a lot of javascript packages out there that overlay images on the page, most of which were inspired by the excellent Lightbox. Most such packages suffered from a number of problems:
- Large images extend beyond the screen borders, requiring the user to scroll
- They require a number of external files, such as stylesheets and images
- Slide show navigation is not intuitive
- Over-the-top animations run slowly on older computers
So I put together a lightweight version that served all my needs. It automatically resizes big images to fit the screen. It does not require any stylesheets or images. Navigation buttons appear where you'd expect them: in a bar at the bottom of the page. The only animation involved is fading in the background, which runs smoothly even on slow computers.
How to Use It
Download Fadebox and unzip it to your website. Then add two javascript files to your page (jQuery and the fadebox extension), in this order:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript" src="jquery-fadebox.min.js"></script>
Then add something like this to your webpage:
<script type="text/javascript">
$(document).ready(function(){
$('.slideshow').fadebox();
});
</script>
The '.slideshow' part is a jQuery selector to a set of links or images. Your webpage markup might look something like this:
<div id="container">
<a href="[address of an image]"><img src="[address of thumbnail]" class="slideshow" /></a>
<a href="[address of another image]"><img src="[address of thumbnail]" class="slideshow" /></a>
. . . for all other images
</div>
You can also dispense with the link tags and use only <img> tags. In that case, you should use the replace_this and with_this options to have Fadebox change out part of the URL in the image source. Fadebox will set itself up for all the images (or links containing images) inside the block-level element.
ImgColor
My photo gallery uses the imgcolor version of Fadebox, which allows you to specify a color outline for each image. The outline appears on mouseover and in the slideshow. It works using CSS3 box-shadow, so the color outlines function in Safari, Chrome, Firefox, and Konqueror but not Internet Explorer or Opera. To use imgcolor, use imgcolor-min.js instead of fadebox-min.js, and specify a color for each image with the data-color attribute.