Fading Issues when Image is clicked [RESOLVED]
Hi. I am currently working on a script that when I click a picture(thumbnail) it changes the bigger image to it. However, I am running into issues when I try to use jquery to fade it in and out smoothly. The issue seems to occur mostly when the images aren't stored in the cache and therefore it'll load and then change.
The page it's displayed on is
http://wfaworldwide.com/new/node/4.
Here is the jQuery that I use to get it to work.
-
var newImage = "";
$(".tinyImage").click(function(){
newImage = $(this).attr("src");
newImage = newImage.replace("Small", "Big");
$(".bigImage").changeImage(newImage);
});
jQuery.fn.changeImage = function(newImage){
$(this).fadeTo(250, 0.0, function(){
$(this)
.attr("src", newImage)
.animate({opacity: 0.0}, 200, function(){
$(this)
.fadeTo(250, 1.0)
})
})
};
Basically, it takes the src of an image with the class "tinyImage" and then uses that to change the source of the image with the class "bigImage". However, the problem seems more in my changeImage function with the whole fading animation process. I would ideally like it to fade out and then fade in with the new image when a thumbnail is clicked. Any ideas?
EDIT: Well, basically I was able to solve my problem by just preloading my images in a hidden div so that it doesn't load it onclick which seemed to fix the animation issues.