Question

Following this sample of slideshow asp.net ajax:

http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/SlideShow/SlideShow.aspx

with this code snippet:

<ajaxToolkit:SlideShowExtender ID="SlideShowExtender1" runat="server" 
    TargetControlID="Image1" 
    SlideShowServiceMethod="GetSlides" 
    AutoPlay="true" 
    ImageTitleLabelID="imageTitle"
    ImageDescriptionLabelID="imageDescription"
    NextButtonID="nextButton" 
    PlayButtonText="Play" 
    StopButtonText="Stop" 
    PreviousButtonID="prevButton" 
    PlayButtonID="playButton" 
    Loop="true" /> 

If GetSlides() contains no image, how can I make the buttons Next and previous invisible? I think it is not user friendly to make them visible.

Thanks in advance.

Answer 1

You can use this code to display/hide the buttons:

        <script type="text/javascript">
        function pageLoad() {
            //get slideshow behavior element
            var slide = $find('SSBehaviorID');
            //invoke web service method to get slides - call HideButtons method on success of web service method
            Sys.Net.WebServiceProxy.invoke(slide._slideShowServicePath, slide._slideShowServiceMethod, false, slide.params, HideButtons, null, null);
        }

        function HideButtons(result, eventArgs) {
            //get slideshow behavior element
            var slide = $find('SSBehaviorID');
            //if there are slides
            if (slide._slides) {
                if (slide._slides.length > 0) {
                    //don't hide buttons if there are slides
                }
                else {
                    //no images - hide buttons
                    $get("btnPlay").style.display = 'none';
                    $get("btnNext").style.display = 'none;';
                    $get("btnPrevious").style.display = 'none;';
                }
            }
            else {
                //hide buttons
                $get("btnPlay").style.display = 'none';
                $get("btnNext").style.display = 'none';
                $get("btnPrev").style.display = 'none';
            }
        }
        </script>

Make sure to set the ClientIDMode to static for the buttons so you can access them via script:

        <asp:Button ID="btnPrev" ClientIDMode="Static"  runat="server" Text="Previous" />
        <asp:Button ID="btnPlay" ClientIDMode="Static" runat="server" Text="" />
        <asp:Button ID="btnNext" ClientIDMode="Static" runat="server" Text="Next" />

This should give you the general idea. You can tweak the HideButtons routine as you need.