Home > AJAX, ASP.Net > AJAX SlideShow Extender with Static Image

AJAX SlideShow Extender with Static Image


Hi

try this example:

<%@ Page Language="C#" AutoEventWireup="true"%>

<%@ 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>AJAX SlideShow</title>
    <style type="text/css">
    body{font-family:helvetica}
    .btn{border:solid 1px #c0c0c0;background-color:#e1e1e1;color:#666666;cursor:pointer;}
    </style>
</head>

<body style="text-align: center">
    <form id="form1" runat="server">
        <h2 style="text-align: center">
            AJAX Slide Show Extender Control</h2>
        <asp:ScriptManager ID="ScriptManager1" runat="server" ></asp:ScriptManager>

        <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[5];

                slides[0] = new AjaxControlToolkit.Slide("images/Ascent.jpg", "Ascent", "Cool moon night...");
                slides[1] = new AjaxControlToolkit.Slide("images/Red Moon Desert.jpg", "Desert", "Red moon desert...");
                slides[2] = new AjaxControlToolkit.Slide("images/Tulips.jpg", "Tulips", "Beautiful tulips...");
                slides[3] = new AjaxControlToolkit.Slide("images/Autumn.jpg", "Autumn", "Way to home...");
                slides[4] = new AjaxControlToolkit.Slide("images/Stonehenge.jpg", "Stonehenge", "Age of mythology...");
                return (slides);
            }
        </script>

        <div style="text-align: center">
            <div style="width: 392px; padding: 2px">
                <table cellpadding="2" cellspacing="0" style="height: 350px; width: 100%; background-color: #000000;
                    border: solid 2px #000000">
                    <tr>
                        <td>
                            <asp:Label ID="lblTitle" runat="server" Font-Bold="true" ForeColor="#ffffff" />
                        </td>
                    </tr>
                    <tr>
                        <td valign="middle">
                            <asp:Image ID="imgSlides" runat="server" Height="316px" Width="388px" ImageUrl="images/Ascent.jpg" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="lblImageDescription" runat="server" Font-Bold="true" ForeColor="#ffffff" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Button ID="Btn_Previous" runat="server" Text="&lt;&lt;" CssClass="btn" />
                            <asp:Button ID="Btn_Play" runat="server" Text="Play" CssClass="btn" />
                            <asp:Button ID="Btn_Next" runat="server" Text="&gt;&gt;" CssClass="btn" />
                        </td>
                    </tr>
                </table>
                <cc1:SlideShowExtender ID="SlideShowExtender1" AutoPlay="true" ImageTitleLabelID="lblTitle"
                    ImageDescriptionLabelID="lblImageDescription" Loop="true" NextButtonID="Btn_Next"
                    PlayButtonID="Btn_Play" PlayButtonText="Play" PreviousButtonID="Btn_Previous"
                    SlideShowServiceMethod="GetSlides" StopButtonText="Stop" TargetControlID="imgSlides"
                    runat="server">
                </cc1:SlideShowExtender>
            </div>
        </div>
        <br />
        <br />
        <br />
           </form>
</body>
</html>

Good Luck

Advertisements
Categories: AJAX, ASP.Net
  1. No comments yet.
  1. No trackbacks yet.

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

%d bloggers like this: