Menu
I have making a simple slide show using Prototype and Scriptaculous. This is in my javascript file, slideshow.js:
[CODE]var slideTime = 1000;
var index = 0;
var images = $$(‘.slideshow’);
var numImages = images.length;
document.observe(‘dom:loaded’, function(){
setInterval(slide(), slideTime);
});
function slide(){
if (index == numImages – 1) {
index = 1;
images[0].appear();
images.each(function(ele){
ele.show();
});
} else images[index++].fade();
}
and here is my index.html file:
[code=html]<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<link type=”text/css” rel=”stylesheet” media=”all” href=”main.css”>
<script src=”lib/prototype/prototype.js” type=”text/javascript”></script>
<script src=”lib/scriptaculous/scriptaculous.js” type=”text/javascript”></script>
<script src=”lib/slideshow.js”></script>
<title>New Web Project</title>
</head>
<body>
<h1>New Web Project Page</h1>
<img id=”slideshow” src=”images/gold.png” class=”slideshow” alt=””></a>
<img id=”img2″ src=”images/header-image.png” class=”slideshow” alt=””>
<p id=”output”>!!!</p>
<p id=”output2″>###</p>
</body>
</html>
When I do this absolutely nothing happens in the browser (FireFox or IE). None of the images fade.
What am I doing wrong?