Geeks With Blogs

News

Microsoft MVP


DZone MVB


Moderator at CodeASP.NET


Quiz Master







free counters
Free counters
Added on January 19,2012


Follow Me @vmsdurano

A bit About Me



Disclaimer
The opinions expressed herein are my own personal opinions and does not represent the opinions of my employers. Nor does it represent the opinion of my dog, because I don’t have one.


Vinz' Blog (ProudMonkey) "Code, Beer and Music ~ my way of being a programmer"

I’ve been seeing many members in the forums asking how to display a large copy of the image on mouseover. Some of them are displaying the image in a Repeater, GridView or DataList control. I didn’t find any direct solution that shows the scenario they wanted so I thought of writing this post to demonstrate how to go about it. I know there are lot of ways of doing/implementing a solution for this scenario and this is just one them. In this example I’m going to use the DataList control for displaying the data along with the images.

To get started let’s go a head and set-up the HTML mark-up. Just for the simplicity of this demo, I’ve just set up the mark-up this way:

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <asp:DataList ID="DataList1" runat="server" RepeatColumns="2" RepeatDirection="Vertical">
        <ItemTemplate>
                <table>
                    <tr>
                        <td><asp:Image ID="imgProduct" runat="server" ImageUrl='<%# DataBinder.Eval(Container.DataItem, "ProductImage") %>' style="width:100px; height:100px;" /></td>
                        <td> 
                            <asp:Label ID="lblProduct" Text='<%# DataBinder.Eval(Container.DataItem, "ProductName") %>' runat="server" />
                            <br />
                            <asp:Label ID="lblPrice" Text='<%# DataBinder.Eval(Container.DataItem, "Price") %>' runat="server" />
                            <br />
                            <asp:TextBox ID="txtQty" runat="server"></asp:TextBox>
                        </td>
                    </tr>
                </table>
        </ItemTemplate>
</asp:DataList>
</asp:Content>

 

As you can see there’s really no fancy about the mark-up above. It just contain a DataList control with Image, TextBox and Label controls defined within it. You also notice that each control are binded with the fields that we want to display. Now let’s go ahead and populate the DataList with a sample data. Here’s the code behind part below:

using System;
using System.Data;

namespace WebAppDemo {
    public partial class Repeater : System.Web.UI.Page {

        private DataTable GetSampleData() {

            //NOTE: THIS IS JUST FOR DEMO
            //If you are working with database
            //You can query your actual data and fill it to the DataTable

            DataTable dt = new DataTable();
            DataRow dr = null;

            //Create DataTable columns
            dt.Columns.Add(new DataColumn("ID", typeof(string)));
            dt.Columns.Add(new DataColumn("ProductImage", typeof(string)));
            dt.Columns.Add(new DataColumn("ProductName", typeof(string)));
            dt.Columns.Add(new DataColumn("Price", typeof(string)));

            //Create Row for each columns
            dr = dt.NewRow();
            dr["ID"] = 1;
            dr["ProductName"] = "Product 1";
            dr["ProductImage"] = "~/Images/Image1.jpg";
            dr["Price"] = "100";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["ID"] = 2;
            dr["ProductName"] = "Product 2";
            dr["ProductImage"] = "~/Images/Image2.jpg";
            dr["Price"] = "200";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["ID"] = 3;
            dr["ProductName"] = "Product 3";
            dr["ProductImage"] = "~/Images/Image3.jpg";
            dr["Price"] = "50";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["ID"] = 3;
            dr["ProductName"] = "Product 4";
            dr["ProductImage"] = "~/Images/Image4.jpg";
            dr["Price"] = "500";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["ID"] = 3;
            dr["ProductName"] = "Product 5";
            dr["ProductImage"] = "~/Images/Image5.jpg";
            dr["Price"] = "70";
            dt.Rows.Add(dr);

            return dt;
        }

        protected void Page_Load(object sender, EventArgs e) {
            if (!IsPostBack) {
                DataList1.DataSource = GetSampleData();
                DataList1.DataBind();
            }
        }       
    }
}

 

Running the code will display something like this in the page:

datalist0

Now that we already have our data in placed let’s proceed implementing the mouseover functionality with jQuery. To start using jQuery then register the following script at the very top of the <head> section of the page or if you are using master page then add it the very top of  the content head section.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script>

As you can see I'm using Google AJAX API CDN to host the jQuery file for some reasons. You can also download the jQuery here and host it in your server if you'd like. Now add the following mark-up at the top your DataList.

    <span id="coord"></span>
    <div id="divImageDisplay" style="position:absolute;">   
    </div>

The divImageDisplay is where we display the large copy of the Image when we hover on each image from the DataList. We will then display the coordinate values in the label to see the top and left value. Okay here's the full script below for the mouseover functionality:

<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 hideDivImageDisplay() {
            $('#divImageDisplay').html();
        }

        function showDivImageDisplay(img) {
            var grid = $('#<%=DataList1.ClientID %>');
            var leftPos = getLeft(img) + 80;
            var topPos = getTop(img) + 20;
            $('#divImageDisplay').offset({ top: topPos, left: leftPos })
            $('#divImageDisplay').html("<img src='" + img.src + "' width='300px' height='300px'/>");

            //print the coordinates
            $('#coord').text('Image ID: ' + img.id + ' left: ' + leftPos + ' top: ' + topPos);
        }
  
</script>

 

The getTop() function gets the top position coordinate value of the hovered image. The  getLeft() function gets the left position coordinate value. The hideDivImageDisplay() function will hide the div by clearing out the elements within it using the .html() jQuery function. The showDivImageDisplay() function is where we set the position of the divImageDisplay to display below each image from the DataList.

Now let’s put it all together. Here’s the full ASPX mark-up below:

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">

<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 hideDivImageDisplay() {
            $('#divImageDisplay').html();
        }

        function showDivImageDisplay(img) {
            var grid = $('#<%=DataList1.ClientID %>');
            var leftPos = getLeft(img) + 80;
            var topPos = getTop(img) + 20;
            $('#divImageDisplay').offset({ top: topPos, left: leftPos })
            $('#divImageDisplay').html("<img src='" + img.src + "' width='300px' height='300px'/>");

            //print the coordinates
            $('#coord').text('Image ID: ' + img.id + ' left: ' + leftPos + ' top: ' + topPos);
        }
  
</script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <span id="coord"></span>
    <div id="divImageDisplay" style="position:absolute;">   
    </div>

    <asp:DataList ID="DataList1" runat="server" RepeatColumns="2" RepeatDirection="Vertical">
        <ItemTemplate>
                <table>
                    <tr>
                        <td><asp:Image ID="imgProduct" runat="server" ImageUrl='<%# DataBinder.Eval(Container.DataItem, "ProductImage") %>' style="width:100px; height:100px;" onmouseover="showDivImageDisplay(this);" onmouseout="hideDivImageDisplay();" /></td>
                        <td> 
                            <asp:Label ID="lblProduct" Text='<%# DataBinder.Eval(Container.DataItem, "ProductName") %>' runat="server" />
                            <br />
                            <asp:Label ID="lblPrice" Text='<%# DataBinder.Eval(Container.DataItem, "Price") %>' runat="server" />
                            <br />
                            <asp:TextBox ID="txtQty" runat="server"></asp:TextBox>
                        </td>
                    </tr>
                </table>
        </ItemTemplate>
</asp:DataList>
</asp:Content>

Here’s the output below when running the page:

datalist

 

That’s it! I hope someone find this post useful!

Posted on Wednesday, January 11, 2012 8:39 PM | Back to top


Comments on this post: Show Large Image on Mouseover with jQuery

# re: Show Large Image on Mouseover with jQuery
Requesting Gravatar...
Amazing post! Thanks.
Left by dissertation uk on Jan 11, 2012 11:14 PM

# re: Show Large Image on Mouseover with jQuery
Requesting Gravatar...
really nice work with asp and jquery to show large image effect on mouseover, and it will be great if you provide some live demo as well ;)

thanks & regards
================
webtech11
Left by jogesh on Feb 21, 2012 1:35 PM

# re: Show Large Image on Mouseover with jQuery
Requesting Gravatar...
i have error the server tag is not well formed.n i am doing in this same way but the error is occure.
Left by kuldeep singh on May 23, 2012 1:23 PM

comments powered by Disqus

Copyright © Vincent Maverick Durano | Powered by: GeeksWithBlogs.net