Five Ways to Spice Up Your Site with jQuery
By Akash Mehta2008-11-05
Thumbnails are a nice way to display images on a page, but they're often fairly limited in usefulness when trying to view detail. Of course, zooming in can present another challenge: do we create a new image description page but leave the current page, or do we view the image file directly in a new window and save the clutter? With lightboxes, we get the best of both worlds - we view the entire image quite comfortable on the screen, but we also don't leave the current page and can easily restore the original view. Here's a sample of a lightbox:
By using a lightbox jQuery plugin, we can easily turn clickable links to images into these visually appealing mini galleries on the fly.
To get started, download the .zip file from the project page, then copy out js/jquery.lightbox-0.5.pack.js and upload it to your server. Reference it in your <head> as needed:
<script type="text/javascript" src="/js/jquery.lightbox-0.5.pack.js"></script>
The .zip file includes some sample CSS you can use as a template, to easily modify the style of your lightboxes. Include it as well:
<link rel="stylesheet" type="text/css" href="/css/jquery.lightbox-0.5.css" media="screen" />
The best feature about this plugin is that it degrades gracefully and doesn't need any changes to your existing HTML. As long as you've got links to full size images, clicking them will open the lightbox once the effect is applied. Here's a simple example of compatible HTML:
<a href="image1.jpg"><img src="thumb_image1.jpg" width="72" height="72" alt="" /></a>
However, there is one limitation: you need a reliable way to select
which links should display lightboxes. If you have a photo gallery,
this is quite simple; you probably already have the gallery in a <div> with a class,
which is perfectly sufficient. Otherwise, you might need to apply a
class to individual links - if you use a CMS or blogging software, this
might already have been done for you. Once you select a jQuery object
set of anchors, you can call the lightBox() method on
them and you're ready to go. For example, if you have a list of links
with the class "thumbnail", you can lightbox-enable them with this easy
one-liner:
$(document).ready(function(){
$('a.thumbnail').lightBox();
}
There are all sorts of optional configurations you can use - check out the project page for more details.
Tutorial pages:
|
|
|||||||||
You might also want to check these out:
|
Link to This Tutorial Page!
