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>

33 comments:



  1. The 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

    ReplyDelete
    Replies
    1. I am glad that I saw this post. It is informative blog for us and we need this type of blog thanks for share this blog, Keep posting such instructional blogs and I am looking forward for your future posts. Python Projects for Students Data analytics is the study of dissecting crude data so as to make decisions about that data. Data analytics advances and procedures are generally utilized in business ventures to empower associations to settle on progressively Python Training in Chennai educated business choices. In the present worldwide commercial center, it isn't sufficient to assemble data and do the math; you should realize how to apply that data to genuine situations such that will affect conduct. In the program you will initially gain proficiency with the specialized skills, including R and Python dialects most usually utilized in data analytics programming and usage; Python Training in Chennai at that point center around the commonsense application, in view of genuine business issues in a scope of industry segments, for example, wellbeing, promoting and account. Project Center in Chennai

      Delete
  2. • 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
  3. 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
  4. This comment has been removed by the author.

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

    ReplyDelete
  6. 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
  7. 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!
    Business Analytics Training in Hyderabad | Artificial Intelligence Course in Hyderabad | Business Analytics Course in Hyderabad

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

    Data Science Course

    ReplyDelete
  9. 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
  10. I truly like you're composing style, incredible data, thankyou for posting.
    data science course

    ReplyDelete
  11. 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
  12. 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
  13. 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!
    Data Science Course in Pune
    Data Science Training in Pune

    ReplyDelete
  14. 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.
    data science institute in hyderabad
    data science training
    data science course

    ReplyDelete
  15. 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
  16. 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
  17. Very good points you wrote here..Great stuff...I think you've made some truly interesting points.Keep up the good work.
    data science using python and r programming Hyderabad

    ReplyDelete
  18. 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.
    Data Science Courses

    ReplyDelete

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

    ReplyDelete

  20. Additionally, this is an excellent article which I truly like studying. It's not everyday I have the option to see something similar to this.

    Data Science Course Syllabus

    ReplyDelete
  21. I have to search sites with relevant information ,This is a
    wonderful blog,These type of blog keeps the users interest in
    the website, i am impressed. thank you.
    Data Science Course in Bangalore

    ReplyDelete
  22. This is an excellent post I seen thanks to share it. It is really what I wanted to see hope in future you will continue for sharing such a excellent post.
    ethical hacking course training in Guwahati

    ReplyDelete
  23. It's like you understand the topic well, but forgot to include your readers. Maybe you should think about it from several angles.
    Data Science In Bangalore

    ReplyDelete
  24. 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
  25. 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
  26. 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.
    artificial intelligence course in pune

    ReplyDelete
  27. 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
  28. With so many books and articles appearing to usher in the field of making money online and further confusing the reader on the real way to make money.
    Digital Marketing Course in Bangalore

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

    Business Analytics Course

    ReplyDelete