How to show enlarge image when mouse hover on image or link in Asp.Net(c#) using JavaScript
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 showpreview 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 ::
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>
</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>
#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>
<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();
}
}
Now Check The Ouput.
No comments:
Post a Comment