Response title
This is preview!
FadeIn and FadeOut failing to run after third click...(loading images based on clicking a thumbnail)
in Using jQuery
•
11 years ago
Basic setup
2 Image tags (one to load and then swap out the other.. alternating between clicks)
Unlimited number of thumbnails.
Wired up the click event of the thumnails to load image and then do the fade thing.
1. load the image
2.Change Z-Index
3. Fade old image out
4. Fade new image in
At one point i had wired this to the .load event of the image tags.. but that didn't change the result.
What happens:
The first two thumbnails clicked work perfectly.. but after that , it just swaps out the image without any transition.
Any ideas here would be appreciated.. (i have tried animate as well as fadeIn/faceOut) and they all do the same thing. The swap works, but the effect goes away.
e.g.
thumbs..
<img class='thumb' alt='' src='/picture/ShowThumb/1036' />
<img class='thumb' alt='' src='/picture/ShowThumb/1037' />
<img class='thumb' alt='' src='/picture/ShowThumb/1038' />
<img class='thumb' alt='' src='/picture/ShowThumb/1039' />
Image containers..
<div id='d1'><img class='img1' src='/picture/ShowFile/somepic.jpg/></div> <div id='d2'><img class='img2' src='/picture/ShowFile/somepic2.jpg' /></div>
In the doc ready...
$(".thumb").click( function () { src = $(this).attr("src").toString(); var newFile = src.replace("Thumb", "file"); changeImages(newFile );
});
Then changeImages:
function changeImages(name){ if(imgNum ==1) { $(".img2").attr("src", name).css("z-index", 200); $(".img1").css("z-index", 100).hide(1000) $(".img2").show(1000); imgNum=2; } else{ $(".img1").attr("src", name).css("z-index", 200); $(".img2").css("z-index", 100).hide(1000); $(".img1").show(1000); ingNum=1; } }
1
