Question

I hope someone can help me with this. I am having some trouble figuring out how to make a nice and clean fade transition between images. The code below is simplified but the jquery is more or less the same as I have in my test code. I want the fade from the current image in the “background” of the div num1 to the next image (where the next image is the thumbnail that was clicked on). The current code only seems to do this for the first one and thereafter there is no fade. How would I do this for the multiple images I have? Thanks in advance for any help.

JQuery:

jQuery(document).ready(function() {
    $(".bg_image_thumb").click(function(){
    var thumb_id = this.id;
    var main_href = $("#"+thumb_id).attr('href');
    $("#main_image").attr("src", main_href).fadeIn("slow");
    });
});

css:

#container { position: relative; }
#num1, #num2 { position: absolute;}
#num1 { z-index: 1; }
#num2 { z-index: 2; }

html:

<div id="container">
<div id="num1" style="min-height:700px;height:700px;width:700px;"><img id="main_image" src=""></div>
<div id="num2">
<a class="bg_image_thumb" id="bg_image_thumb1" onclick="return false;" href=image1.jpg"><img src="image1.jpg" /></a>
<a class="bg_image_thumb" id="bg_image_thumb2" onclick="return false;" href=image2.jpg"><img src="image2.jpg" /></a>
<a class="bg_image_thumb" id="bg_image_thumb3" onclick="return false;" href=image3.jpg"><img src="image3.jpg" /></a>
</div>
</div>

1

Answer 1

you need to change your fadeIn code to something like this;

$("#main_image").fadeOut("slow", function()
{
      $("#main_image").attr("src", main_href).fadeIn("slow");
});

this code first hides your current shown image, and after it’s finished, it will set the source and show the new image.

[NOTES]

1. This will give you an effect of fadeOut-then-fadeIn. If you want to have a fadeIn-fadeOut (same time) you need to use two controls for settings images.

In this case you need to use two img controls:

<div id='container'>
    <img id='main_image' src="http://dummyimage.com/300x200/000/fff&text=test1" />
    <img id='main_image_back' />
</div>

$("#main_image_back").attr("src", main_href).hide().fadeIn("slow", function()
{
      $("#main_image").attr("src", $("#main_image_back").attr("src"));
      $("#main_image_back").hide();
});
$("#main_image").show().fadeOut("slow", function(){$(this).show();});

and in your css:

#container {position:relative;}
#main_image_back {display:none; position:absolute; top:0; left:0;}

jsFiddler link: http://jsfiddle.net/ke4kM/7/