Home > AJAX > Use AJAX Modal Popup Extender to Display Dynamic Image onmouseover

Use AJAX Modal Popup Extender to Display Dynamic Image onmouseover


Hi

try this example to Use AJAX Modal Popup Extender to Display Dynamic Image onnouseover

where i save image name in my database and upload image in Album folder in my website

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">

<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>" >
<head runat="server">
    <title>Untitled Page</title>
<script type="text/javascript">

        function getTop(e)
        {
            var offset=e.offsetTop;
            if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
            return offset;
        }
        function getLeft(e)
        {
            var offset=e.offsetLeft;
            if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
            return offset;
        }
        function hideModalPopupViaClient()
        {
            var modalPopupBehavior = $find('ModalPopupExtender');
            modalPopupBehavior.hide();
        }
        function showModalPopupViaClient(control,id)
        {
            $get("img1").src=control.src;//this is the path of thumbnail, you can convert it to the path of full picture related
            var modalPopupBehavior = $find('ModalPopupExtender');
            modalPopupBehavior.show();          
            $get(modalPopupBehavior._PopupControlID).style.left=getLeft($get('<%=DataList1.ClientID %>'))+ $get('<%=DataList1.ClientID %>').offsetWidth+"px";
            $get(modalPopupBehavior._PopupControlID).style.top=getTop(control)+"px";           

        }

</script>

</head>
<body>
    <form id="form1" runat="server">
        <strong>This is Example to Show Dynamic Image URL from Database</strong><br />
        <br />
   
    <ajaxToolkit:ToolkitScriptManager runat="Server" ID="ScriptManager1" />
    <%--<input id="Hidden1" runat="server" type="hidden" />--%>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>   
        <asp: DataList ID="DataList1" runat="server" DataSourceID="SqlDataSource1" CellPadding="4" ForeColor="#333333" >
        <ItemTemplate>    
            <div style="border-color:Black;border-width:1px;border-style:solid;">
                <asp:Label ID="Label1" Text='<%# Eval("Id") %>' runat="server"></asp:Label> 
                <asp:Image ID="detail" runat="server" onmouseout="hideModalPopupViaClient()" onmouseover="showModalPopupViaClient(this)" ImageUrl='<%# Eval("Picture", "~/Album/{0}") %>' Height="78px" Width="76px"></asp:Image>
            </div> 
        </ItemTemplate>
            <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <SelectedItemStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
            <AlternatingItemStyle BackColor="White" />
            <ItemStyle BackColor="#EFF3FB" />
            <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
        </asp: DataList>        
    
    <asp:SqlDataSource ID="SqlDataSource1" runat="server"
        ConnectionString="<%$ ConnectionStrings:School_SystemConnectionString %>"
        SelectCommand="SELECT [Id], [Picture] FROM [Album]" ProviderName="<%$ ConnectionStrings:Northwind.ProviderName %>"></asp:SqlDataSource>
        </ContentTemplate>
    </asp:UpdatePanel>
        <asp:Button runat="server" ID="showModalPopupClientButton" style="display:none"/>

        <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server"
            TargetControlID="showModalPopupClientButton"
            PopupControlID="programmaticPopup" />
        <br />

        <div CssClass="modalPopup" id="programmaticPopup" style="background-color:#EEEEEE;filter:alpha(opacity=70);opacity:0.7;display:none;width:200px;height=500px;padding:10px">
            <img id='img1' style="width: 191px"/>

        </div>

    </form>
</body>
</html>

Good Luck

Advertisements
Categories: AJAX
  1. sergeos
    February 6, 2009 at 9:06 pm

    maybe interesting, but i can’t run
    when i mouse over the img, nothing running

  2. Chaitanya
    March 5, 2009 at 3:32 pm

    will try n will gwt back 2 u soon..
    thnx

  3. yasserzaid
    March 5, 2009 at 3:41 pm

    Hi sergeos

    This Example works 100%

    Please Try to do it again

    Good Luck

  4. flamario
    December 23, 2010 at 6:59 pm

    Thank you for the code, but in FF the div blinks

    Thanks

  5. yasserzaid
    December 26, 2010 at 11:30 am

    @flamario :- You are welcome hope my post helps you

  6. June 18, 2013 at 7:48 am

    I’m not that much of a online reader to be honest but
    your sites really nice, keep it up! I’ll go ahead and bookmark your site to come back later. Many thanks

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: