In
this article I will explain how to enlarge on mouse over. Suppose we want to
create a photo gallery which contains thumbnails of images and we want to show
large image on mouse over. This could be possible by using jQuery.
In
this example, all the images are in
Images folder will display in thumbnail form on the web page , when we take the
mouse over any thumbnail image then the large version of that image will appear
in the specified Div. It will work like a slider in my example.
Steps
we follow in this example to demonstrate the concept:
1.
Create
a folder in the root directory of the website i.e. “Images". This folder
will contain all the images that we want to load and show in the slider.
2.
Create
a style sheet. In the Stylesheet.css paste the following and save the
file.
.imgthumbnail
{
height:80px;
width:80px;
}
.imgdiv
{
height:349px;
width:334px;
background-color:#FFF;
margin : 0px auto;
padding:10px;
border:solid 1px #D3CFCB;
}
In
the <Head> tag of the design page (.aspx):
Add
the jQuery reference and function. And also set reference to style sheet.
<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.imgthumbnail").hover(function (e) {
var largeImg = '<img src='+ $(this).attr("src") + '></img>';
$('#ladiv')
.html($(largeImg)
.animate({ height: '250', width: '335'},
1600));
});
});
</script>
In
the <body> tag write as:
<form id="form1" runat="server">
< div >
<fieldset style="width: 370px;">
<legend><strong>Enlarge image in
slider on mouse over Using Jquery</strong></legend>
<br />
<div class="imgdiv">
<div id="ladiv" style="height: 252px; width: 334px;"></div>
<hr/><asp:Image ID="img1" CssClass="imgthumbnail"
ImageUrl="~/Images/images
(1).jpg" runat="server" />
<asp:Image ID="img2" CssClass="imgthumbnail" ImageUrl="~/Images/images (2).jpg" runat="server"
/>
<asp:Image ID="img3" CssClass="imgthumbnail" ImageUrl="~/Images/images (3).jpg" runat="server"
/>
<asp:Image ID="img4" CssClass="imgthumbnail" ImageUrl="~/Images/images (4).jpg" runat="server"
/>
</div>
</fieldset>
</div>
</form>
Create this application then check how it works.
0 comments:
Post a Comment