jQuery and ajax gallery fade in and fade out effect on thumb clicks!

Question

Need some help, please.

I have a line of horizontal thumbnails loaded as ONE image with the different thumbnails images referenced via an imagemap as such:

<div id="zoom">
    <img src="" />
</div>
<div id="collectionindex">
    <img src="thumbnail-strip.jpg" alt="" usemap="#Map" />
        <map name="Map" id="Map">
            <area shape="rect" coords="151,0,211,39" href="image1.jpg" alt="" />
            <area shape="rect" coords="215,0,275,39" href="image2.jpg" alt="" />
            <area shape="rect" coords="279,0,339,39" href="image3.jpg" alt="" />
            <area shape="rect" coords="343,0,403,39" href="image4.jpg" alt="" />
            <area shape="rect" coords="407,1,467,40" href="image5.jpg" alt="" />
            <area shape="rect" coords="471,0,531,39" href="image6.jpg" alt="" />
     </map>
</div>

The IMG tag in the div with id="zoom" is my AJAX zoom window for when users "click" on the thumbnails to display the larger version of the image.

This is jQuery code I have to fadeIn the LARGE versions of the thumbnails in the ZOOM box.

<script type="text/javascript">
$(document).ready(function(){

$("area").click(function(){

     var largePath = $(this).attr("href");

     $("#zoom img").attr({ src: largePath }).fadeIn("slow"); return false;
      });
    });
</script>

Right now, jQuery ONLY fades IN the first clicked on thumbnail, the rest simply just appear upon clicking, and not fade in. I'd like for it to work this way:

• user clicks thumbnail
• large image FADES IN to zoom box
• user clicks another thumbnail
• first image FADES OUT and second selected thumbnail FADES IN
• etc.

I hope I explained it clearly. :) Any help would be immensely appreciated.

Answer 1

You just need to fade the image out before changing the path & fading it in... so your click function should become:

EDIT: Forgot that the show/hide animations happened asynchronously, so you need to use a callback on the fade out to trigger the rest... code should be:

<script type="text/javascript">
$(document).ready(function(){
    $("area").click(function(){
     var largePath = $(this).attr("href");
     $("#zoom img").fadeOut("slow", function() {
      $(this).attr({ src: largePath }).fadeIn("slow");
     });
     return false;
    });
});
</script>

Answer 2

I'm new here and just saw my comment to your response was terribly styled. :P

thank you for the quick response - just tried this and it except it looks like it DISPLAYS the newly selected LARGE image, FADES it OUT, then FADES it IN again.

i need it to:

• FADE IN 1st image after user selects
• user selects next image > FADE OUT 1st image > FADE IN next image
• and so on and so on.