ASP.NET AJAX SlideShow Extender - Some Common Tips and Tricks

Posted by: Suprotim Agarwal , on 3/16/2009, in Category ASP.NET AJAX
Views: 204669
Abstract: The ASP.NET AJAX SlideShow is cool extender control that comes with the ASP.NET AJAX control toolkit and can be used to create a Slide show by looping images in a round robin fashion. The images are configured with the SlideShow by using a PageMethod or a webservice. In this article, we will see common tips and tricks while using the SlideShow Extender control.
ASP.NET AJAX SlideShow Extender - Some Common Tips and Tricks
 
SlideShow is cool extender control that comes with the ASP.NET AJAX control toolkit and can be used to create a Slide show by looping images in a round robin fashion. The images are configured with the SlideShow by using a PageMethod or a webservice. In this article, we will see common tips and tricks while using the SlideShow Extender control. In this article, I assume that you are familiar with the SlideShow Extender. If you want to know more about this control, check the documentation over here.
The Ajax Control Toolkit is a separate download that is built on top of the Microsoft ASP.NET Ajax framework. The toolkit allows you to create extenders and controls to enhance the current ASP.NET server controls.
The toolkit can be downloaded from http://tinyurl.com/ajax-toolkit.   Information on how to install the toolkit can be found at http://tinyurl.com/toolkit-info. Let us get started.
How to create a Slide Show with images kept on your local disk using the ASP.NET AJAX SlideShow Extender
Here’s a simple demonstration of creating a Slide Show with the images on your disk, using the ASP.NET AJAX SlideShow Extender. I have created an ASP.NET 3.5 website. Drag and drop the SlideShow Extender from the AJAX Control Toolkit on to the page. Create a folder called ‘images’ in your project and add some images to them. After setting a few properties on the SlideShow, the markup would look similar to the following.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
    body
    {
      margin:50px 0px; padding:0px;
      text-align:center;
      }
     
    .Image
    {
          width:475px;
          margin:0px auto;
          text-align:center;
          padding:20px;
          border:1px dashed gray;
          background-color:Silver;
      }
 
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div class="Image">
             <asp:Image ID="img1" runat="server"
             Height="400px" Width="400px"
             ImageUrl="~/images/Autumn Leaves.jpg" />
        </div>       
        <cc1:SlideShowExtender ID="SlideShowExtender1" runat="server"
BehaviorID="SSBehaviorID"
            TargetControlID="img1"
            SlideShowServiceMethod="GetSlides"
            AutoPlay="true"
            ImageDescriptionLabelID="lblDesc"
            NextButtonID="btnNext"
            PreviousButtonID="btnPrev"
            PlayButtonID="btnPlay"
            PlayButtonText="Play"
            StopButtonText="Stop"
            Loop="true" >
        </cc1:SlideShowExtender>
        <div>
            <asp:Label ID="lblDesc" runat="server" Text=""></asp:Label><br />
            <asp:Button ID="btnPrev" runat="server" Text="Previous" />
            <asp:Button ID="btnPlay" runat="server" Text="" />
            <asp:Button ID="btnNext" runat="server" Text="Next" />
        </div>
    </div>
    </form>
</body>
</html>
 
As shown in the markup, the SlideShow requires a PageMethod called GetSlides that will be called to supply images. Add the following PageMethod GetSlides() in your Default.aspx.cs or .vb that returns a Slide array to the SlideShow Extender control
C#
    [System.Web.Services.WebMethod]
    [System.Web.Script.Services.ScriptMethod]
    public static AjaxControlToolkit.Slide[] GetSlides()
    {
        AjaxControlToolkit.Slide[] imgSlide = new AjaxControlToolkit.Slide[4];
 
        imgSlide[0] = new AjaxControlToolkit.Slide("images/Autumn Leaves.jpg","Autumn","Autumn Leaves");
        imgSlide[1] = new AjaxControlToolkit.Slide("images/Creek.jpg","Creek","Creek");
        imgSlide[2] = new AjaxControlToolkit.Slide("images/Desert Landscape.jpg", "Landscape", "Landscape");
        imgSlide[3] = new AjaxControlToolkit.Slide("images/Dock.jpg","Dock","Dock");
 
        return (imgSlide);
    }
VB.NET
      <System.Web.Services.WebMethod, System.Web.Script.Services.ScriptMethod> _
      Public Shared Function GetSlides() As AjaxControlToolkit.Slide()
            Dim imgSlide(3) As AjaxControlToolkit.Slide
 
            imgSlide(0) = New AjaxControlToolkit.Slide("images/Autumn Leaves.jpg","Autumn","Autumn Leaves")
            imgSlide(1) = New AjaxControlToolkit.Slide("images/Creek.jpg","Creek","Creek")
            imgSlide(2) = New AjaxControlToolkit.Slide("images/Desert Landscape.jpg", "Landscape", "Landscape")
            imgSlide(3) = New AjaxControlToolkit.Slide("images/Dock.jpg","Dock","Dock")
 
            Return (imgSlide)
      End Function
When you run the application, you can see a Slide Show of the images as shown below.
Slide Show
Smooth and Simple!
How to change the time interval between slides at runtime in the ASP.NET AJAX SlideShow Extender
A simple yet effective way is to use JavaScript.
To do so, first add one textbox(txtInterval) and a HTML button control to the page. On clicking the button, the time value in the textbox will be passed to a JavaScript function called changeSlideTime(). In this function, we will retrieve the behavior id of the SliderExtender and then use the set_interval() method of the timer, to increase or decrease the play duration between two slides.
       <div>
            <asp:TextBox ID="txtInterval" runat="server"></asp:TextBox>
            <input id="btnChangeTime" type="button" value="Change Time" onclick="changeSlideTime()" />           
        </div>
Add the following JavaScript code in the <head> element of your page. The code uses the set_interval() function of the timer to change the Time Interval in between two slides.
    <script type="text/javascript">
        function changeSlideTime() {
            var slide = $find('SSBehaviorID');
            var txt = $get('<%=txtInterval.ClientID%>').value;
            if(txt > 0 && txt != null)
            slide._timer.set_interval(txt);
           
        }
    </script>
Note: The Time duration is to be supplied in milliseconds. So to create a play duration of 10 seconds between two slides, pass a value of 10000.
 
How to Skip certain Slides based on a condition in the ASP.NET AJAX SlideShow Extender
In order to skip slides based on a certain condition, use the slideChanging event and specify the slide index to be skipped. Then use the set_cancel(true) to skip the slide as shown below:
    <script type="text/javascript">
        function pageLoad() {
            var slide = $find('SSBehaviorID');
            slide.add_slideChanging(skipSlides);
        }
 
        function skipSlides(sender, args) {
            var idx = args.get_slideIndex();
            // Specify your condition over here
            if (idx == 2)
                args.set_cancel(true);
           
        }
   
    </script>
 
How to Fade In Fade Out Images in the ASP.NET AJAX SlideShow Extender.
Raymon Wen demonstrated a way to create animations with images in the SlideShow Extender using AnimationExtenders. Add an AnimationExtender from the AJAX Control Toolbox to the page. Configure the FadeIn FadeOut sequences as shown in the mark up over here:
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div class="Image">
             <asp:Image ID="img1" runat="server"
             Height="400px" Width="400px"
             ImageUrl="~/images/Autumn Leaves.jpg" />
        </div>       
       
        <cc1:SlideShowExtender ID="SlideShowExtender1" runat="server"
            BehaviorID="SSBehaviorID" TargetControlID="img1"
            SlideShowServiceMethod="GetSlides" AutoPlay="true"
            ImageDescriptionLabelID="lblDesc" NextButtonID="btnNext"
            PreviousButtonID="btnPrev" PlayButtonID="btnPlay"
            PlayButtonText="Play" StopButtonText="Stop"
            Loop="true" >
        </cc1:SlideShowExtender>
 
        <cc1:AnimationExtender id="MyExtender" runat="server" BehaviorID="ae"
        TargetControlID="img1">
          <Animations>
            <OnLoad>
            <Sequence>
              <FadeOut Duration="0" Fps="20" />
              <FadeIn Duration="0" Fps="20" />
            </Sequence>
            </OnLoad>
          </Animations>
        </cc1:AnimationExtender>
 
       
        <div>
            <asp:Label ID="lblDesc" runat="server" Text=""></asp:Label><br />
            <asp:Button ID="btnPrev" runat="server" Text="Previous" />
            <asp:Button ID="btnPlay" runat="server" Text="" />
            <asp:Button ID="btnNext" runat="server" Text="Next" />
        </div>
       
        <div>
            <asp:TextBox ID="txtInterval" runat="server"></asp:TextBox>
            <input id="btnChangeTime" type="button" value="Change Time" onclick="changeSlideTime()" />           
        </div>
    </div>
    </form>
</body>
</html>
 
Now in the <head> section of the page, add the following JavaScript code to play the animation during the slideChanging event as shown below:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
    body
    {
      margin:50px 0px; padding:0px;
      text-align:center;
      }
     
    .Image
    {
          width:475px;
          margin:0px auto;
          text-align:center;
          padding:20px;
          border:1px dashed gray;
          background-color:Silver;
      }
 
    </style>
   
    <script type="text/javascript">
        function pageLoad() {
            var slide = $find('SSBehaviorID');
            slide.add_slideChanging(animateSlides);
            var ae = $find("ae");
            var be = ae.get_OnLoadBehavior();
            var an = be.get_animation();
            fadein = an.get_animations()[1];
            fadeout = an.get_animations()[0];
 
            fadein.set_duration(1.0);
            fadeout.set_duration(1.0);
 
        }
 
        function animateSlides() {
            fadein.play();
            window.setTimeout("fadeout.play()", 2000);
 
        } 
   
    </script>
   
</head>
 
I hope you enjoyed these tips with the SlideShow Extender control. If you have used any useful hacks or tips with this control, use the comments section to share it with the viewers. I hope you liked the article and I thank you for viewing it.
If you liked the article,  Subscribe to the RSS Feed or Subscribe Via Email  
Give a +1 to this article if you think it was well written. Thanks!
Recommended Articles
Suprotim Agarwal, ASP.NET Architecture MVP, MCSD, MCAD, MCDBA, MCSE, is the CEO of A2Z Knowledge Visuals Pvt. He primarily works as an Architect Consultant and provides consultancy on how to design and develop .NET centric database solutions.

Suprotim is the founder and primary contributor to DotNetCurry, DNC .NET Magazine, SQLServerCurry and DevCurry. He has also written an EBook 51 Recipes using jQuery with ASP.NET Controls. and is authoring another one at The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal


Page copy protected against web site content infringement by Copyscape


User Feedback
Comment posted by rin on Friday, April 3, 2009 12:29 AM
do u know how to display images from different folder("album") from the main folder("PhotoGallery") using this slideshow extender?
Comment posted by ronit on Monday, April 6, 2009 5:58 AM
very good
Comment posted by Mahesh on Monday, April 13, 2009 6:53 AM
great job done. its working fine

Comment posted by boe on Thursday, April 16, 2009 1:01 PM
Hi there,
nice work!  Do you know how to subscribe to the value of the ImageDescriptionLabelID?

thx in advance boe
Comment posted by Suprotim Agarwal on Friday, April 17, 2009 6:02 AM
Subscribe? Please elaborate. The ImageDescriptionLabelID is declared as

[ExtenderControlProperty]
[DefaultValue("")]
[IDReferenceProperty(typeof(WebControl))]
[ClientPropertyName("imageDescriptionLabelID")]
[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Naming", "CA1706:ShortAcronymsShouldBeUppercase", Justification = "Following ASP.NET AJAX pattern")]
        public string ImageDescriptionLabelID
        {
            get { return GetPropertyValue("ImageDescriptionLabelID", ""); }
            set { SetPropertyValue("ImageDescriptionLabelID", value); }
        }

Comment posted by Shahid Majeed on Wednesday, May 13, 2009 4:24 AM
after adding animation control my slideshow is just showing first picture its not playing.

here is code
SlideShow Service:

/// <summary>
/// Summary description for SlideService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService()]

public class SlideService : System.Web.Services.WebService {

    public SlideService ()
    {
    }
    [WebMethod]
    public AjaxControlToolkit.Slide[] GetSlide()
    {
        AjaxControlToolkit.Slide[] slides = new AjaxControlToolkit.Slide[4];
        slides[0] = new AjaxControlToolkit.Slide("Images/Group/Animation/kingsuk group 1.jpg", "", "");
        slides[1] = new AjaxControlToolkit.Slide("Images/Group/Animation/kingsuk group 2.jpg", "", "");
        slides[2] = new AjaxControlToolkit.Slide("Images/Group/Animation/kingsuk group 3.jpg", "", "");
        slides[3] = new AjaxControlToolkit.Slide("Images/Group/Animation/kingsuk group 4.jpg", "", "");
        
        return (slides);
    }
    
}


HTML Code:

<cc1:SlideShowExtender ID="SlideShow1" runat="server"
                                BehaviorID="BhSlideShow1"
                                TargetControlID="Image1"
                                SlideShowServicePath="SlideService.asmx"
                                SlideShowServiceMethod="GetSlide"
                                AutoPlay="true"
                                Loop="true"
                                PlayInterval="2000">
            
                        </cc1:SlideShowExtender>
                        <cc1:AnimationExtender id="MyExtender" runat="server" BehaviorID="ae"
                            TargetControlID="Image1">
                              <Animations>
                                <OnLoad>
                                <Sequence>
                                  <FadeOut Duration="0" Fps="20" />
                                  <FadeIn Duration="0" Fps="20" />
                                </Sequence>
                                </OnLoad>
                              </Animations>
                         </cc1:AnimationExtender>
Comment posted by Shahid Majeed on Wednesday, May 13, 2009 4:25 AM
anybody reply me on shahid.majeed@gmail.com
Comment posted by maker911 on Friday, June 12, 2009 5:05 AM
Why I fully follow what you write, but the picture (stated on 1st picture) cannot change. and all this button totally no function. my code as below:-                                <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
    body
    {
      margin:50px 0px; padding:0px;
      text-align:center;
      }
    
    .Image
    {
          width:475px;
          margin:0px auto;
          text-align:center;
          padding:20px;
          border:1px dashed gray;
          background-color:Silver;
      }

    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        
        </asp:ScriptManager>

      <div class="Image">
            
      <script runat="Server" type="text/C#">
        [System.Web.Services.WebMethod]
        [System.Web.Script.Services.ScriptMethod]
        public static AjaxControlToolkit.Slide[] GetSlides()
        {
            return new AjaxControlToolkit.Slide[] {
            new AjaxControlToolkit.Slide("images/Bluehills.jpg", "Blue Hills", "Go Blue"),
            new AjaxControlToolkit.Slide("images/Sunset.jpg", "Sunset", "Setting sun"),
            new AjaxControlToolkit.Slide("images/Winter.jpg", "Winter", "Wintery..."),
            new AjaxControlToolkit.Slide("images/VerticalPicture.jpg", "Sedona", "Portrait style picture")};
        }
      </script>
              
             <asp:Image ID="img1" runat="server"
             Height="400px" Width="400px"
             ImageUrl="~/images/Bluehills.jpg" />
            
            <!--
            <asp:Image ID="Image1" runat="server" Height="400px" Width="400px" /><br />
            <br />-->
            
            <asp:Label ID="lblDesc" runat="server" Text=""></asp:Label><br />
            <asp:Button ID="btnPrev" runat="server" Text="Previous" />
            <asp:Button ID="btnPlay" runat="server" Text="Play" />
            <asp:Button ID="btnNext" runat="server" Text="Next" />  
            
          <ajaxToolkit:SlideShowExtender ID="SlideShowExtender1" runat="server"
            BehaviorID="SSBehaviorID"
            TargetControlID="img1"
            SlideShowServiceMethod="GetSlides"
            AutoPlay="true"
            ImageDescriptionLabelID="lblDesc"
            NextButtonID="btnNext"
            PreviousButtonID="btnPrev"
            PlayButtonID="btnPlay"
            PlayButtonText="Play"
            StopButtonText="Stop"
            Loop="true" >        

          </ajaxToolkit:SlideShowExtender>
          

        </div>
    </div>
    </form>
</body>
</html>
Comment posted by Suprotim Agarwal on Monday, June 15, 2009 9:25 AM
maker911: I tried my code again and it works as describes. Your code too looks similar. Just copy past my code, run it first and then make necessary changes. What browser are you using?
Comment posted by miken on Monday, June 15, 2009 4:03 PM
Is there anyway possible to display copy below the slideshow as to which image in the slideshow is being displayed, something like "image X of Y" where X is the number of the displayed image and Y is the total number of images?  So, 2 of 9, for example?
Comment posted by Ubianco on Friday, August 21, 2009 3:14 PM
I followed your example,and geting the same results as implied by first comment? IE 8.0
Image doesn't change?
Comment posted by Suprotim Agarwal on Thursday, August 27, 2009 4:24 AM
Ubianco: I haven't got the chance to check it in IE8. It works well in IE7, Firefox 3, Chrome.
Comment posted by TOM on Sunday, September 20, 2009 2:55 AM
Why Dont you provide source code?
Comment posted by Jahan Karim on Monday, October 5, 2009 8:35 AM
my slide show on MVC project not working after i host my work on IIS. it( Ajax slide show on MVC project ) is working on Visual Studio 2008 while i run my application but after hosted at IIS slideshow not moving just the first picture ..

anybody here tell me AjaxToolKit and Ajax extender can integrate on MVC project or not !!!???

Comment posted by Jahan Karim on Sunday, November 29, 2009 1:55 AM
its OK ajaxslideshow on MVC project .. i mean working fine
http://www.unitednur.net/
good luck
Comment posted by Stine on Wednesday, January 20, 2010 2:47 AM
The transitions/fadin g i bliking when I do this.
Does anyone have the same problem?
Comment posted by Alok Aggarwal on Wednesday, January 20, 2010 6:10 AM
Hi sir,
i tried your code but not executing in my case(no error is also there).
u stated
[System.Web.Services.WebMethod]
    [System.Web.Script.Services.ScriptMethod]
    public static AjaxControlToolkit.Slide[] GetSlides()
    {
        AjaxControlToolkit.Slide[] imgSlide = new AjaxControlToolkit.Slide[4];

        imgSlide[0] = new AjaxControlToolkit.Slide("images/Autumn Leaves.jpg","Autumn","Autumn Leaves");
        imgSlide[1] = new AjaxControlToolkit.Slide("images/Creek.jpg","Creek","Creek");
        imgSlide[2] = new AjaxControlToolkit.Slide("images/Desert Landscape.jpg", "Landscape", "Landscape");
        imgSlide[3] = new AjaxControlToolkit.Slide("images/Dock.jpg","Dock","Dock");

        return (imgSlide);
    }

to paste it in aspx.cs page
but how and where

i even tried this code in webservice page but again same story of not executing.
please help
Comment posted by Tadarice on Sunday, March 21, 2010 8:29 AM
This code has helped me a ton. I am building a website for a photographer and I am trying to use the slideshow extender with a fade effect. Everything works great in Firefox, but IE8 flickers and the fade-ins and fade-outs aren't coinciding with the image changes. Is there a fix for this that I am missing? The slideshow works fine without the fade effects in IE8, but I would really like to get it working with the effects. Thanks again for the great tutorial and the very helpful comments! Any advice would be greatly appreciated.
Comment posted by Suprotim Agarwal on Monday, March 22, 2010 11:03 PM
Tadarice: To be honest, this code was never tested in IE8! I would suggest you to search this site for my jQuery solution with the sliding effect. That works in IE8.
Comment posted by Brashaket Pratap Singh Bais on Sunday, May 9, 2010 5:52 AM
Wow
Comment posted by swami on Monday, June 7, 2010 7:34 AM
Fantastic ........
Comment posted by Dotnetlady on Sunday, September 12, 2010 8:09 AM
I am using SlideHowExtender in MVC application. It is not working.

I have put the same code in simple .aspx page it is working properly in same application.

Page  : Views/Shared/Site.master  OR On Views/Home/Index.aspx
Image are in : Content/SlideShowHome

<script runat="Server" type="text/C#">
        [System.Web.Services.WebMethod]
        [System.Web.Script.Services.ScriptMethod]

        public static AjaxControlToolkit.Slide[] GetSlides()
        {
            AjaxControlToolkit.Slide[] slides = new AjaxControlToolkit.Slide[6];
            slides[0] = new AjaxControlToolkit.Slide(HttpContext.Current.Server.MapPath("~/Content/SlideShowHome/music1.jpg"), "music1", "music1");
            slides[1] = new AjaxControlToolkit.Slide(HttpContext.Current.Server.MapPath("~/Content/SlideShowHome/music2.jpg"), "music2", "music2");
            slides[2] = new AjaxControlToolkit.Slide(HttpContext.Current.Server.MapPath("~/Content/SlideShowHome/music3.jpg"), "music3", "music3");
            slides[3] = new AjaxControlToolkit.Slide(HttpContext.Current.Server.MapPath("~/Content/SlideShowHome/music4.jpg"), "music4", "music4");
            slides[4] = new AjaxControlToolkit.Slide(HttpContext.Current.Server.MapPath("~/Content/SlideShowHome/music5.jpg"), "music5", "music5");
            slides[5] = new AjaxControlToolkit.Slide(HttpContext.Current.Server.MapPath("~/Content/SlideShowHome/music6.jpg"), "music6", "music6");
            return (slides);
        }
    </script>

......

<div id="slideshow">
                    <ajaxToolkit:ToolkitScriptManager ID="ScriptManager2" runat="server" ScriptMode="Release" />
                    <asp:Image runat="server" ID="imgShow" Height="200" Width="300" ImageUrl="~/Content/SlideShowHome/music1.jpg" />
                    <ajaxToolkit:SlideShowExtender ID="slideShowExtender1" runat="Server" TargetControlID="imgShow"
                        ImageDescriptionLabelID="lableImageDetail" Loop="true" AutoPlay="true" SlideShowServiceMethod="GetSlides" />
</div>

Please Help Me!!!
Comment posted by efbolton on Wednesday, December 22, 2010 3:54 PM
excellent code & very clearly set out!  MUCH ths!!!!!!
Comment posted by Shaun College on Thursday, December 23, 2010 8:48 AM
The "Set Interval" code? Doesn't work.
Comment posted by efbolton on Thursday, December 23, 2010 1:48 PM
hi again!   any ideas on how to add a clickable hyperlink for each image? i switched out the the image for an imagebutton as well as a hyperlnk for the label but cant seem to get the postbackurl &/or the navigateurl fields populated. i guess the addrotater control would acomplish this but would like to do w/ the slideshow. thxs again for the useful code!
Comment posted by Suprotim Agarwal on Friday, December 24, 2010 4:31 AM
efbolton: If you want to do the adrotator with slideshows, check this article - Rotate Ads using jQuery and ASP.NET AdRotator Control http://www.dotnetcurry.com/ShowArticle.aspx?ID=568

Shaun: Do you get an error?
Comment posted by efbolton on Tuesday, December 28, 2010 10:24 AM
yes i'd seen that & it also worked well 4 me! thxs again for the great code!! has been VERY helpful!!!
Comment posted by Arunkumar on Tuesday, February 8, 2011 2:46 AM
Hi..
In the above sideshow, i want create links on each image dynamically and images also come from database.please,tell me
the solution for how to create links on each image dynamically..
Comment posted by Mansour on Sunday, March 13, 2011 3:19 PM
I have this error appears on my page after running
Line: 93
Error: 'null' is null or not an object
Comment posted by Jeanne on Sunday, April 3, 2011 1:22 AM
Hi...
I have a field named "Image Description" in my table (Gallery). I would like to retrieve the field "Image Description" instead of the name of image.So, how could I get this?
Thanks in advance!
Comment posted by Jeanne on Sunday, April 3, 2011 6:41 AM
Hi...
I have a field named "Image Description" in my table (Gallery). I would like to retrieve the field "Image Description" instead of the name of image.So, how could I get this?
Thanks in advance!
Comment posted by sunil on Tuesday, May 10, 2011 1:30 AM
Hi,
Request you kindly help me in providing idea  for how to increase the performance of the GridView while loading excel data having 1000 records.

Please provide me ur mail id, so taht i can contact u directly.Its really very urgent.

Please help.
Comment posted by manjeet chauhan on Tuesday, May 31, 2011 9:03 AM
String query:
string name =   DropDownList1.SelectedItem.ToString();
         Response.Redirect("Default.aspx?abc="+name);
Comment posted by manjeet chauhan on Tuesday, May 31, 2011 9:05 AM
this code for another page:
Label1.Text = Request.QueryString["abc"].ToString();
Comment posted by chan on Thursday, June 9, 2011 10:03 AM
I want to get the index of slide click on image click .

How to get the index programically
Comment posted by raghav on Friday, June 17, 2011 5:59 AM
Hi.
i have placed the slide show extender in one of the .net web pages using ajax toolkit and its working fine, but when i use it on the masterpage it does not work..please advice.
Comment posted by Steve on Thursday, June 23, 2011 5:27 PM
Great article but the AnimationExtender and pageLoad() don't work with next previous buttons.  Next Previous should not unload the image after the duration time. Otherwise, cool example.
Comment posted by tomer on Monday, August 8, 2011 7:56 AM
hi
why is the border fadeout as well? how can i stop it?
and
my target image is on the master page and when i enable the slideshow, the image move to the right.
how can i change it?
thanks
Comment posted by tomer on Tuesday, August 9, 2011 5:44 AM
hi
why is the border fadeout as well? how can i stop it?
and
my target image is on the master page and when i enable the slideshow, the image move to the right.
how can i change it?
thanks
Comment posted by kritika on Wednesday, September 21, 2011 6:11 AM
what is the code of play prevous and next button event....plzz tell me
Comment posted by Jake Remulta on Friday, December 16, 2011 2:04 AM
Thanks a lot..
Comment posted by steve on Saturday, January 28, 2012 5:07 PM
Hi Suprotim Agarwal,
I have the code below working yet the animateSlides() does nothing.  No fade out and changing the time does nothing.  Tested in IE9 and Firefox and Chrome.  If you are wondering about the stopButton,  I wanted to change the ImageButton for Pay and Pause  I am looking into a way to do that still.  So for now I just want to get the fadeout working

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="PhotoGallery.aspx.cs" Inherits="PhotoGallery" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolKit" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head_content" Runat="Server">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
           function pageLoad() {
           var slide = $find('SSBehaviorID');
            slide.add_slideChanging(animateSlides);
            var ae = $find("ae");
            var be = ae.get_OnLoadBehavior();
            var an = be.get_animation();
            fadein = an.get_animations()[1];
            fadeout = an.get_animations()[0];
            fadein.set_duration(1.0);
            fadeout.set_duration(1.0);}
        });
        
        function animateSlides() {

            fadein.play();
            window.setTimeout("fadeout.play()", 4000);
        }

    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="main_content" Runat="Server">
     <div id="main_content_div" class="main_content" >
        <div style="margin:20px; text-align:center;" >
            <asp:Image ID="Image1" runat="server"
                Height="300"
                Style="border: 1px solid black;width:auto"
                ImageUrl="../Caffe/HomeAlbum/001.jpg"
                AlternateText="Caffe Prego" />
            <asp:Label runat="server" ID="imageDescription" CssClass="slideDescription"></asp:Label><br /><br />
            <asp:ImageButton runat="Server" ID="prevButton" ImageUrl="~/Images/ButtonPrevious.png" />
            <asp:ImageButton runat="Server" ID="playButton" ImageUrl="~/Images/ButtonPlay.png" />
            <asp:ImageButton runat="Server" ID="nextButton" ImageUrl="~/Images/ButtonNext.png" />
            <asp:ImageButton runat="server" ID="stopButton" ImageUrl="~/Images/ButtonPause.png" Visible="false"/>
            <ajaxToolKit:SlideShowExtender ID="SlideShowExtender1" runat="server"
                TargetControlID="Image1"
                SlideShowServiceMethod="GetSlides"
                PlayInterval="5000"
                AutoPlay="true"
                ImageTitleLabelID="imageTitle"
                ImageDescriptionLabelID="imageDescription"
                NextButtonID="nextButton"
                PlayButtonText=""
                StopButtonText=""
                PreviousButtonID="prevButton"
                PlayButtonID="playButton"
                Loop="true">
            </ajaxToolKit:SlideShowExtender>  

            <ajaxToolKit:AnimationExtender id="MyExtender" runat="server" BehaviorID="ae" TargetControlID="Image1">
                <Animations>
                    <OnLoad>
                        <Sequence>
                            <FadeOut Duration="0" Fps="40" />
                            <FadeIn Duration="0" Fps="40" />
                        </Sequence>
                    </OnLoad>
                </Animations>
            </ajaxToolKit:AnimationExtender>
        </div>
    </div>
</asp:Content>
Comment posted by RAJ on Thursday, February 2, 2012 10:42 AM
it is not working only show first image and no error message , using firefox,IE8.0 used same code
Comment posted by dilip maheshwari on Tuesday, February 7, 2012 10:06 PM
hii frends i tried the above slid show extende code and its work correctly. i havn't seen any prob.
Comment posted by sd on Saturday, February 18, 2012 2:30 PM
nice ...work..

www.123techguide.blogspot.in
Comment posted by Rafi on Thursday, March 8, 2012 6:34 AM
The above mentioned code is not working properly......
Comment posted by Rajs on Wednesday, July 11, 2012 12:42 AM
very nice article.... Thanks
Comment posted by Virendra on Wednesday, August 1, 2012 7:43 AM
how to display image with drag & drop with description
Comment posted by Prashant Dighe on Friday, December 7, 2012 4:27 AM
Thank you for prompt help on this site.
Due to your simple code explaination I can easily create slide show in site.

Thank you very much again.
Comment posted by BHABANI on Monday, December 10, 2012 11:59 PM
thank a lot its really very useful
Comment posted by Firoz on Saturday, January 19, 2013 4:12 AM

I used 3 slideshowextender or more in one page using webservices
having  GetSlides1,GetSlides2,GetSlides3

two slideshow working fine but other is not working/not loading.

only two GetSlides1, GetSlides2 called but not GetSlides3 called

code is given bellow:


<ajax:slideshowextender ID="Slideshowextender1" runat="server"
    TargetControlID="Image1"
    ImageTitleLabelID="lblTitle1"
    NextButtonID="btnNext1"
    PreviousButtonID="btnPre1"
    PlayButtonID="btnPlay1"
    PlayButtonText="Play"
    StopButtonText="Stop"
    AutoPlay="false"  
    Loop="true"
    SlideShowServicePath="WebServiceSlides.asmx"  
    SlideShowServiceMethod="GetSlides1">
    </ajax:slideshowextender>

<ajax:slideshowextender ID="Slideshowextender2" runat="server"
    
    AutoPlay="false"  Loop="true" ImageTitleLabelID="lblTitle2"
    NextButtonID="btnNext2"
    PreviousButtonID="btnPre2"
    PlayButtonID="btnPlay2"
    PlayButtonText="Play" StopButtonText="Stop"
    TargetControlID="Image2" SlideShowServicePath="WebServiceSlides.asmx"  
    SlideShowServiceMethod="GetSlides2">
    </ajax:slideshowextender>

<ajax:slideshowextender ID="Slideshowextender3" runat="server"
    
    AutoPlay="false"  Loop="true" ImageTitleLabelID="lblTitle3"
    NextButtonID="btnNext3" PreviousButtonID="btnPre3" PlayButtonID="btnPlay3"
    PlayButtonText="Play" StopButtonText="Stop"
    TargetControlID="Image3" SlideShowServicePath="WebServiceSlides.asmx"
    SlideShowServiceMethod="GetSlides3">
    </ajax:slideshowextender>

please help me to solve the problem. Thanks in advance
Comment posted by Abhilash Jaiswal on Monday, February 4, 2013 10:49 AM
Thanks a lot for your code. It works perfectly fine. I am only having some trouble in animations. Its not working for me. Rest is perfect. Thanks a lot :)
Comment posted by kirti on Tuesday, July 2, 2013 2:36 AM
My slideshow extender work fine but more images are added into the image folder then it does not working, images are about 425 inn total, ple reply as soon as possible..thnaks.
Comment posted by Nelson on Thursday, August 15, 2013 3:30 AM
Everything worked fine for me except the animation javascript.
Thanks for posting this example.
Comment posted by meraz on Thursday, September 12, 2013 2:47 AM
i used your code to slide images in my asp.net web page , but image is not sliding here, will you please give your valuable time to do it?
My code is here ...
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="AjaxControlToolkit" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Simple Slideshow Example in Asp.net</title>
    <script src="jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">

        function changeSlideTime() {
            var slide = $find('SSBehaviorID');
            var txt = $get('<%=txtInterval.ClientID%>').value;
            if(txt > 0 && txt != null)
            slide._timer.set_interval(txt);
          
        }
  
</script>
<style type="text/css">
    body
    {
      margin:50px 0px; padding:0px;
      text-align:center;
      }
    
    .Image
    {
          width:475px;
          margin:0px auto;
          text-align:center;
          padding:20px;
          border:1px dashed gray;
          background-color:Silver;
      }

    </style>
</head>
<body>
<form runat="server" id="frm1">
    <AjaxControlToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </AjaxControlToolkit:ToolkitScriptManager>

<div class="Image">
<asp:Image ID="img1" runat="server" ImageUrl="~/images/n1.jpg" Height="400px" Width="400px"/>
</div>

    <AjaxControlToolkit:SlideShowExtender ID="SlideShowExtender1" runat="server" BehaviorID="SSBehaviourID "
    TargetControlID="img1" AutoPlay="true" PlayButtonText="Play"  Loop="true"
    SlideShowServiceMethod="GetSlides"
    NextButtonID="btnNext"
    PreviousButtonID="btnPrev"
    PlayButtonID="btnPlay"          
    StopButtonText="Stop"
    
    >
    </AjaxControlToolkit:SlideShowExtender>
    <div><asp:TextBox ID="txtInterval" runat="server" ></asp:TextBox>
    <asp:Button runat="server" ID="btnTime" Text="Click to change time" OnClientClick="changeSlideTime();"/></div>
    <div>
            <asp:Label ID="lblDesc" runat="server" Text=""></asp:Label><br />
            <asp:Button ID="btnPrev" runat="server" Text="Previous" />
            <asp:Button ID="btnPlay" runat="server" Text="" />
            <asp:Button ID="btnNext" runat="server" Text="Next" />
        </div>
    </form>
</body>
</html>


code behind page...
using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        try
        {
            if (IsPostBack == false)
            {

            }
        }
        catch
        {

        }
    }
    [System.Web.Services.WebMethod]
    [System.Web.Script.Services.ScriptMethod]
    public static AjaxControlToolkit.Slide[] GetSlides()
    {
        AjaxControlToolkit.Slide[] imgSlide = new AjaxControlToolkit.Slide[4];

        //imgSlide[0] = new AjaxControlToolkit.Slide("images/Autumn Leaves.jpg", "Autumn", "Autumn Leaves");
        imgSlide[1] = new AjaxControlToolkit.Slide(@"..\..\images\n2.jpg", "Creek", "Creek");
        imgSlide[2] = new AjaxControlToolkit.Slide(@"..\..\images\n3.jpg", "Landscape", "Landscape");
        imgSlide[3] = new AjaxControlToolkit.Slide(@"..\..\images\n4.jpg", "Dock", "Dock");
        imgSlide[0] = new AjaxControlToolkit.Slide(@"..\..\images\n1.jpg","Nature","Nature Image");

        return (imgSlide);
    }
}
Comment posted by Vinothkumar on Friday, October 3, 2014 10:08 PM
Hi,

   Thanks for your article. I used slideshowExtender control for Image control.  Slideshow is not working. when i click nextnutton, next image is not loading..

the following is my coding...

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>
    
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    
  
    
    <asp:Image ID="Image1" runat="server" AlternateText="tulips" Height="230px"

            ImageUrl="Photos/Tulips.jpg" Width="290px" />


  
    

<asp:Button ID="btnPrevious" runat="server" Text="Previous" Height="44px"
        Width="57px" />&nbsp;&nbsp;
    <asp:Button ID="Button2"
        runat="server" Text="Button" Height="41px" />&nbsp;
    <asp:Button ID="btnNext" runat="server" Height="39px" Text="Next" />


    
  
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>



  <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>


    <cc1:SlideShowExtender ID="SlideShowExtender2" runat="server" BehaviorID="ss"
        TargetControlID="Image1" SlideShowServiceMethod="GetSlides" AutoPlay="true"
        Enabled="true" ImageDescriptionLabelID="Label1" NextButtonID="btnNext"
        PlayButtonID="Button2" PreviousButtonID="btnPrevious" PlayButtonText="Play"
        StopButtonText="Stop" Loop="true" PlayInterval="1000" UseContextKey="True" >
    </cc1:SlideShowExtender>
    

</asp:Content>

Comment posted by Prasunjeet Soni on Monday, October 6, 2014 3:03 AM
the method which u have described is static but if i want to get access all images from an directory then what is the code for that.?

and there is one more problem which is this is not working in master page however its working in normal aspx pages.

what is the solution for both problem ..please reply soon.
Comment posted by anita on Sunday, November 16, 2014 3:58 AM
not wrking proprly

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel