Because of some unknown reason this script doesn't work in internet
explorer if I try to click any of the images the script halts at the
load, and just keeps on showing the loading icon (background of
the .loading class). It does however display an Image when i first
enter the site (because of the triggered $("ThumbnailList
a:first").click())
What am I doing wrong with this code:
<script type="text/javascript">
$(document).ready(function() {
$("#ThumbnailList a").fadeTo(0, 0.4);
$("#ThumbnailList a").hover(function(){
if($(this).is(":animated")){
$(this).stop();}
$(this).fadeTo(100, 1);
},
function(){
$(this).fadeTo(100, 0.4);});
$("#ThumbnailList a").click(function(){
ManageClick($(this).attr("Picture1"), $(this).attr("Picture2"), $
(this).attr("Picture3"), $(this).attr("alt"));
return false;
});
function ManageClick(src1, src2, src3, text){
$("#Picture2").addClass("loading");
$("#PictureDesc").fadeOut(300);
NewPic("#Picture1", src1, 400);
NewPic("#Picture2", src2, 800);
NewPic("#Picture3", src3, 1200);
$("#PictureDesc").html('<p>hihi</p>').fadeIn(400);
}
function NewPic(id, src, fadeTime){
pic = $(id + " img");
if(pic.is(":animated")){
pic.stop();
}
if(pic.length){
pic.fadeOut(300).remove();
}
if(src != ""){
var largeImage = new Image();
$(largeImage).attr("src", src)
.load(function()
{
$(largeImage).hide();
$("#Picture2").removeClass("loading");
$(id).append(largeImage);
$(largeImage).fadeIn(fadeTime);
});
}
}
$("#ThumbnailList a:first").click();
});
</script>
