SOLVED: Image FadeOut-Load-FadeIn (again!)

Hi *,

i guess my problem described below is a ridiculous one for all of you. But i have no idea where my mistake is.

I have the following code:

$(document).ready(function()
{
    $('#thumbnail a').click(function()
    {                       
        //Get the target filename and set to 'file' variable
        file = $(this).attr("name");
       
        //Fade out current visible image
        $("#image").fadeOut("slow");

        //Get target file
        $('#image').load(file, function(){
            $("#image").fadeIn("slow");}
        );
               
    }); 
});

and the corresponding HTML:

<div id="imagewrap">
    <div id="image"><img src="images/foobar/image001.jpg"></div>
</div>
 
<div id="thumbnail">
    <a name="images/foobar/image002.jpg" href="#">Action 002</a>
    <a name="images/foobar/image003.jpg" href="#">Action 003</a>
</div>


What should be happen is that the "file"-var (which stores the correct path from the thumbnail correctly) gets loaded in the #image-div with a fade-in.
What actually happens is that the image001.jpg fades out and in again when clicking the links.

Oh god i feel so stupid right now.
Can anyone give me a hint?

Cheers in advance and best from Berlin!
fabian

Edit: This worked! Sorry for a probably early post.

// Thumbnail Event Handler   
$('a.thumbnail').click(function(){
   var newImage = $(this).attr('id');
   $('img#the_image').fadeOut(500, function()
   {         
       $(this).attr('src', newImage)
         .bind('onreadystatechange load', function()
         {
              if (this.complete) $(this).fadeIn(1000);
         });
    });     
});


• Topic Participants

• fab