jQuery: Nice looking slide show in no time !!

Sometimes we need to add sideshows to our website. Today we are going to see how to achieve it very quickly with a little bit of coding. We will use the jQuery to reduce the amount of coding we have to do. Now let us see how can we do it -

What we will need -

1. jQuery script [jquery-1.3.2.min.js]
2. Images which will appear in the slide show
3. Some JS and HTML coding

 First we will need to add the jQuery library file.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

 Next we need to setup our own jQuery code to define the slide show materials and properties.

 <script type="text/javascript">
    var srrc = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"];

srrc is the array variable which holds the image paths of the slide show images. You can add as many path as you want. 

    var id =0;
    var max = 5;

id is the variable whose value tells the browser to load which images from the srrc array. It is acting as a index variable for the srrc array. max variable defines the maximum number of images defined in the image array.

function run() {
        id = id + 1;
        id = id % max;
        var cur = srrc[id];

 Nothing much to describe here. cur variable holds the path for current image which we are going to display.

        $("#images").hide();
        $("#images").attr({src: cur, alt:'', border:0});
        $("#images").fadeIn("slow");

$("#images") will return the handle of the html element with the id of images. Don't worry about the element for now, it is a <img> element, we will be introduced with it in the latter section.
First we used the jQuery hide() function to hide the element.
Then we use the jQuery attr() function to add the html attribute to the <img> element. The important part is the src: cur. cur variable is holding the image path for current image. So, we just add the image path to the img tag. It can be translated as <img src="the image path in the cur variable">.
Now the img element has the image but it is hidden. Now we show the whole element using the jQuery fadeIn() effect. This adds nice looking transition effect while changing the images.

        setTimeout(run,10000);
    }

 Now to run this script indefinitely we use setTimeout() javascript function. We want to keep each images for 10 secs. So the second parameter is 10000 (it is in mili secs). The first parameter is a callback function.
Whenever 10 secs has passed since the timeOut() function is called, the callback function is called automatically.

    $(document).ready(setTimeout(run,3000));
</script>

 Lastly we use the $(document).ready() function to initiate the first call to the run function.

Now all we need is to add the <img> element into body section of the html page

<img src="1.jpg" width="395px" height="245px" alt="" id="images" border="0" />

 We are all done.
Here is the total work.
If you have any suggestion or question please leave a comment.