Home > ASP.Net, Javascript > Use Mouseover on image in Gridview to Zoom Image

Use Mouseover on image in Gridview to Zoom Image


Hi

try this example

Step1 :- Open MS SQL Server and create new database and add new Table called “Album” with the following fields

– Id —> int (Auto Increment) and Primary Key

– Name —> nvarchar(50)

– Pic —> nvarchar(50)

where i will save image name in database and upload it in folder in my website called “Picture”

Step2 :- Open VS2005 and create a new website and add new web page and from ToolBox drag Gridview Control and Bind it using SQLDatasource control

Step3 :- Add this CSS Style

    <style type="text/css">
        body
        {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow-y: auto;
        }
        .modal
        {
            display: none;
            position: absolute;
            top: 0px;
            left: 0px;
            background-color: black;
            z-index: 100;
            opacity: 0.8;
            filter: alpha(opacity=60);
            -moz-opacity: 0.8;
            min-height: 100%;
        }
        #divImage
        {
            display: none;
            z-index: 1000;
            position: fixed;
            top: 0;
            left: 0;
            background-color: White;
            height: 300px;
            width: 600px;
            padding: 3px;
            border: solid 1px black;
        }
        * html #divImage
        {
            position: absolute;
        }
    </style>

Step4 :- Add this Javascript Script in your page


    <script type="text/javascript">
        function LoadDiv(url) {
            var img = new Image();
            var bcgDiv = document.getElementById("divBackground");
            var imgDiv = document.getElementById("divImage");
            var imgFull = document.getElementById("imgFull");
            var imgLoader = document.getElementById("imgLoader");

            imgLoader.style.display = "block";
            img.onload = function() {
                imgFull.src = img.src;
                imgFull.style.display = "block";
                imgLoader.style.display = "none";
            };
            img.src = url;
            var width = document.body.clientWidth;
            if (document.body.clientHeight > document.body.scrollHeight) {
                bcgDiv.style.height = document.body.clientHeight + "px";
            }
            else {
                bcgDiv.style.height = document.body.scrollHeight + "px";
            }

            imgDiv.style.left = (width - 650) / 2 + "px";
            imgDiv.style.top = "20px";
            bcgDiv.style.width = "100%";

            bcgDiv.style.display = "block";
            imgDiv.style.display = "block";
            return false;
        }
        function HideDiv() {
            var bcgDiv = document.getElementById("divBackground");
            var imgDiv = document.getElementById("divImage");
            var imgFull = document.getElementById("imgFull");
            if (bcgDiv != null) {
                bcgDiv.style.display = "none";
                imgDiv.style.display = "none";
                imgFull.style.display = "none";
            }
        }
    </script>

and Your web page will be


        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1"   OnRowDataBound="GridView1_RowDataBound">
            <Columns>
                <asp:TemplateField HeaderText="Image" SortExpression="Image">

                    <ItemTemplate>
                        <asp:Image ID="Image1" runat="server" Height="85px" ImageUrl='<%# Eval("Image", "~/Car_Image/{0}") %>' Width="122px" />

                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:Car_DBConnectionString %>"
            SelectCommand="SELECT [Image] FROM [Car]"></asp:SqlDataSource>

    </div>
   
<div id="divBackground">
        <div id="divImage">
            <table style="height: 100%; width: 100%">
                <tr>
                    <td valign="middle" align="center">
                        <img id="imgLoader" alt="" src="5.gif" />
                        <img id="imgFull" runat="server" alt="" src=""  />
                    </td>
                </tr>
                <%--<tr>
                <td align="center" valign="bottom">
                    <%--<input id="btnClose" type="button" value="close" onclick="HideDiv()" />
                </td> </tr>--%>
    </table>
    </div>
 </div>

Step5 :- In code behind add the following code:-

    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        foreach (GridViewRow row in GridView1.Rows)
        {
            Image imgProdImage = (Image)row.FindControl("Image1");
            if (imgProdImage != null)
            {
                imgProdImage.Attributes.Add("onmouseover", "LoadDiv(this.src)");
                imgProdImage.Attributes.Add("onmouseout", " HideDiv()");
            }
        }
    }

Hope this helps

Good Luck

Advertisements
Categories: ASP.Net, Javascript
  1. Michael
    January 7, 2015 at 10:59 am

    Thank you this helped a lot.
    Just one thing, you need to remove runat=”server” from this line

    • yasserzaid
      June 2, 2015 at 11:32 am

      @Michael : You are welcome hope my post helps you

  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: