jQuery LightBox Plugin

My favourite plugin! Mostly dedicated to pictures and galleries, this plugin is a zooming and animated tool, well designed and so practical for any demonstration purpose. Source and © Leandro Vieira Pinho.

Demonstration

LightBox and Images

Click here to open an image in a ligtbox

LightBox with galleries

How to setup

As usual, the first thing to do when you want to use a plugin is to include the required files in the header of your page.

For the LightBox, those files are first the jQuery library, then the plugin script, and an additional stylesheet:

/** jQuery Inclusion **/
<script type="text/javascript" src="Path_to/jQuery.js"></script>
/** Plugin Inclusion **/
<script type="text/javascript" src="Path_to/lightbox.js"></script>
/** Additional Style **/
<link href="Path_to/lightbox.css" rel="stylesheet" type="text/css" />

Then the next step is to declare how and when the LightBox will be displayed on your page.
The following code tells that every link that has a class LightBox will have its content opened in a LightBox.
It can be added in the page header or in a separate js file.

<script type="text/javascript">
  $(document).ready(function(){
    $(".lightbox").lightBox();
  });
</script>

According to what we\'ve just done, we then just need to create a link with a class LightBox and specify in its href attribute, what we would like to display in the LightBox:

<a href="Path_to_target" class="lightbox">Test LightBox Plugin</a>

As we\'ve mentionned in the introduction, this plugin becomes very interesting when used with a gallery of images, not just a single one.

To obtain the result shown in the demonstration, we\'ll use a slightly different approach.
The idea is to group several links together in a container, and specify that all those links are in fact a gallery. So first, let\'s create this container and those links:

<div id="gallery">
  <ul>
    <li><a href="image1.jpg"><img src="thumb_image1.jpg" /></a></li>
    <li><a href="image2.jpg"><img src="thumb_image2.jpg" /></a></li>
    <li><a href="image3.jpg"><img src="thumb_image3.jpg" /></a></li>
    <li><a href="image4.jpg"><img src="thumb_image4.jpg" /></a></li>
    <li><a href="image5.jpg"><img src="thumb_image5.jpg" /></a></li>
  </ul>
</div>