In ASP.NET AJAX Control toolkit there is an extender known as SlideShowExtender. This can be used to create a Slide show by looping through the images. The images are shown in the SlideShow by using a PageMethod or a Webservice.
Example:
<div> /*Add a script manager in your page */ <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> /*This is the initial image that will be shown to the user*/ <div> <asp:Image ID="img1" runat="server" Height="400px" Width="400px" ImageUrl="~/images/aa.jpg" /> </div> /*Drag and Drop a SlideShowExtender*/ <cc1:SlideShowExtender ID="SlideShowExtender1" runat="server" BehaviorID="SlideShowBehaviorID" TargetControlID="img1" SlideShowServiceMethod="GetImagesForSlide" AutoPlay="true" ImageDescriptionLabelID="lblDesc" NextButtonID="btnNext" PreviousButtonID="btnPrev" PlayButtonID="btnPlay" PlayButtonText="Play" StopButtonText="Stop" Loop="true" > </cc1:SlideShowExtender> <div> /*Description about the image will be shown in this Label*/ <asp:Label ID="lblDesc" runat="server" Text=""></asp:Label><br /> /*Previous, Next Button to see the previous, next image and Play and stop button to start and stop the slide show */ <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>
The SlideShowExtender uses a page method(GetImagesForSlide).In code behind add the following page method.
[System.Web.Services.WebMethod] [System.Web.Script.Services.ScriptMethod] public static AjaxControlToolkit.Slide[] GetImagesForSlide() { AjaxControlToolkit.Slide[] imgSlide = new AjaxControlToolkit.Slide[4]; /*Provide some images for slide show*/ imgSlide[0] = new AjaxControlToolkit.Slide("images/aa.jpg", "Flower", "Flower"); imgSlide[1] = new AjaxControlToolkit.Slide("images/atlanta.jpg","City", "Atlanta"); imgSlide[2] = new AjaxControlToolkit.Slide("images/img1.jpg","Picture", "Imagine"); imgSlide[3] = new AjaxControlToolkit.Slide("images/logo.png", "Team Logo", "Logo"); return (imgSlide); }
What Extra can be done with SlideShow Extender [2] You can Skip certain Slides based on a condition. [3] You can provide Fade In Fade Out Images. |