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
[CODE] <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
[code]<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?