jQuery Lightbox Install Instructions

Lightbox is a very neat, simple and proffessional looking juqery script which can be used for photo galleries.

Setting up lightbox in very simple

1. Download the lightbox file and extract
2. Upload the .js files to the js folder and the css files to the css directory
3. Now add the codes in the header to include the js files.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script>

4.Now add the below code in the header to include the css file.

<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" media="screen" />

5. All the files are included. Now we need to activate the jquery. The style should be

<a href="IMAGEURL" title="DISPLAY TEXT"><img src="THUMBNAILURL" alt="" /></a>

6.Now add the attribute rell=”lightbox” to the <a>tag. Remember the main image should come inside the link and the thumb or small image should be inside the <a> tag. So that the small image will be shown and when the user clicks on the small image, the main image will be shown with the lightbox animation. The title attribute will be shown as the caption.

<a href="images/image.jpg" rel="lightbox" title="sample text"><img src="images/image_thumb.jpg" /></a>

7.If you need to show the image groupwise, use the following methord

<a href="images/image1.jpg" rel="lightbox[group1]" title="sample text"><img src="images/image_thumb1.jpg" /></a>
<a href="images/image2.jpg" rel="lightbox[group1]" title="sample text"><img src="images/image_thumb2.jpg" /></a>
<a href="images/image3.jpg" rel="lightbox[group1]" title="sample text"><img src="images/image_thumb3.jpg" /></a>
<a href="images/image4.jpg" rel="lightbox[group2]" title="sample text"><img src="images/image_thumb4.jpg" /></a>
<a href="images/image5.jpg" rel="lightbox[group2]" title="sample text"><img src="images/image_thumb5.jpg" /></a>
<a href="images/image6.jpg" rel="lightbox[group2]" title="sample text"><img src="images/image_thumb6.jpg" /></a>

A demo for lighbox will be shown in this post soon. Kindly check back later.