Jquey Tutorial for Slideshow, Jquery Image gallery, Image galley with description using Jquery, Image Slideshow using Lightbox in Jquery Image Slideshow using Lightbox in Jquery

while searching for Slideshow(image gallery) I found Jquery light box plugin which use Modelbox (Light box) to view show gallery image and its description.

This image gallery is too easy to implement on our websites.

jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery's selector.

Here I am providing the tutorial to implement the image gallery.

HTML Source Code

<div id="gallery">
    <ul>
        <li>
            <a href="http://leandrovieira.com/projects/jquery/lightbox/photos/image1.jpg" title="put your descript here">
                <img src="http://leandrovieira.com/projects/jquery/lightbox/photos/thumb_image1.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="http://leandrovieira.com/projects/jquery/lightbox/photos/image2.jpg" title="put your descript here">
                <img src="http://leandrovieira.com/projects/jquery/lightbox/photos/thumb_image2.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="http://leandrovieira.com/projects/jquery/lightbox/photos/image3.jpg" title="put your descript here">
                <img src="http://leandrovieira.com/projects/jquery/lightbox/photos/thumb_image3.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="http://leandrovieira.com/projects/jquery/lightbox/photos/image4.jpg" title="put your descript here">
                <img src="http://leandrovieira.com/projects/jquery/lightbox/photos/thumb_image4.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="http://leandrovieira.com/projects/jquery/lightbox/photos/image5.jpg" title="put your descript here">
                <img src="http://leandrovieira.com/projects/jquery/lightbox/photos/thumb_image5.jpg" width="72" height="72" alt="" />
            </a>
        </li>
    </ul>
</div>

CSS and Script

http://119.82.71.124/fb/jquey_lightbox/js/jquery.js
http://119.82.71.124/fb/jquey_lightbox/js/jquery.lightbox-0.5.js
http://119.82.71.124/fb/jquey_lightbox/css/jquery.lightbox-0.5.css
<script type="text/javascript">
    $(function() {
        $('#gallery a').lightBox();
    });
    </script>
       <style type="text/css">
    /* jQuery lightBox plugin - Gallery style */
    #gallery {
        background-color: #444;
        padding: 10px;
        width: 520px;
    }
    #gallery ul { list-style: none; }
    #gallery ul li { display: inline; }
    #gallery ul img {
        border: 5px solid #3e3e3e;
        border-width: 5px 5px 20px;
    }
    #gallery ul a:hover img {
        border: 5px solid #fff;
        border-width: 5px 5px 20px;
        color: #fff;
    }
    #gallery ul a:hover { color: #fff; }
    </style>

Modification
Here we mention the ID selector name in which the gallery exist. you can use any of id exist in you webpage.


$(function() {
        $('#gallery a').lightBox();
    });


Image and thumbnail information

BIG Image: Anchor tags href contain the URL of Bigger image which has to be open after click on image thumbnails.


Description: For inserting Description of image we need to mention all description into anchor tag's TITLE attribute.

Thumb: For Thumbnail we use IMG tag as small image.

<a href="http://leandrovieira.com/projects/jquery/lightbox/photos/image1.jpg" title="put your descript here">
                <img src="http://leandrovieira.com/projects/jquery/lightbox/photos/thumb_image1.jpg" width="72" height="72" alt="" />
            </a>