Introduction:
In
this article I will explain how to show large image preview when hover on link
or image using JQuery in asp.net.
Description:
In previous article I explained Generate thumbnail from images in asp.net, Generate thumbnails from YouTube videos using JQuery and many articles relating to JQuery, asp.net, SQL Server etc. Now I will explain how to show large image preview when hover on link or image using JQuery in asp.net.
In previous article I explained Generate thumbnail from images in asp.net, Generate thumbnails from YouTube videos using JQuery and many articles relating to JQuery, asp.net, SQL Server etc. 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 >> 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
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"
runat="server">
<title>Show Image Preview when hover on Link using jQuery</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="dtlist"
runat="server"
RepeatColumns="4"
CellPadding="5">
<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="Brown" BorderStyle="dotted" BorderWidth="3px" HorizontalAlign="Center"
VerticalAlign="Bottom" />
</asp:DataList>
</div>
</form>
</body>
</html>
|
Now add the following namespaces in code behind
C#
Code
using System;
using System.Collections;
using System.IO;
|
After
add namespaces write the following code in code behind
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 listItems = new
ArrayList();
foreach (FileInfo
info in files)
{
listItems.Add(info);
}
dtlist.DataSource = listItems;
dtlist.DataBind();
}
|
VB.NET Code
Imports System.Collections
Imports System.IO
Partial Class
VBCodeSamples
Inherits System.Web.UI.Page
Protected Sub
Page_Load(ByVal sender As Object, ByVal e As
EventArgs) Handles Me.Load
If Not IsPostBack Then
BindDataList()
End If
End Sub
Protected Sub
BindDataList()
Dim dir As New DirectoryInfo(MapPath("Images"))
Dim files As FileInfo() =
dir.GetFiles()
Dim listItems As New ArrayList()
For Each info As FileInfo In
files
listItems.Add(info)
Next
dtlist.DataSource = listItems
dtlist.DataBind()
End Sub
|
Demo
 |
Download sample code
attached
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
5 comments :
Very Good Post. Thank so much for your great work.
sir i have a problem, in show some format.
sir i am creating the Identity card for school using the datalist in repeater. i show the id cards btwn the student admission no. now iam trying to show only 6 id cards on one page another another 6 on another page and so on as per srch.
so sir give me some idea or if u have some code then help me sir.
and this portal is very gud for fresher as well as exp. thnx for www.aspdotnet-suresh.com
how can i use this inside colorbox
Can I have a click to navigate option on this?
This article is really helpful for me for developing my website. Thank you for posting such article.
Note: Only a member of this blog may post a comment.