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>
Posted by Nikhil Singhal at 9:11 PM
Tags: ,

15 comments:

  1. Regina HilaryJanuary 17, 2017 at 8:25 PM



    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
  2. Street viewMay 14, 2017 at 6:38 PM

    • 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. johnMay 23, 2020 at 12:45 PM

    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. Data Science puneMay 25, 2020 at 11:40 PM

    This comment has been removed by the author.

    ReplyDelete
  5. Data Analytics PuneMay 26, 2020 at 7:45 AM

    Nice post and valuable information thank you.
    Data Analytics Course in Pune

    ReplyDelete
  6. Business Analytics CourseMay 27, 2020 at 4:50 AM

    Nice post and valuable information, writing is simply great, thanks for sharing.
    Business Analytics Course in Pune
    Business Analytics Training in Pune

    ReplyDelete
  7. KenwoodMay 31, 2020 at 11:41 AM

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

    ReplyDelete
  8. Data Science Institute In BangloreJune 3, 2020 at 12:27 AM

    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
  9. Data Science TrainingJune 3, 2020 at 7:35 AM

    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
  10. Data Science CourseJune 4, 2020 at 4:09 AM

    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
  11. Data Science TrainingJune 4, 2020 at 4:40 AM

    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
  12. tejaswiniJune 4, 2020 at 8:40 PM

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

    ReplyDelete
  13. ManeeshaJune 6, 2020 at 3:59 AM

    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
  14. abidJune 9, 2020 at 4:38 PM

    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
  15. Data Science puneJune 10, 2020 at 7:33 AM

    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

Subscribe to: Post Comments (Atom)