ASP.Net and JQuery - How to create a slideshow

This is the third post in a new series of posts regarding ASP.Net and JQuery. You can see the first post here. and the second one here.

I will try to present JQuery samples in this series of posts that will be most useful to asp.net developers. 

In this third post I will show you how to create a small slideshow using JQuery.

We will demonstrate this with a step by step example. I will use Visual Studio 2010 Ultimate. You can also use Visual Studio 2008 if you do not have Visual Studio 2010. Express editions work fine.

 

1) Create an ASP.Net website. Choose an appropriate name for your site.

2) Now we have the default web site ready. We will add some web server controls in the default.aspx page

3) Add an image webserver control on the default.aspx page

 

     <div>
         <asp:Image ID="SlideShow" runat="server" />
    </div>

 

4) In the Site.master file before the </head> tag add this line of code

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
5) Add a folder called "images" and inside the folder add your images. Make sure that all your images have the same width-height.
6) In the <head> section of the Site.master page we need to add the actual JQuery code that implements the slideshow.
 <script type="text/javascript">
        $(function () {
            var imgsarray = [
                    'images/image1.gif',
                    'images/image2.jpg',
                    'images/image3.jpg',
                    'images/image4.jpg'];
 
                        var counter = imgsarray.length;
                        var $SlideShow = $('img[id$=SlideShow]');
                    
                 $SlideShow.attr('src', imgsarray[counter - 1]);
                 setInterval(Slider, 5000);
                 function Slider() {
                 $SlideShow.fadeOut("slow", function () {
                 $(this).attr('src', imgsarray[(imgsarray.length++) % counter])
                 .fadeIn("slow");
                 });
                 }
                 });
</script>
7) We declare an array need to contain the images.
var imgsarray = [
                    'images/image1.gif',
                    'images/image2.jpg',
                    'images/image3.jpg',
                    'images/image4.jpg'];
 
 Then we find the length of the array. 
var counter = imgsarray.length;
Then we declare a variable that contains our image. Then we set the image src property to the last image.
var $SlideShow = $('img[id$=SlideShow]');
                    
$SlideShow.attr('src', imgsarray[counter - 1]);
 
We then use the JavaScript setInterval() function which delays execution of 
the SliderShow function for 5 seconds.
setInterval(SliderShow, 5000);
Inside the SliderShow function we use the fadeOut and fadeIn functions to achieve our goal.
I have tested this JQuery example with all the modern browsers.Please note that you do need to have a basic understanding of JQuery to fully understand this and the following JQuery & Asp.net tutorials.
Hope it helps.

9 Comments

Comments have been disabled for this content.