Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Jeff Busch
Jeff Busch
19,287 Points

Jquery make image fade into another div

Hi,

I have a web page that has six thumb images loaded. When the mouse hovers over the thumbnail a larger image appears in the center div. When the mouse leaves the thumbnail the original image returns. I want this to fade in and out but can't make it work. Below is the code I'm using now.

Thanks, Jeff

$(document).ready(function() {

    $("#img1 img").mouseover(function() {
        $("#mainpic").attr("src", "img/313080.jpg");
    });
    $("#img1 img").mouseout(function() {
        $("#mainpic").attr("src", "img/370819.jpg");
    });

    $("#img2 img").mouseover(function() {
        $("#mainpic").attr("src", "img/167483.jpg");
    });
    $("#img2 img").mouseout(function() {
        $("#mainpic").attr("src", "img/370819.jpg");
    });
});

3 Answers

Andrew Shook
Andrew Shook
31,709 Points

Jeff, Just finished working on this in the chrome console, so it should work for you because it worked for me. Paste this code into your app.js and then include that and your jQuery fill at the bottom of the html before the closing body tag.

var original_image_src = $("#mainpic").attr("src");
var original_image = $("#mainpic");
jQuery("img.hover-images").hover(function(){
        // mouse enter function

        original_image.stop().fadeOut(0).attr("src", $(this).attr("src") ).fadeIn(600);
    },
    function(){
        // mouse exit function
        original_image.stop().fadeOut(0).attr("src", original_image_src).fadeIn(600);
});

On a side note, you will need to find higher resolution images, because the smaller images get pixelated when they are displayed in the center. Best of luck.

EDIT: When you paste in the above code, you need to comment out all of the other code in the ready function.

Jeff Busch
Jeff Busch
19,287 Points

Thanks, I'll play with this.

I have thumbnails in img/thumb/.jpg and the larger images in img/.jpg.

Andrew Shook
Andrew Shook
31,709 Points

Yeah I just noticed that. I would use the larger images. One, because there are only 7 images on the page so it should effect load time. Two, it will make the JS more compact since you won't have to map large images to thumbnails.

Jeff Busch
Jeff Busch
19,287 Points

So you're suggesting I forget about the thumbnails.

Edit: Pretty slick, thanks.

Andrew Shook
Andrew Shook
31,709 Points

Yeah. If you had huge images ( 1600 x 800 px) or a lot of images, I wouldn't recommend it. However, since you are only loading 7 images I think you should be ok with loading all at once.

Jeff Busch
Jeff Busch
19,287 Points

Sometime I do want to figure out how to do this with thumbnails.

Andrew Shook
Andrew Shook
31,709 Points

You could do it with thumbnails by adding a data attribute to the image tags. For example:

<img class="hover-images" src="img/name-of-thumbnail.jpg" alt="Semi-precious, pearls, Czech glass with antique Tibetan pendant strung in multiple layers" width="100" height="100" border="0" data-source="img/name-of-large-img.jpg">

Then you would need to change the JS to this:

var original_image_src = $("#mainpic").attr("src");
    var original_image = $("#mainpic");
    jQuery("img.hover-images").hover(function(){
            // mouse enter function

            original_image.stop().fadeOut(0).attr("src", $(this).attr("data-source") ).fadeIn(600);
        },
        function(){
            // mouse exit function
            original_image.stop().fadeOut(0).attr("src", original_image_src).fadeIn(600);
    });

That should get it to work with thumbnails.

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

Jeff, first I would give all the images a single class, that will require less duplication of code since you can use one jQuery command. I would use something like this:

var original_image_src = $("#original-image").attr("src");
var original_image = $("#original-image");
$("img.hover-images").hover(function(){
        // mouse enter function

        original_image.hide().attr("src", $(this).attr("src") ).show();
    },
    function(){
        // mouse exit function
        original_image.hide().attr("src", original_image_src).show();
});

Not sure if the attr method returns the full object so you might need to call the .show() method on the original_image object on the next line.

Jeff Busch
Jeff Busch
19,287 Points

Thanks Andrew,

I'll give that a go in a little.

Jeff Busch
Jeff Busch
19,287 Points
Jeff Busch
Jeff Busch
19,287 Points

Hi Andrew,

I tried your code without success; I probably didn't use it correctly. Here is a Link to what I'm doing except I want the images to fade in and out. This Is a web page my cousin has had for years and I thought I'd practice with it and hopefully surprise her.

Jeff