jQuery Show Asp.Net Gridview Images On Mouseover (Large) in C#, VB.NET

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head id=”Head1″>

<title>jQuery Show Image on Hover in Gridview</title>

<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.10.2.js”></script>

<script src=”js/jquery.tooltip.js” type=”text/javascript”></script>

<script type=”text/javascript”>

$(function(){

$(“.gridImages”).tooltip({

track: true,

delay: 0,

showURL: false,

fade: 100,

bodyHandler: function () {

return $($(this).next().html());

},

showURL: false

});

})

</script>

<style type=”text/css”>

.GridviewDiv {font-size: 100%; font-family: ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, Arial,Helevetica, sans-serif; color: #303933;}

.headerstyle

{

color:#FFFFFF;border-right-color:#abb079;border-bottom-color:#abb079;background-color:#df5015;padding:0.5em 0.5em 0.5em 0.5em;text-align:center;

}

#tooltip {

position: absolute;

z-index: 3000;

border: 1px solid #111;

background-color: #FEFFFF;

padding: 5px;

opacity: 1.55;

}

#tooltip h3, #tooltip div { margin: 0; }

</style>

</head>

<body>

<form id=”form1″ runat=”server”>

<div class=”GridviewDiv”>

<asp:GridView ID=”gvDetails” CssClass=”Gridview” runat=”server” AutoGenerateColumns=”False”>

<HeaderStyle CssClass=”headerstyle” />

<Columns>

<asp:BoundField HeaderText=”User Id” DataField=”UserId” />

<asp:BoundField HeaderText=”User Name” DataField=”UserName” />

<asp:BoundField HeaderText=”Education” DataField=”Education” />

<asp:TemplateField HeaderText=”Image”>

<ItemStyle Width=”90px” HorizontalAlign=”Center” />

<ItemTemplate>

<%–Image in Gridview–%>

<asp:Image ID=”Image1″ Width=”25px” Height=”25px” runat=”server” class=”gridImages”ImageUrl='<%#Eval(“Imagepath”) %>’  />

<div id=”tooltip” style=”display: none;”>

<table>

<tr>

<%–Image to Show on Hover–%>

<td><asp:Image ID=”imgUserName” Width=”150px” Height=”120px”ImageUrl='<%#Eval(“Imagepath”) %>’ runat=”server” /></td>

</tr>

</table>

</div>

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

</div>

</form>

</body>

</html>

 

c# code

using System;

using System.Data;

public partial class ShowImageonHoverinGridview : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

gvDetails.DataSource = BindGridviewData();

gvDetails.DataBind();

}

}

/// <summary>

/// Dynamically create & bind data to gridview

/// </summary>

protected DataTable BindGridviewData()

{

DataTable dt = new DataTable();

dt.Columns.Add(“UserId”, typeof(Int32));

dt.Columns.Add(“UserName”, typeof(string));

dt.Columns.Add(“Education”, typeof(string));

dt.Columns.Add(“Imagepath”, typeof(string));

dt.Rows.Add(1, “Suresh Dasari”, “B.Tech”, “bujji.jpg”);

dt.Rows.Add(2, “Rohini Dasari”, “Msc”, “Data.png”);

dt.Rows.Add(3, “Madhav Sai”, “MS”, “~/uploads/1.jpg”);

dt.Rows.Add(4, “Praveen”, “B.Tech”, “~/uploads/2.jpg”);

dt.Rows.Add(6, “Sateesh”, “MD”, “~/uploads/3.jpg”);

dt.Rows.Add(7, “Mahesh Dasari”, “B.Tech”, “~/uploads/4.jpg”);

dt.Rows.Add(8, “Mahendra”, “CA”, “~/uploads/5.jpg”);

return dt;

}

}

vb.net

Imports System.Collections

Imports System.Data

Imports System.Web.UI.WebControls

Partial Class VBCode

Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load

If Not IsPostBack Then

gvDetails.DataSource = BindGridviewData()

gvDetails.DataBind()

End If

End Sub

”’ <summary>

”’ Dynamically create & bind data to gridview

”’ </summary>

Protected Function BindGridviewData() As DataTable

Dim dt As New DataTable()

dt.Columns.Add(“UserId”, GetType(Int32))

dt.Columns.Add(“UserName”, GetType(String))

dt.Columns.Add(“Education”, GetType(String))

dt.Columns.Add(“Imagepath”, GetType(String))

dt.Rows.Add(1, “Suresh Dasari”, “B.Tech”, “bujji.jpg”)

dt.Rows.Add(2, “Rohini Dasari”, “Msc”, “Data.png”)

dt.Rows.Add(3, “Madhav Sai”, “MS”, “~/uploads/1.jpg”)

dt.Rows.Add(4, “Praveen”, “B.Tech”, “~/uploads/2.jpg”)

dt.Rows.Add(6, “Sateesh”, “MD”, “~/uploads/3.jpg”)

dt.Rows.Add(7, “Mahesh Dasari”, “B.Tech”, “~/uploads/4.jpg”)

dt.Rows.Add(8, “Mahendra”, “CA”, “~/uploads/5.jpg”)

Return dt

End Function

End Class

Leave a Reply

Your email address will not be published. Required fields are marked *