jQuery Enhanced Lightbox

The Enhanced Lightbox is a jQuery plugin that allows designers and developers to overlay single images and/or image collections in a webpage, using very little extra markup.

This plugin is an extension of Leandro Vieira's jQuery Lightbox, to which I added a few features I wanted, like the ability to add titles and descriptions to each image (using HTML5 data-* attributes), the option to fit large images to the browser window, and better lightbox positioning. I used these features quite a lot in this website, check for instance the Design Scrapbook.

I hope you find it useful. Enjoy!



Instructions and Examples

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:

Collection 1
 

Collection 2

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.