Programming Interview Questions and Answers: jQuery to show big image on hover

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>