locked
slideshowextender,Modalpopupextender,imagebutton RRS feed

  • Question

  • User1045524683 posted

    HI ,

    Developing image slider therough these controls

    I am able to get slide images also the modalpupexentder works

    But i want ,onclick of image ,popup should open which has details,images of that image only.

    Modal popup is working .but u know i am facing problem in retrieving image url in onclcik of imagebutton.

    Please help me.

    Thanks.

    Thursday, June 5, 2014 4:06 PM

Answers

  • User-417640953 posted

    Hi Dimpu,

    Thank you post the issue to asp.net forum.

    Based on your description, I see you want to show the image and it's detail information in the ModelPopUp control.

    And the images shows in the SlideShowExtender control. For get the image url, I suggest you using the jquery to achieve it.

    I made a demo below, please check it.

    <head runat="server">
        <title></title>
         <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script>
            function ShowPopUp() {
    
                alert($("#ImageButton1").attr("src"));
                
               
                
            }
            $(function () {
    
                $("#ImageButton1").click(function () {
                     
                    $("#Label1").html($("#lableImageDetail").html());
                    //get the url of image
                    $("#Image1").attr("src", $(this).attr("src"));
                });
    
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
             <table >
                <tr align="center">
                    <td> 
                        <asp:Label ID="lableImageDetail" runat="server" ForeColor="#000000" />
                    </td>
                </tr>
                <tr align="center">
                    <td>
                        <asp:ImageButton ID="ImageButton1" runat="server" Width="300" Height="250"   />
                    </td>
                </tr>
                <tr align="center">
                    <td>
                        <asp:Button ID="buttonPrev" runat="Server" Text="Previous" Width="80px" />
                        <asp:Button ID="buttonPlay" runat="server" Text="Play" Width="80px" />
                        <asp:Button ID="buttonNext" runat="Server" Text="Next" Width="80px" />
                    </td>
                </tr>
            </table>
            <asp:HiddenField ID="HiddenField1" runat="server" />
            <asp:SlideShowExtender ID="slideShowExtender1" runat="Server" TargetControlID="ImageButton1"
                ImageDescriptionLabelID="lableImageDetail" Loop="true" AutoPlay="true" StopButtonText="Stop" 
                PlayButtonText="Play" NextButtonID="buttonNext" PreviousButtonID="buttonPrev"
                PlayButtonID="buttonPlay" SlideShowServiceMethod="GetSlides" />
            <asp:ModalPopupExtender ID="ModalPopupExtender1"  CancelControlID="Button1" runat="server" TargetControlID="ImageButton1" PopupControlID="Panel1"   ></asp:ModalPopupExtender>
            <asp:Panel ID="Panel1" runat="server" Width="400" Height="400" BackColor="Yellow">
                <asp:Button ID="Button1" runat="server" Text="Button" />
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                <asp:Image ID="Image1" runat="server" />
            </asp:Panel>
        </div>
        </form>
    </body>

    Code behind:

       [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/aaa.jpg", "First image of my album", "First Image");
                slides[1] = new AjaxControlToolkit.Slide("../../../Images/eg_planets.jpg", "Second image of my album", "Second Image");
               
                return (slides);
            }

    Hope that helps, thanks.

    Best Regards!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, June 6, 2014 5:20 AM

All replies

  • User-417640953 posted

    Hi Dimpu,

    Thank you post the issue to asp.net forum.

    Based on your description, I see you want to show the image and it's detail information in the ModelPopUp control.

    And the images shows in the SlideShowExtender control. For get the image url, I suggest you using the jquery to achieve it.

    I made a demo below, please check it.

    <head runat="server">
        <title></title>
         <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script>
            function ShowPopUp() {
    
                alert($("#ImageButton1").attr("src"));
                
               
                
            }
            $(function () {
    
                $("#ImageButton1").click(function () {
                     
                    $("#Label1").html($("#lableImageDetail").html());
                    //get the url of image
                    $("#Image1").attr("src", $(this).attr("src"));
                });
    
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
             <table >
                <tr align="center">
                    <td> 
                        <asp:Label ID="lableImageDetail" runat="server" ForeColor="#000000" />
                    </td>
                </tr>
                <tr align="center">
                    <td>
                        <asp:ImageButton ID="ImageButton1" runat="server" Width="300" Height="250"   />
                    </td>
                </tr>
                <tr align="center">
                    <td>
                        <asp:Button ID="buttonPrev" runat="Server" Text="Previous" Width="80px" />
                        <asp:Button ID="buttonPlay" runat="server" Text="Play" Width="80px" />
                        <asp:Button ID="buttonNext" runat="Server" Text="Next" Width="80px" />
                    </td>
                </tr>
            </table>
            <asp:HiddenField ID="HiddenField1" runat="server" />
            <asp:SlideShowExtender ID="slideShowExtender1" runat="Server" TargetControlID="ImageButton1"
                ImageDescriptionLabelID="lableImageDetail" Loop="true" AutoPlay="true" StopButtonText="Stop" 
                PlayButtonText="Play" NextButtonID="buttonNext" PreviousButtonID="buttonPrev"
                PlayButtonID="buttonPlay" SlideShowServiceMethod="GetSlides" />
            <asp:ModalPopupExtender ID="ModalPopupExtender1"  CancelControlID="Button1" runat="server" TargetControlID="ImageButton1" PopupControlID="Panel1"   ></asp:ModalPopupExtender>
            <asp:Panel ID="Panel1" runat="server" Width="400" Height="400" BackColor="Yellow">
                <asp:Button ID="Button1" runat="server" Text="Button" />
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                <asp:Image ID="Image1" runat="server" />
            </asp:Panel>
        </div>
        </form>
    </body>

    Code behind:

       [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/aaa.jpg", "First image of my album", "First Image");
                slides[1] = new AjaxControlToolkit.Slide("../../../Images/eg_planets.jpg", "Second image of my album", "Second Image");
               
                return (slides);
            }

    Hope that helps, thanks.

    Best Regards!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, June 6, 2014 5:20 AM
  • User1045524683 posted

    Thanks for the reply.

    Jquery code it worked .

    But u know on modalpopup ,for every clcik on image ,that image +details will get appear.

    since i m maintaining Divs ,initially div will display:none .but when 1 image is clciked that becomes visible.for the second image first div is not getting invisible.

    i tried div.empty

    div.detach.

    But still the solution i di t find.Please provide me solution.thanks

    if ($('#lableImageDetail').text() == 'BeanTown') {
    //
    $("#divFoodSafety").detach();
    $("#divFoodTrucks").detach();
    $("#divHR").detach();
    $("#divsowa").detach();
    $("#divTake10").detach();
    $("#divTown").detach();
    $("#divFuture").detach();

    $("#divBeanTown").show();

    $("#Image11").attr("src", $(this).attr("src"));
    }
    if ($('#lableImageDetail').text() == 'FoodSafety') {

    $("#divBeanTown").detach();
    $("#divFoodTrucks").detach();
    $("#divHR").detach();
    $("#divsowa").detach();
    $("#divTake10").detach();
    $("#divTown").detach();
    $("#divFuture").detach();

    $("#divFoodSafety").show();
    $("#Image2").attr("src", $(this).attr("src"));
    }

    Friday, June 6, 2014 3:17 PM
  • User-417640953 posted

    Hi Dimpu,

    Thanks for your response.

    For making a DIV invisible, I suggest you use the hide method like below.

    $("YourDiv").hide();

    Regards!

    Sunday, June 8, 2014 10:01 PM
  • User1045524683 posted

    Thanks.It worked

    Thursday, June 12, 2014 3:07 PM