Plugins

There is a wealth of plugins that extend the functionality of jQuery to produce all kinds of applications from image galleries, to drop-down menus and form validation. The best plugins are well documented with example files for you to understand how to add the plugin to your own project.

Lightbox

Lightbox is a massively popular way of displaying images in a way that dramatically takes over the whole browser window. Lightbox was actually written with the ‘prototype’ javascript framework but a jQuery version has been made available.

The jQuery lightbox plugin can be downloaded from:

The download includes all the images, CSS and JS you need to add lightbox to your project. Once you have downloaded the files the first job would be include the necessary CSS and JS files in the <head> of your file. In the following example we are adding the lightbox CSS and lightbox JS file to complement our existing CSS file and reference to the jQuery library.

HTML

<link href="styles/main.css" rel="stylesheet" type="text/css" />
<link href="styles/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="scripts/jquery.lightbox-0.5.min.js"></script>

Once this is in place you can give any image lightbox style behavior by associating it to the lightBox() action. For example our jQuery below associates any &t;a> HTML tags inside a HTML element of ID ‘lbGallery’ to lightbox.

jQuery

$(document).ready(function() {
    $(function() {
    $('#lbGallery a').lightBox();
});

You will ideally have a large and thumb version of the images you wish to display. In the following example the thumbnails are placed inside <a> tags that through their href attribute reference the larger images. Click on the thumbs and larger images will open.

HTML

<div id="lbGallery">
<ul>
<li>
<a href="images/lb-windmill-1.jpg" title="Descriptive text.">
<img src="images/thumb-lb-windmill1.jpg" width="72" height="48" /></a>
</li>
<li>
<a href="images/lb-windmill-2.jpg" title="Descriptive text.">
<img src="images/thumb-lb-windmill2.jpg" width="72" height="48" /></a>
</li>
</ul>
</div>

Leave a Comment