Instructions
Setting up
First of all, you'll need to include the jQuery library and the Enhanced Lightbox Javascript and CSS files in your HTML header, like this:
<head>
...
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-enlightbox.min.js"></script>
<link rel="stylesheet" href="css/enlightbox.css" type="text/css" media="screen"/>
...
</head>
Obviously, you'll need to adjust the paths if you place the files somewhere else. You'll also probably want to load jQuery via a CDN instead of hosting it yourself, in which case change that first line to this, which will use Google's:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
Usage
Calling the lightbox is as easy as setting a HTML link to the image, like this:
<a href="
big_image.jpg"><img src="
thumbnail.jpg"/></a>
However, that won't work just yet! You need to bind the lightbox to whatever jQuery selectors you want to be lightbox-able. So you need to embed a bit of Javascript at the end of your document to do just that. Some examples (beware of case sensitivity):
<script type="text/javascript">
$(function() {
// Select all links in the page:
$('a').lightBox();
// ...or select all links with lightbox class:
$('a.lightbox').lightBox();
// ...or select all links in object with gallery ID:
$('#gallery a').lightBox();
// ...or create multiple collections:
$('.photoset').each(function(){
$('a.lightbox', this).lightBox();
});
});
</script>
That last example will bind one lightbox to each set of links inside a photoset class. That allows you to have multiple galleries inside the same page, so that clicking for the next/previous image in a lightbox won't take you to another gallery. Here's an HTML example of that:
<div class="
photoset" id="
gallery_1">
<a class="
lightbox" href="gal_1/big_1.jpg"><img src="gal_1/thumb_1.jpg"/></a>
<a class="
lightbox" href="gal_1/big_2.jpg"><img src="gal_1/thumb_2.jpg"/></a>
<a class="
lightbox" href="gal_1/big_3.jpg"><img src="gal_1/thumb_3.jpg"/></a>
</div>
<div class="
photoset" id="
gallery_2">
<a class="
lightbox" href="gal_2/big_1.jpg"><img src="gal_2/thumb_1.jpg"/></a>
<a class="
lightbox" href="gal_2/big_2.jpg"><img src="gal_2/thumb_2.jpg"/></a>
<a class="
lightbox" href="gal_2/big_3.jpg"><img src="gal_2/thumb_3.jpg"/></a>
</div>
Which will produce something like this:
Please note how both sets are independent.
More options
Adding a title to each image is as easy as setting its link's title attribute:
<a class="lightbox" href="big.jpg"
title="The Title
"><img src="thumb.jpg"/></a>
You can also add a short text underneath the title by using the HTML5-compatible data-info attribute:
<a class="lightbox" href="big.jpg"
title="The Title
" data-info="Description...
">
<img src="thumbnail.jpg"/>
</a>
Here's a set of images with titles and descriptions:
By default, big images will be resized in order to fit the browser window, and a magnifying glass will appear when you hover the center of the image, allowing you to see it at 100% zoom. This behaviour makes sense when the thumbnails users first clicked on are quite small and the resized lightbox image is much bigger already.
However, if the 'thumbnail' is an image embedded in a blog post and pretty big already, that kind of behaviour is just stupid (you risk having your users getting a smaller image in the lightbox). So you set the data-maximized attribute with the value always in order to stop it:
<a class="lightbox" href="big.jpg"
data-maximized="always">
<img src="not_so_small.jpg"/>
</a>
That'll force the lightbox to forget about its resize-and-zoom powers, and just show the image at the original size. Compare the two examples (you may need to resize your browser window if it is too tall):
Advanced
A bunch of advanced options may also be set by editing the variables at the begining of the jquery-enlightbox.js script.You can change the location of the lightbox's UI images, the "Image X of Y" text, the lightbox's overlay color, etc. Alternatively, you may set those variables when binding the lightbox to jQuery selectors. Here's an example (again, be careful about case sensitivity):
<script type="text/javascript">
$(function() {
$('a.lightbox').lightBox({
overlayBgColor: '#FFF',
overlayOpacity: 0.6,
containerResizeSpeed: 400,
txtImage: 'Imagem',
txtOf: 'de'
});
});
</script>
These will change the overlay's background color and opacity, the speed at which resizing occurs, and the Image X of Y text. Read the start of jquery-enlightbox.js for the variables you may set.
Future Days
