I am building an image gallery where I have a "preview window"(an ) that is floated left, and on the right are my thumbnail images. When the user hovers over the thumbnails, the preview window updates to show a larger version of the thumbnail.

What I can't seem to figure out is how to have the new image fade in over the existing image, rather than just swapping out the path on the source attribute.

The code I am using(I'm new to this, so be nice. Constructive criticism would be appreciated, however):

$(document).ready(function() {

$("#thumb-block a").mouseover(function() {
    var largealt = $(this).attr("title");
    var fileid = $(this).attr("id");

    $("#main_view").attr( {src: "images/" + fileid + "-preview.jpg", alt: largealt} );

});

});

2 answers

Alex Holt 341
2
points
This was chosen as the best answer

You have to be a little trickier to make this work. I'm really tired.. so i'm going to give you just a run down of how i'd tackle this.. rather than code.. :)

You'd overlay a new div over the top of the existing img and then fade that new div in, once that new div is faded in, you swap the image in the old div, hide the new div (so it's ready to fade in the next one...)

if that makes no sense.. ask away.. and i'll try and help out tomorrow when my head is less fuzzy :)

Answered over 7 years ago by Alex Holt
  • That's actually pretty helpful. I'll let you know what I come up with! Rob Nixon over 7 years ago
danwellman 5600
2
points

Add the new image underneth the existing image (position it the same, use z-index to put the new one under), then use jQuery's fadeOut() method on the existing image to fade it from view revealing the new image

Or append it to the big image container, over the top of the existing image using .appendTo("#containerid").hide().fadeIn() then use remove() on the old image to remove it

Answered over 7 years ago by danwellman