In this article I will explain how to show
large image preview when mouse over on image in GridViw in ASP.NET using JQueryand JavaScript.
In my
previous article I explained How
to insert images into Database and bind images to Gridview , How
to upload or Save files in folder and download files when click on Download
link in gridview using asp.net , How
to insert images into our project folder and display the images in gridview
using asp.net , How
to bind data to Dropdown list in Gridview row databound event , How
to implement cascading dropdown list in gridview using asp.net , How
to highlight gridview rows on mouseover and on mouseout event .
Below is the total
code for showing large images preview when mouse over on image in GridView in
ASP.NET.
Design:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Save images into databse and displaying images with gridview</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
ShowImagePreview();
});
// Configuration of the x and y offsets
function
ShowImagePreview() {
xOffset = 100;
yOffset = 40;
$("a.preview").hover(function
(e) {
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p id='preview'><img src='" + this.href + "' alt='Image preview' />" + c + "</p>");
$("#preview")
.css("top", (e.pageY - xOffset) + "px")
.css("left", (e.pageX + yOffset) + "px")
.fadeIn("slow");
},
function ()
{
this.title = this.t;
$("#preview").remove();
});
$("a.preview").mousemove(function (e) {
$("#preview")
.css("top", (e.pageY - xOffset) + "px")
.css("left", (e.pageX + yOffset) + "px");
});
};
</script>
<style type="text/css">
#preview {
position: absolute;
border: 3px solid #ccc;
background: #333;
padding: 5px;
display: none;
color: #fff;
box-shadow: 4px 4px 3px rgba(103, 115, 130, 1);
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table align="center">
<tr>
<td align="center" colspan="2">
<b style="color: maroon; font-size: large;">Registration Form Save User Images</b>
</td>
</tr>
<tr>
<td align="right">FirstName
</td>
<td>
<asp:TextBox ID="txtfname" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right">LastName
</td>
<td>
<asp:TextBox ID="txtlname" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right">Email
</td>
<td>
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right">Phone No
</td>
<td>
<asp:TextBox ID="txtphone" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right">City
</td>
<td align="left">
<asp:TextBox ID="txtCity" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right">Image Name:
</td>
<td>
<asp:TextBox ID="txtImageName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right">Upload Image:
</td>
<td>
<asp:FileUpload ID="fileuploadImage" runat="server" />
</td>
</tr>
<tr>
<td></td>
<td>
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />
</td>
</tr>
</table>
<table align="center">
<tr>
<td align="center">
<asp:GridView ID="gvImages" runat="server" AutoGenerateColumns="False"
HeaderStyle-BackColor="maroon" HeaderStyle-ForeColor="white">
<Columns>
<asp:BoundField HeaderText="First Name" DataField="Firstname" />
<asp:BoundField HeaderText="Last Name" DataField="Lastname" />
<asp:BoundField HeaderText="Image Name" DataField="imagename" />
<asp:TemplateField HeaderText="Image">
<ItemTemplate>
<asp:HyperLink ID="HyperLink1" class="preview" ToolTip='<%#Bind("imagename") %>' NavigateUrl='<%# "ImageHandler.ashx?ImID="+ Eval("UserID") %>' runat="server">
<asp:Image ID="Image1" runat="server" ImageUrl='<%# "ImageHandler.ashx?ImID="+ Eval("UserID") %>' Height="100px" Width="100px" />
</asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Output:
No comments:
Post a Comment