Home > DeveloperSection > Beginner > Ajax Toolkit SlideShowExtender Control in ASP.Net

Ajax Toolkit SlideShowExtender Control in ASP.Net


AJAX AJAX 
Ratings:
0 Comment(s)
 11855  View(s)
Rate this:

Ajax Toolkit SlideShowExtender Control in ASP.Net

SlideShow is an Extender that targets image controls. You can provide it with buttons to hit previous, next and play. You can configure the slideshow to play automatically on render, allow it loop through the images in a round robin fashion and also set the interval for slide transitions.

SlideShow Properties:

·         TargetControlID: ID of the Image control to display the images of SlideShow program.

·         NextButtonID - ID of the button that will allow you to see the next picture.

·         PlayButtonID - ID of the button that will allow you to play/stop the slideshow.

·         PreviousButtonID - ID of the button that will allow you to see the previous picture.

·         PlayButtonText - The text to be shown in the play button to play the slideshow.

·         StopButtonText - The text to be shown in the play button to stop the slideshow.

·         PlayInterval - Interval in milliseconds between slide transitions in play mode.

·         ImageTitleLabelID - ID of Label displaying current picture's title.

·         ImageDescriptionLabelID - ID of Label describing current picture.

·         Loop - Setting this to true will allow you to view images in a round-robin fashion.

·         AutoPlay - Setting this to true will play the slideshow automatically on render.

 

Code:

<%-- ScriptManager control manages client script for AJAX enabled ASP.NET pages.This enables partial-page rendering and Web-service calls.You have to used this if you want to use ajax control toolkit--%>

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

<br />

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

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

<br />

<table class="style1">

<tr><td>&nbsp;</td><td>

<asp:Image ID="Image1" runat="server" />

 

<cc1:SlideShowExtender ID="SlideShowExtender1" runat="server" AutoPlay="true" TargetControlID="Image1" SlideShowServiceMethod="Slides" ImageTitleLabelID="Label1" NextButtonID="Btn_Next" PlayButtonID="Btn_Play" StopButtonText="stop" Loop="true" ImageDescriptionLabelID="Label2"

PlayButtonText="play">

</cc1:SlideShowExtender>

 

</td>

<td>&nbsp; </td>

</tr>

  <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>

  <tr><td>&nbsp;</td><td style="text-align: center">

  <asp:Button ID="Btn_Previous" runat="server" Text="Previous" />

  &nbsp;<asp:Button ID="Btn_Play" runat="server" Text="Play" />

  &nbsp;<asp:Button ID="Btn_Next" runat="server" Text="Next" />

  </td>

  <td>&nbsp;</td></tr></table>

 

Here SlideShowServiceMethodis "Slides" which defined in script tag

<Head>

<script runat="Server" type="text/C#">

 [System.Web.Services.WebMethod]

 [System.Web.Script.Services.ScriptMethod]

 

 public static AjaxControlToolkit.Slide[] Slides()

 {

    AjaxControlToolkit.Slide[] slides = new AjaxControlToolkit.Slide[3];

    slides[0] = new AjaxControlToolkit.Slide("images/banner3.jpg", "", "");

    slides[1] = new AjaxControlToolkit.Slide("images/banner4.jpg", "", "");

 slides[2] = new AjaxControlToolkit.Slide("images/DudeTopBanner.gif","", "");

     return (slides);

  }

 </script>

</Head>

 

Run the project

AjaxControl Toolkit SlideShowExtender Control in ASP.Net

When you click next button then next image will show and when you click previous button then previous image will show. If you have specified AutoPlay="true"then image will change automatically without clicking any button.

AjaxControl Toolkit SlideShowExtender Control in ASP.Net

 

 

 


Don't want to miss updates? Please click the below button!

Follow MindStick