Please navigate to the bottom of the page for Table of Contents

Saturday, July 16, 2011

jQuery to show big image on hover

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>

25 comments:

  1. • 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.
    * Boy names starting with W

    ReplyDelete
  2. 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

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. Many professional and amateur photographers are learning painful lessons when it comes to slide scanners. IVATION 22MP DIGITAL FILM SCANNER

    ReplyDelete
  5. Just 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.
    Data Science Certification in Bangalore

    ReplyDelete
  6. 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!

    Data Science Training

    ReplyDelete
  7. I truly like you're composing style, incredible data, thankyou for posting.
    data science course

    ReplyDelete
  8. 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.
    data science course in hyderabad
    data analytics course in hyderabad
    business analytics course

    ReplyDelete
  9. 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!
    data science course in guwahati

    ReplyDelete
  10. 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

    ReplyDelete
  11. Very 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.

    Data Science Course in raipur

    ReplyDelete

  12. This type of very helpful article. Very interesting to see this article.
    Data Science Course In India

    ReplyDelete
  13. I wanted to leave a little comment to support you and wish you the best of luck. We wish you the best of luck in all of your blogging endeavors.
    Data Science Institute in Bangalore

    ReplyDelete
  14. It's really nice and informative, it has all the information and it also has a big impact on new technologies. Thanks for sharing it.
    Data Science Course in Pune

    ReplyDelete
  15. You can comment on the blog ordering system. You should discuss, it's splendid. Auditing your blog would increase the number of visitors. I was very happy to find this site. Thank you...
    Data Analytics Course in Bangalore

    ReplyDelete
  16. Very wonderful informative article. I appreciated looking at your article. Very wonderful reveal. I would like to twit this on my followers. Many thanks!

    AWS Training in Hyderabad

    ReplyDelete
  17. I was browsing the internet for information and found your blog. I am impressed with the information you have on this blog.

    Best Data Science Courses in Bangalore

    ReplyDelete
  18. The blog is good enough, keep up writing such type of posts.
    branding firms SF

    ReplyDelete

  19. Nice information. I’ve bookmarked your site, and I’m adding your RSS feeds to my Google account to get updates instantly. Em Editor Crack

    ReplyDelete
  20. It's like you've got the point right, but forgot to include your readers. Maybe you should think about it from different angles.
    Data Analytics Course in Nashik

    ReplyDelete
  21. 360DigiTMG offers the best Data Analytics courses in the market with placement assistance. Enroll today and fast forward your career.

    ReplyDelete
  22. This blog consistently delivers informative and engaging content on data science topics... Data Science Course In Chennai With Placement

    ReplyDelete