HI there, I am attempting a crossfade based on this but needless to say it is not working as nicely as it should. What I have done was to run through the code in the above example, understand it - or at least attempting to do so with a bit of help - and then applying to my website. SOmething obviously had to go wrong, what it is, well, hard to say, so I was hoping sb can help me to spot the error.
Here's the site I am working on. Now, first problem: have 3 images and the transition is being funny in that it only changes 1 image and then it quickly - without transition - goes back to the first one skipping the 3rd image altogether. I presume this is a problem with the script.
Second,in firefox, opera, IE and safari, I can see the 3 images stacked on the top of each other as they should be (they all have z-index 1 at the beginning except the first picture whic has z-index 3) but if I look at the site in chrome the 3 pictures are all displayed at the same time in different positions on the page (screeshot attached). This surely is a problem with the css although I can't quite figure out what it is.
One more thing: if I look at the local copy the css seems fine, in that I don't get any problem with all images displayed at the same time, but the moment I upload the files onto the server and look at the live site then, the problems start...I am a bit puzzled, any suggestions at all please?
The script is nothing else than a rearrangement of the above:
<script type = "text/javascript">
function changeImages(){
var active_image = $("#main_picture .active");
var next_image = ($("#main_picture").next().length > 0) ? $("#main_picture .active").next() : $("#main_picture img:first");
next_image.css('z-index',2);
active_image.fadeOut(1500,function(){
active_image.css('z-index',1).show().removeClass('active');
next_image.css('z-index',3).addClass('active');
});
}
$(document).ready(function(){
setInterval('changeImages()',3000);
});
</script>The relevant css instead:
/* FOR HOME PAGE SCRIPT */
#main_picture
{
top:50px;
position:relative;
width:700px;
height:450px;
border:3px solid white;
margin: 0 auto;
clear:both;
}
#main_picture img
{
position:absolute;
z-index:1;
}
#main_picture img.active
{
z-index:3;
}
/* HOME PAGE SCRIPT END */thanks