Log in

View Full Version : HTML/Javascipt Slideshow


Fuelednrdy
05-15-2011, 07:11 PM
Pretty simple, I'm trying to me a slide show for my website (face in, 2.5 seconds later, fade out and move to the next one). I have a problem, I have tried everything to try and get the code working but I don't have a clue what the problem is.

Anyone tell me if you can spot any errors? I have managed to get the image to appear on my page but won't start the slide.

<html>
<body>

<head>
<script type="text/javascript">
<!--
var image1=new Image()
image1.src="Images\double.jpg"
var image2=new Image()
image2.src="Images\family.jpg"
var image3=new Image()
image3.src="Images\room.jpg"
//-->
</script>
</head>

<body>
<center><img src="Images\double.jpg" name="slide" width="500" height="456" /></center>
<script>
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every 1.0 seconds
setTimeout("slideit()",2500)
}
slideit()
//-->
</script>

</body>
</html>
jscheuer1
05-15-2011, 10:29 PM
The page has 2 body tags, only one allowed per page.


The paths to the images use the wrong slash (\), it should be (/):


<script type="text/javascript">
<!--
var image1=new Image()
image1.src="Images\double.jpg"
var image2=new Image()
image2.src="Images\family.jpg"
var image3=new Image()
image3.src="Images\room.jpg"
//-->
</script>
</head>

<body>
<center><img src="Images\double.jpg" name="slide" width="500" height="456" /></center>

should be:


<script type="text/javascript">
<!--
var image1=new Image()
image1.src="Images/double.jpg"
var image2=new Image()
image2.src="Images/family.jpg"
var image3=new Image()
image3.src="Images/room.jpg"
//-->
</script>
</head>

<body>
<center><img src="Images/double.jpg" name="slide" width="500" height="456" /></center>



There's nothing in there that would cause the images to fade in or out.



The use of eval there isn't necessary and may even be causing an error, try:


document.images.slide.src = window['image' + step].src;

instead.


Number 2 is probably the most serious. There could be other issues like missing images or other things with the code that aren't immediately apparent from your post.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

Also, for a slideshow that does fade in and out, see:

http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

There are many others.
Fuelednrdy
05-16-2011, 12:14 AM
I badly worded my request, sorry. What I mean't was I was trying to get the slide to work, not fade in/out. I changed the "\" to "/" on the image code and it fixed everything, I now have a working slideshow and can work on adding more images to it.

Thank you very much for your help.

James.