Image slideshow using Image Extender control

Introduction:

This article explains use of the Accordion control with image button and image slideshow using Image Extender control. You can find a few other articles in www.c-sharpcorner.com about the accordion control and image slide show. This article is about the accordion and image slideshow controls with rich content.

First of all, I would like to thank the http://www.asp.net/ajax/ajaxcontroltoolkit/samples/ website. I have studied AJAX controls from that website. It is a great website for beginners of AJAX.

Snap shot for Image slide show and AccordionPane Control:





Accordion Control:

The Accordion is a web control that allows you to provide multiple panes and display them one at a time. It is like having several CollapsiblePanels where only one can be expanded at a time. The Accordion is implemented as a web control that contains AccordionPane web controls. Each AccordionPane control has a template for its Header and its Content. We keep track of the selected pane so it stays visible across postbacks.

Properties of the accordion control:

1. Fadetransitions: This property defines if there will be fade transition effect or not.
2. TransitionDuration: This is the number of milliseconds for the transition.
3. FramesPerSecond: This defines the number of frames to be used in the transition per second.
4. SuppressHeaderPostbacks: This is to set whether or not the header of the HeaderContentControl automatically posts back to the server. By default the SuppressHeaderPostbacks property is set to False.
5. RequireOpenedPane:This is to hide all the panes.

Aspx Code for Accordion Control:

Note: Accordion Control needs Script Manager.

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
    <table class="demoarea" align="left" style="width: 250px">

 <asp:Accordion ID="Accordion1" runat="server"   HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected"
ContentCssClass="accordionContent" AutoSize="None" FadeTransitions="true"  TransitionDuration="250"
 FramesPerSecond="40" RequireOpenedPane="false" SuppressHeaderPostbacks="true"
 BackColor="#FFCCCC" Font-Bold="True" Font-Names="Times New Roman" Font-Size="Large"    BorderColor="#CCFFFF">

        <Panes>
                <asp:AccordionPane ID="AccordionPane1" runat="server"  HeaderCssClass="accordionHeader"
                    HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent">
                    <Header>
                        VC'S DESK</Header>
                    <Content>
                        <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="imgbtn.jpg" Width="240px" Height="25px"/>

                    </Content>
                </asp:AccordionPane>
            </Panes>
</asp:Accordion>

The above code sample is for a single AccordionPane. If do you want more than one AccordionPane, again use <asp:AccordionPane> instead.

Image Slide Show Control:

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. You can use a page method to supply images to the slide show or use a webservice. In the sample above we have provided you with a slideshow that plays automatically on render and loops around to the first picture if you hit next on the last picture and vice versa if you hit previous on the first picture. The slideshow transitions pictures after 3 seconds.

Slide Show Control Properties:

1. SlideShowServicePath: Path to the webservice that the extender will pull the images from.
   

2. SlideShowServiceMethod: The webservice method that will be called to supply images. The signature of the method must match this:
   
   [System.Web.Services.WebMethod]
   [System.Web.Script.Services.ScriptMethod]
   public AjaxControlToolkit.Slide[] GetSlides() { ... }
   
   Note that you can replace "GetSlides" with a name of your choice, but the return type and parameter name and type must exactly match, including case.
   

3. ContextKey: User/page specific context provided to an optional overload of the web method described by ServiceMethod/ServicePath. If the context key is used, it should have the same signature with an additional parameter named contextKey of type string:
   
   [System.Web.Services.WebMethod]
   [System.Web.Script.Services.ScriptMethod]
   public AjaxControlToolkit.Slide[] GetSlides(string contextKey) { ... }
   
   Note that you can replace "GetSlides" with a name of your choice, but the return type and parameter name and type must exactly match, including case.
   

4. UseContextKey: Whether or not the ContextKey property should be used. This will be automatically enabled if the ContextKey property is ever set (on either the client or the server). If the context key is used, it should have the same signature with an additional parameter named contextKey of type string (as described above).
   

5. NextButtonID: ID of the button that will allow you to see the next picture.
   

6. PlayButtonID: ID of the button that will allow you to play/stop the slideshow.
   

7. PreviousButtonID: ID of the button that will allow you to see the previous picture.
   

8. PlayButtonText: The text to be shown in the play button to play the slideshow.
   

9. StopButtonText: The text to be shown in the play button to stop the slideshow
   

10. PlayInterval: Interval in milliseconds between slide transitions in play mode.
    

11. ImageTitleLabelID: ID of Label displaying current picture's title.
    

12. ImageDescriptionLabelID: ID of Label describing current picture.
    

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

14. AutoPlay: Setting this to true will play the slideshow automatically on render.

Aspx Code for Image Slide Show Control:

Note: Slide Show Control uses Slide Show Extender to handle Slide the image in particular interval of time.

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

                Style="border: 1px solid black;width:auto"
                ImageUrl="16.jpg"
                AlternateText="Blue Hills image"   Height="380px" Width="1000" />           

            <asp:SlideShowExtender ID="slideshowextend1" runat="server"
                TargetControlID="Image1"
                SlideShowServiceMethod="GetSlides"
                AutoPlay="true"              
                Loop="true" />

Slide Show Control use Webservice method to slide the image in particular interval of time. The webservice method code was written in a Script tag. The following is the code:

<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("11.jpg", "Blue Hills", "Go Blue"),|
            new AjaxControlToolkit.Slide("12.jpg", "Sunset", "Setting sun"),
            new AjaxControlToolkit.Slide("13.jpg", "Winter", "Wintery..."),
            new AjaxControlToolkit.Slide("14.jpg", "Water lillies", "Lillies in the water"),
            new AjaxControlToolkit.Slide("15.jpg", "Sedona", "Portrait style picture"),
            new AjaxControlToolkit.Slide("16.jpg", "Sedona", "Portrait style picture")};
         }
  </script>

Expectation:

This is my first article hope you liked this article. If you find any bugs or want me to improve the article please comment; I will correct it.