Description
Now
I will explain how to show large image preview when hover on link or image
using JQuery in asp.net.
To
implement this concept first create new web application >> Right
click on your application >> SelectAdd New Folder and Give
name as Image >> Once folder created place some images in
folder to show preview of images when hover on link using JQuery in asp.net.
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeFile="Images_preview.cs"
Inherits=" Images_preview
" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></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 = -20;
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>
<asp:DataList ID="Datalist1" runat="server" RepeatColumns="4" CellPadding="5">
<ItemTemplate>
<asp:HyperLink ID="HyperLink1" class="preview" ToolTip='<%#Bind("Name") %>' NavigateUrl='<%# Bind("Name", "~/Image/{0}") %>' runat="server">
<asp:Image Width="100" ID="Image1" ImageUrl='<%# Bind("Name", "~/Image/{0}") %>' runat="server" />
</asp:HyperLink>
</ItemTemplate>
<ItemStyle BorderColor="Brown" BorderStyle="Solid" BorderWidth="1px" HorizontalAlign="Center"
VerticalAlign="Bottom" />
</asp:DataList>
</div>
</form>
</body>
</html>
using System;
using System.IO;
using System.Collections;
public partial class Images_preview: System.Web.UI.Page
{
protected void
Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindData();
}
}
protected void
BindData()
{
DirectoryInfo dir = new
DirectoryInfo(MapPath("image"));
FileInfo[] files = dir.GetFiles();
ArrayList listItems = new
ArrayList();
foreach (FileInfo
info in files)
{
listItems.Add(info);
}
Datalist1.DataSource = listItems;
Datalist1.DataBind();
}
}
No comments:
Post a Comment