Hi, im developing a little jquery gallery plugin for my personal use and im stuck at strange problem, it has probably something to do with image caching... Im loading images via attr('src',xxx) and i need them to resize so they fit in every resolution, i wrote a little function to do that, but the loaded image is always using dimensions of the image that was loaded first and i cant find where is the problem... I wrote a little debug function to see what is going on and it seems that when i run $('#image').load() it cycles through every image that was loaded before by attr()...
function setImg(){ //this function sets parameters of actualy loaded image
img.width=img.id.width();
img.height=img.id.height();
img.src=img.id.attr('src');
img.title=img.id.attr('title');
resize(); //than it calls resize function
}
function resize(){ //this function resizes the newly loaded image so it fits the window resolution (it works perfectly)
//few lines of some uninteresting code ( ratio calculations etc)
img.id.animate({
width:iWidth,
height:iHeight
}, 300);
}
function controls(direction,num){//this handles which image should be loaded
//few lines of some uninteresting code
img.id.fadeOut(100,function(){//fade out the original image
$('#loading').fadeIn(1,function(){//fade in loading image
img.id.attr('src','/images/gallery/'+imgName);//than load next -- here is the problem, it loads it with dimensions of the first loaded image...
})
});
img.id.load(function(){//wait for the next image to load
$('#loading').fadeOut(1,function(){//fade out loader
img.id.fadeIn(100,function(){//fade in image
setImg();//run the set image function so it can get image dimensions and resize it if necessary
});
})
});
}
Here is the gallery ... Sorry for my poor english and many thanks in advance;)