Hi,
I'm stuck here - I'm trying to load images dynamically on my website,
but for some reason the method I use works on a server on my local
computer, but behaves very strangely on a remote server...
I use this code to load the images:
function replaceImage(imgName, container) {
$j(container).hide(); //so it fades out once the image has loaded
$j(container).image(imgName, function() { //this is a simple plugin,
i'll paste it's code below
if(container != "#galImage") { //if it's a thumbnail, i want to be
able to click on it
$j(container).empty().append(this).wrap("<a href=\"#\"></a>");
} else { //it's not a thumbnail, so no "a" wrapper
$j(container).empty().append(this);
}
$j(container).fadeIn(); //finally, show the image
});
}
The simple plugin for loading images into a container:
$.fn.image = function(src, f){
return this.each(function(){
var i = new Image();
i.src = src;
i.onload = f;
this.appendChild(i);
});
}
This code is used like this: replaceImage('images/' + imgName,
'imgCont1');
As I said, everything works just fine on my machine with apache server
installed. But, when I open the website located on a server, it turns
out that most images don't appear at all, and the ones that do show up
are severely distorted... Does anybody know what could cause that?
Here's an example of such distorted image:
http://www.eurydicesite.info/error.jpg
The non-working site is available here: http://www.eurydicesite.info -
> when you click on "portfolio", 9 thumbnail images should appear to
the left, but they don't.
