Description:
In this Example I am explain that How to load and display large
version of the thumbnails images on mouse hover using jQuery in asp.net or How to enlarge
image on mouseover in asp.net using jquery
In this example we display the
thumbnails image in a Layerbox and we create a Layerbox using CSS like
<style type="text/css">
.thumbnailimage {
height: 70px;
width: 70px;
}
.imagebox {
height: 340px;
width: 340px;
background-color: #FFF;
margin: 1px auto;
padding: 10px;
border: solid 1px #D3CFCB;
}
</style>
And used Jquery to create a Fancy Image
slider of the thumbnails of the images like
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("img.thumbnailimage").hover(function
(e) {
var largeImg = '<img src=' + $(this).attr("src") + '></img>';
$('#layerbox')
.html($(largeImg)
.animate({ height: '250', width: '325' },
1500));
});
});
</script>
When you move or take the mouse to a
particular thumbnails image then it’s large image will be displayed in hover
format on the Layerbox of the css. You can just put your images in Iamges folder
that you want to show or displayed in Layerbox and add Iamge tag for each and
every Images.
Insert,Update,Delete in Gridview without postback CRUD operation without refresh the page
Bind data in Accordion Control from database bind Dynamic data in Accordion Control
inner zoom effect of image bind into gridview from database Display Inner zoom Effect of the image in Gridview
thumnailimageslider.aspx:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="thumnailimageslider.aspx.cs" Inherits="thumnailimageslider" %>
<!DOCTYPE html>
<%--jQuery
to enlarge thumbnail image in slider on mouse over in asp.net --%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery to enlarge thumbnail image in
slider on mouse over in asp.net </title>
<style type="text/css">
.thumbnailimage {
height: 70px;
width: 70px;
}
.imagebox {
height: 340px;
width: 340px;
background-color: #FFF;
margin: 1px auto;
padding: 10px;
border: solid 1px #D3CFCB;
}
</style>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("img.thumbnailimage").hover(function
(e) {
var largeImg = '<img src=' + $(this).attr("src") + '></img>';
$('#layerbox')
.html($(largeImg)
.animate({ height: '250', width: '325' },
1500));
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div
class="imagebox">
<div id="layerbox" style="height: 252px; width: 334px;"></div>
<hr />
<asp:Image ID="img1" CssClass="thumbnailimage" ImageUrl="~/Images/orderedList0.png" runat="server" />
<asp:Image ID="img2" CssClass="thumbnailimage" ImageUrl="~/Images/orderedList1.png" runat="server" />
<asp:Image ID="img3" CssClass="thumbnailimage" ImageUrl="~/Images/orderedList2.png" runat="server" />
<asp:Image ID="img4" CssClass="thumbnailimage" ImageUrl="~/Images/orderedList3.png" runat="server" />
</div>
</form>
</body>
</html>
nice post.........
ReplyDeleteWelcome Bro.......
Delete