How to show enlarge image when mouse hover on image or link in Asp.Net(c#) using JavaScript
In this blog i am going to show we could show enlarded image when hover on Link or an image like we see on any e-commerce website.
First of all right click on your application >> Select Add New Folder and Give name as images >> Once folder created place some images in folder to show preview of images when hover on link using JQuery in asp.net.
After completion of folder creation and insertion of images in folder write the following code in your aspx page ::
<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 () {
ShowPreview();
});
// Configuration of the x and y offsets
function ShowPreview() {
xOffset = -20;
yOffset = 0;
$("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:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
box-shadow: 4px 4px 3px rgba(103, 115, 130, 1);
}
</style>
And then the put the below code inside <body> tag ::
<div>
<asp:DataList ID="DataList1" RepeatColumns="2" CellPadding="5" runat="server">
<ItemTemplate>
<asp:HyperLink ID="HyperLink1" class="preview" ToolTip='<%#Bind("Name") %>' NavigateUrl='<%# Bind("Name", "~/images/{0}") %>' runat="server">
<asp:Image Width="100" ID="Image1" ImageUrl='<%# Bind("Name", "~/images/{0}") %>' runat="server" />
</asp:HyperLink>
</ItemTemplate>
<ItemStyle BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" HorizontalAlign="Center"
VerticalAlign="Bottom" />
</asp:DataList>
</div>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Collections;
using System.IO;
public partial class ChangeImageSize : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindDataList();
}
}
protected void BindDataList()
{
DirectoryInfo dir = new DirectoryInfo(MapPath("images"));
FileInfo[] files = dir.GetFiles();
ArrayList listitem = new ArrayList();
foreach (FileInfo info in files)
{
listitem.Add(info);
}
DataList1.DataSource = listitem;
DataList1.DataBind();
}
}
First of all right click on your application >> Select Add New Folder and Give name as images >> Once folder created place some images in folder to show preview of images when hover on link using JQuery in asp.net.
After completion of folder creation and insertion of images in folder write the following code in your aspx page ::
- Put the below code inside the <heaD> tag::
<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 () {
ShowPreview();
});
// Configuration of the x and y offsets
function ShowPreview() {
xOffset = -20;
yOffset = 0;
$("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:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
box-shadow: 4px 4px 3px rgba(103, 115, 130, 1);
}
</style>
And then the put the below code inside <body> tag ::
<div>
<asp:DataList ID="DataList1" RepeatColumns="2" CellPadding="5" runat="server">
<ItemTemplate>
<asp:HyperLink ID="HyperLink1" class="preview" ToolTip='<%#Bind("Name") %>' NavigateUrl='<%# Bind("Name", "~/images/{0}") %>' runat="server">
<asp:Image Width="100" ID="Image1" ImageUrl='<%# Bind("Name", "~/images/{0}") %>' runat="server" />
</asp:HyperLink>
</ItemTemplate>
<ItemStyle BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" HorizontalAlign="Center"
VerticalAlign="Bottom" />
</asp:DataList>
</div>
- Now add the below code inside your Code page(.cs) ::
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Collections;
using System.IO;
public partial class ChangeImageSize : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindDataList();
}
}
protected void BindDataList()
{
DirectoryInfo dir = new DirectoryInfo(MapPath("images"));
FileInfo[] files = dir.GetFiles();
ArrayList listitem = new ArrayList();
foreach (FileInfo info in files)
{
listitem.Add(info);
}
DataList1.DataSource = listitem;
DataList1.DataBind();
}
}
Comments
Post a Comment