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.
Solution
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>
OTHER TIPS
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.