Subscribe by RSS
Don’t Box Me In
6/30/2010 12:00 AM By Jeff BWe’re going to take a look at a favorite effect of fellow developers and designers: the lightbox. In case you’ve been living under a rock, a lightbox, in the sense of a website, is a technique for zooming an image file to full size or the size of the viewport (whichever is lesser) while “dimming” the rest of the site. It’s quite attractive, and certainly better than having a visitor open the image in the browser directly. If you’re looking for jobs in web development, this is a great skill to show off to potential clients and employers.
As for how to set up the lightbox, there are two recommendations from this developer: ColorBox and FancyBox. They each have similar features, but out of the box, are styled differently, and FancyBox has the additional ability to display SWF movies.
So, let’s set up each one with a single image. We’ll start with FancyBox, then move on to ColorBox.
Fancy Box
First off, you need to include jQuery and FancyBox itself, so download FancyBox from their website and put it where you like.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.1.pack.js"></script>Then you need FancyBox’s CSS. You’ll need to edit the CSS and change the src paths for AlphaImageLoader to be relative to your HTML document, and have the background-image declarations be relative to FancyBox’s CSS. Then pop this in there (assuming you didn’t place FancyBox’s CSS in another folder):
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen" />Now you’re ready to go with FancyBox! So let’s link up an image:
<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>That’s it. Head on over to FancyBox’s how to for more instruction.
ColorBox
Just like FancyBox, we need to include the JavaScript:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/colorbox/jquery.colorbox.js"></script>And the CSS:
<link type="text/css" media="screen" rel="stylesheet" href="/colorbox/colorbox.css" />But here’s where things differ. ColorBox doesn’t have any set class or id for determining which items are lightboxed. So you actually supply that in a <script> element in the <head>, like so:
<script type="text/javascript">
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$("a[rel='lightbox']").colorbox();
});
</script>What’s happening here? Well, the syntax is thus:
$('selector').colorbox({key:value, key:value, key:value}, callback);So, I’ve set a[rel='lightbox'] as my selector, which corresponds to any <a> tag with rel="lightbox" assigned to it. Like so:
<a rel="lighbox" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>You can assign any selector, though. For example:
<script type="text/javascript">
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$(".lightboxed").colorbox();
});
</script>Would correspond to:
<a class="lighboxed" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>Head on over to the main page for ColorBox for more examples.
