Nikolaos Kantzelis ASP.Net Blog

This blog will focus on ASP.NET Framework

Sponsors

About Me

Great Blogs

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.


Comments

webbes said:

$(this).attr('src', imgsarray[(imgsarray.length++) % counter]) should be

$(this).attr('src', imgsarray[(counter++) % imgsarray.length])

cheers,

Wes

# September 20, 2010 11:02 AM

Oye said:

I tried using your code above and changed my images but the second image does not show. Is this a bug?

# April 13, 2011 12:36 PM

rixi said:

i tried the abovw code bt it doesn't work on my system.

could u plz answer....

# June 25, 2011 4:30 AM

fati said:

it really worked  well em so thankfull to ya

# September 13, 2011 12:38 PM

Bennyjnr said:

Thank you very much i was successfully helped by your instuctions

# March 29, 2012 7:48 AM

Hesha said:

Can i set this image out put to a background of a <Div> tag?

# April 13, 2012 8:37 AM

pakidude1 said:

i have a green line under the src="Scripts/jquery-1.4.1.js" and nothing shows up on my page??

# April 15, 2012 6:33 AM

Gordon said:

I’m not that much of a internet reader to be honest but your sites really nice, keep it up!

I'll go ahead and bookmark your website to come back in the future. Many thanks

# February 18, 2013 12:41 AM

Caron said:

This design is incredible! You definitely know how to

keep a reader entertained. Between your wit and your videos, I was almost moved to start my

own blog (well, almost...HaHa!) Excellent job.

I really enjoyed what you had to say, and more than that, how you presented it.

Too cool!

# February 22, 2013 10:51 PM