AJAX SlideShow Control


In this post we can learn how to do slideshow using ajax
Code in ASPX page:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .style3
        {
            width: 353px;
        }
    </style>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<table>
<tr><td class="style3"></td>
<td align="center">
<asp:Label ID="Label1" runat="server"
Text="Label" style="font-size: x-large;
color: #FF3300; font-family: Arial, Helvetica, sans-serif;
font-weight: 700; background-color: #FFFFCC">
</asp:Label><br />
<asp:Image ID="Image1" runat="server" Height="299px"
Width="350px" />
<asp:SlideShowExtender ID="Image1_SlideShowExtender"
 runat="server" AutoPlay="True" Enabled="True"
 Loop="True" SlideShowServiceMethod="GetSlides"
SlideShowServicePath="" TargetControlID="Image1"
UseContextKey="True" ImageDescriptionLabelID="Label2"
ImageTitleLabelID="Label1" NextButtonID="Button3"
PlayButtonID="Button2" PlayButtonText="Play"
PlayInterval="1500" PreviousButtonID="Button1"
StopButtonText="Stop"></asp:SlideShowExtender>
<br /><asp:Label ID="Label2" runat="server" Text="Label"
style="font-size: x-large; color: #0000FF; font-family:
Verdana; background-color: #CCFFFF"></asp:Label><br />
<asp:Button ID="Button1" runat="server" Text="Previous" />
<asp:Button ID="Button2" runat="server" Text="Stop" />
<asp:Button ID="Button3" runat="server" Text="Next" />
</ContentTemplate>
</asp:UpdatePanel></td>
</tr>
</table>
</div>
</form>
</body>
</html>

Code behind:
[System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]
    public static AjaxControlToolkit.Slide[] GetSlides(string contextKey)
    {
        AjaxControlToolkit.Slide[] slides = new AjaxControlToolkit.Slide[10];
        slides[0] = new AjaxControlToolkit.Slide("Images/0.jpg", "baby Image", "this is hd image from flikar");
        slides[1] = new AjaxControlToolkit.Slide("Images/1.jpg", "cutebaby image", "this is hd image from google");
        slides[2] = new AjaxControlToolkit.Slide("Images/2.jpg", "nicebaby", "this image from bing");
        slides[3] = new AjaxControlToolkit.Slide("Images/3.jpg", "goodbaby", "this image from asp.net info blog");
        slides[4] = new AjaxControlToolkit.Slide("Images/4.jpg", "nicebaby", "this also...");
        slides[5] = new AjaxControlToolkit.Slide("Images/5.jpg", "cutebaby", "this too...");
        slides[6] = new AjaxControlToolkit.Slide("Images/6.jpg", "smartbaby", "this one also...");
        //return default(AjaxControlToolkit.Slide[]);
        return slides;
    }

Download Sample Code

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s