I'm trying to create a simple portfolio page. I have a list of thumbs and an
image. When you click on a thumb, the
image will change.
When a thumbnail is clicked, I'd like to have the
image fade out, wait until the
image is loaded, then fade back in. The problem I have right now is that some of the images are pretty big, so it fades out, then fades back in immediately, sometimes while the
image is still loading.
I'd like to avoid using setTimeout, since sometimes an
image will load faster or slower than the time I set.
Here's my code:
$(function() {
$('img#image').attr("src", $('ul#thumbs li:first img').attr("src"));
$('ul#thumbs li img').click(function() {
$('img#image').fadeOut(700);
var src = $(this).attr("src");
$('img#image').attr("src", src);
$('img#image').fadeIn(700);
});
});
<img id="
image" src="" alt="" />
<ul id="thumbs">
<li><img src="/images/thumb1.png" /></li>
<li><img src="/images/thumb2.png" /></li>
<li><img src="/images/thumb3.png" /></li>
</ul>
