One of the common tasks in the normal development cycle of web pages is to show an image gallery. As with most web sites, an image gallery has a lot of thumbnails and when the user hovers the mouse over an image, we would like to show a big version of the image.
Question: Given a ASP.NET web page with lots of thumbnail images, write jQuery handler to show an enlarged image when a user moves the mouse over an image.
To solve this problem, let’s first define how our web page looks like. Basically, we will have a bunch of thumbnails on the page and an empty div element to contain the full image view of the selected thumbnail. By selected, I mean the image over which the user is hovering.
In addition, we will also define our thumbnail and full image size using CSS classes. These CSS classes will also play an important role in jQuery selectors.
Our aspx page looks like the following so far:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ImageGallery.aspx.cs"
Inherits="jQueryInterviewQuestions.ImageGallery" %>
<!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>Image Gallery</title>
<!-- include jQuery -->
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<!-- define some simple CSS for the thumbnail and full image -->
<style type="text/css">
.thumbnail {position:relative;width:100px;height:75px;}
.image {position:relative;width:400px;height:300px;}
</style>
</head>
<body>
<form id="form1" runat="server">
<!-- the main div containing the image thumbnails -->
<div align="center">
<asp:Image ID="Image1" CssClass="thumbnail" ImageUrl="~/images/1.jpg" runat="server" />
<asp:Image ID="Image2" CssClass="thumbnail" ImageUrl="~/images/2.jpg" runat="server" />
<asp:Image ID="Image3" CssClass="thumbnail" ImageUrl="~/images/3.jpg" runat="server" />
<asp:Image ID="Image4" CssClass="thumbnail" ImageUrl="~/images/4.jpg" runat="server" />
<asp:Image ID="Image5" CssClass="thumbnail" ImageUrl="~/images/5.jpg" runat="server" />
</div>
<!-- this div will contain the full size image -->
<div id="fullImageDiv" >
</div>
</form>
</body>
</html>
Now let’s see how we can achieve this full image effect on hover using jQuery. We will use the CSS selector to find all thumbnails. Now for this collection, we will tap into the hover() effect and change the opacity of all thumbnails to lets say 0.5. Now for more prettier UI, let’s animate and bring back the opacity of the selected thumbnail to 1 in a slow motion. As the final step, let’s set the image from the selected thumbnail in a new image tag in the fullImageDiv. To select the image source for the current selected thumbnail, you can use $(this).attr("src").
When you use jQuery to chane the DOM on events, always make sure to clean up after the event finishes. In our case, we will hook to the mouseleave event and bring the opacity back to 1 for all thumnails and remove the image we added to the fullImageDiv.
The JQuery and the ASP.NET code in its full form looks like this now:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ImageGallery.aspx.cs"
Inherits="jQueryInterviewQuestions.ImageGallery" %>
<!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>Image Gallery</title>
<!-- include jQuery -->
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<!-- this is where all the magic happens -->
<script language="javascript" type="text/javascript">
$(document).ready(function ()
{
// hook to the hover event
$(".thumbnail").hover(
function ()
{
// "dim" the opacity for all thumbnails
$(".thumbnail").css("opacity", "0.5");
// animate the opacity of the selected image
$(this).animate({ opacity: 1.0 }, 200);
// set the selected thumbnail image
// in the fullImageDiv
$("#fullImageDiv").append("<img class='image' src='" +
// get the image source for the selected thumbnail
$(this).attr("src") + "'/>");
},
// in the mouseleave event, cleanup
function ()
{
// reset the thumbnail opacities
$(".thumbnail").css("opacity", "1.0");
// remove the image we just added
$(".image").remove();
}
);
});
</script>
<!-- define some simple CSS for the thumbnail and full image -->
<style type="text/css">
.thumbnail {position:relative;width:100px;height:75px;}
.image {position:relative;width:400px;height:300px;}
</style>
</head>
<body>
<form id="form1" runat="server">
<!-- the main div containing the image thumbnails -->
<div align="center">
<asp:Image ID="Image1" CssClass="thumbnail" ImageUrl="~/images/1.jpg" runat="server" />
<asp:Image ID="Image2" CssClass="thumbnail" ImageUrl="~/images/2.jpg" runat="server" />
<asp:Image ID="Image3" CssClass="thumbnail" ImageUrl="~/images/3.jpg" runat="server" />
<asp:Image ID="Image4" CssClass="thumbnail" ImageUrl="~/images/4.jpg" runat="server" />
<asp:Image ID="Image5" CssClass="thumbnail" ImageUrl="~/images/5.jpg" runat="server" />
</div>
<!-- this div will contain the full size image -->
<div id="fullImageDiv" >
</div>
</form>
</body>
</html>
ReplyDeleteThe blog or and best that is extremely useful to keep I can share the ideas
of the future as this is really what I was looking for, I am very comfortable and pleased to come here. Thank you very much.
tanki online | 2048 game |
tanki online game
• I've read all of your information that you shares in your article and I love it. Many thanks for showing this post. I enjoy it.
ReplyDelete* Boy names starting with W
Positive site, where did u come up with the information on this posting?I have read a few of the articles on your website now, and I really like your style. Thanks a million and please keep up the effective work. Tableau Data Blending
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteNice post and valuable information thank you.
ReplyDeleteData Analytics Course in Pune
Nice post and valuable information, writing is simply great, thanks for sharing.
ReplyDeleteBusiness Analytics Course in Pune
Business Analytics Training in Pune
Many professional and amateur photographers are learning painful lessons when it comes to slide scanners. IVATION 22MP DIGITAL FILM SCANNER
ReplyDeleteJust saying thanks will not just be sufficient, for the fantastic lucidity in your writing. I will instantly grab your rss feed to stay informed of any updates.
ReplyDeleteData Science Certification in Bangalore
You are in point of fact a just right webmaster. The website loading speed is amazing. It kind of feels that you're doing any distinctive trick. Moreover, The contents are masterpiece. you have done a fantastic activity on this subject!
ReplyDeleteBusiness Analytics Training in Hyderabad | Artificial Intelligence Course in Hyderabad | Business Analytics Course in Hyderabad
Great post i must say and thanks for the information. Education is definitely a sticky subject. However, is still among the leading topics of our time. I appreciate your post and look forward to more.
ReplyDeleteData Science Course
I like viewing web sites which comprehend the price of delivering the excellent useful resource free of charge. I truly adored reading your posting. Thank you!
ReplyDeleteData Science Training
I truly like you're composing style, incredible data, thankyou for posting.
ReplyDeletedata science course
Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I’ll be subscribing to your feed and I hope you post again soon.
ReplyDeletedata science course in hyderabad
data analytics course in hyderabad
business analytics course
Took me time to read all the comments, but I really enjoyed the article. It proved to be Very helpful to me and I am sure to all the commenters here! It’s always nice when you can not only be informed, but also entertained!
ReplyDeletedata science course in guwahati
Awesome blog. I enjoyed reading your articles. This is truly a great read for me. I have bookmarked it and I am looking forward to reading new articles. Keep up the good work!
ReplyDeleteData Science Course in Pune
Data Science Training in Pune
I am really enjoying reading your well written articles. It looks like you spend a lot of effort and time on your blog. I have bookmarked it and I am looking forward to reading new articles. Keep up the good work.
ReplyDeletedata science institute in hyderabad
data science training
data science course
This particular papers fabulous, and My spouse and i enjoy each of the perform that you have placed into this. I’m sure that you will be making a really useful place. I has been additionally pleased. Good perform! this link
ReplyDeleteVery impressive and interesting blog found to be well written in a simple manner that everyone will understand and gain the enough knowledge from your blog being much informative is an added advantage for the users who are going through it. Once again nice blog keep it up.
ReplyDeleteData Science Course in raipur
Very good points you wrote here..Great stuff...I think you've made some truly interesting points.Keep up the good work.
ReplyDeletedata science using python and r programming Hyderabad
Attend The Data Science Courses From ExcelR. Practical Data Science Courses Sessions With Assured Placement Support From Experienced Faculty. ExcelR Offers The Data Science Courses.
ReplyDeleteData Science Courses