looping slideshow fails to change/fade image in/out

[clover8leaf]

Hello, hope you have a few minutes to lend me your thoughts on why my code doesn't do anything. I'm trying to run a looping slideshow of 3 or more pictures, fading in and out. At the moment, nothing happens. The first image is displayed statically in position, no fading or changing image at all.

my code:
in the head I declare my images

    <script type="text/javascript">
    <!--
        var image1=new Image()
        image1.src="media/home/image1.jpg"
        var image2=new Image()
        image2.src="media/home/image2.jpg"
        var image3=new Image()
        image3.src="media/home/image3.jpg"
    //-->
    </script>

and this is in the body

<div id="content">
          <div id="slideshow"> <img src="media/home/image1.jpg"
              alt="oops! The slideshow hasn't loaded! Please try
              refreshing (ctrl+F5) or send us an email to let us know."
              name="slide" height="410" width="600"> </div>
          <div id="nextslide"> <img src="media/home/image2.jpg"
              alt="oops! The slideshow hasn't loaded! Please try
              refreshing (ctrl+F5) or send us an email to let us know."
              name="slide" height="410" width="600"> </div>
          <script type="text/javascript">
<!--
//if browser does not support the image object, exit.
if (!document.images)
return
if (!document.getElementById)
return
 
var slide1 = document.getElementById("slideshow");
var slide2 = document.getElementById("nextslide");
var currentpic = document.getElementById("slide1pic");
var nextpic = document.getElementById("slide2pic");
var changeslide = document.getElementById("slideshow").src;
var duration = 3000; /* fade duration in millisecond */
var showtime = 10000; /* time to stay visible */
//variable that will increment through the images
var step=3;
 
//function to update opacity/alpha filter of slide1 to a given value and of slide2 to the inverse
function SetOpa(Opa) {
Opa2 = 1-Opa;
slide1.style.opacity = Opa;
slide1.style.MozOpacity = Opa;
slide1.style.KhtmlOpacity = Opa;
slide1.style.filter = 'alpha(opacity=' + (Opa * 100) + ');';
slide2.style.opacity = Opa2;
slide2.style.MozOpacity = Opa2;
slide2.style.KhtmlOpacity = Opa2;
slide2.style.filter = 'alpha(opacity=' + (Opa2 * 100) + ');';
}
 
function fade() {
//fade from slide1 to halfway between 1 and 2
for (i = 0; i <= 0.5; i += 0.01) {
setTimeout("SetOpa(" + (1 - i) +")", i * duration);
}
//at halfway point, switch slide images
changeslide=currentpic.src;
document.images.currentpic.src=eval(nextpic.src);
document.images.nextpic.src=changeslide;
 
//complete fade through
for (i = 0.5; i <= 1; i += 0.01) {
setTimeout("SetOpa(" + (1 - i) +")", i * duration);
}
//update nextslide
document.images.slide2.src=eval("image"+(step)".src");
 
if(step < 3)
step++;
else
step=1;
 
//call function fade() every 10 seconds
setTimeout("fade()",showtime);
}
 
fade();
//-->
</script>
</div>
 

can you tell me what i'm doing wrong?

[migi48]

Hi clover8leaf.

Basically from your code, you are only creating the images (image1,image2, and image3). However, you have no code for diplaying those images. I suggest that you create a function:

function updateFullImage(id, url){
     var image1 = document.getElementById(id);
     img.src = url ; 
} 

Note: Make sure you have an image tag in your HTML and have an ID.

[Dormilich]

However, you have no code for diplaying those images. I suggest that you create a function:

function updateFullImage(id, url){
     var image1 = document.getElementById(id);
     img.src = url ; 
} 

except for the issue that you don't change the src of the image you fetch ...