I have created a simple slideshow buy adapting a script. I want it to run on load and for the user to be able to stop and start it. I have found some code that says it does the job. It doesn't - the buttons don't work. I'm not sure of the reason why and would like some help to resolve the problem.
The js code that I am using is;
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
$(function() {
$("#container .slideshow > div:gt(0)").hide();
setInterval(function() {
$('#container .slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#container .slideshow');
}, 3000);})
function mode(param)
{
smode=param;
}
function startSlideshow()
{
if(smode=="play")
{
document.getElementById("play").disabled="disabled";
document.getElementById("stop").disabled="";
document.getElementById("slide-buttons").src=imgsrc[i];
i++;
setTimeout("startSlideshow()",1000);
}
else if(smode=="stop")
{
document.getElementById("play").disabled="";
document.getElementById("play").value="Play";
document.getElementById("stop").disabled="disabled";
document.getElementById("slide-buttons").src=imgsrc[0];
i=0;
}
if(i==imgsrc.length)
{
i=0;
}}
</script>
The html code is;
<div class="slideshow">
<!-- I have removed the my url address for this post -->
<div>
<img src="wdcb-images/candles.png" alt="Photo: A church service being held in a park" >
</div>
<div>
<img src="wdcb-images/fire.png" alt="Photo: Jesus in the garden of Gethsemane" >
</div>
<div>
<img src="wdcb-images/pancakes.png" alt="Photo: A church's Pancake picnic in a park" >
</div>
<div>
<img src="wdcb-images/bible.png" alt="Photo: Showing that the Bible speaks today" >
</div>
<div>
<img src="wdcb-images/church.png" alt="Photo: Heslinki Cathedral" / >
</div>
</div>
<div class="slide-buttons">
<input id="play" type="button" value="Play" onclick='mode'('play');startSlideshow();" />
<input id="stop" type="button" value="Stop" onclick='mode'('stop');startSlideshow();" />
</div>
How can I get the buttons to work?
I would also like the slider to be working automatically when loaded. It does at present.
The url is here
The css file is here
