(c) Herman

Timelaps

{source}<html><head>
<title>Sloop</title>

<script language="javascript">

window.onload = init

var currentSlide = -1
var imgPrefix = 'https://www.hermanzondag.nl/images/sloop/';
var startDelay = 1;
var delay = 1;
var run = false;

var imgPlay
var imgPause

var arrayImages = new Array()

arrayImages[0] = '1.jpg'
arrayImages[1] = '2.jpg'
arrayImages[2] = '3.jpg'
arrayImages[3] = '4.jpg'
arrayImages[4] = '5.jpg'
arrayImages[5] = '6.jpg'
arrayImages[6] = '7.jpg'
arrayImages[7] = '8.jpg'
arrayImages[8] = '9.jpg'
arrayImages[9] = '10.jpg'
arrayImages[10] = '11.jpg'
arrayImages[11] = '12.jpg'
arrayImages[12] = '13.jpg'
arrayImages[13] = '14.jpg'
arrayImages[14] = '15.jpg'
arrayImages[15] = '16.jpg'
arrayImages[16] = '17.jpg'
arrayImages[17] = '18.jpg'
arrayImages[18] = '19.jpg'
arrayImages[19] = '20.jpg'
arrayImages[20] = '21.jpg'
arrayImages[21] = '22.jpg'
arrayImages[22] = '23.jpg'
arrayImages[23] = '24.jpg'
arrayImages[24] = '25.jpg'
arrayImages[25] = '26.jpg'
arrayImages[26] = '27.jpg'
arrayImages[27] = '28.jpg'
arrayImages[28] = '29.jpg'
arrayImages[29] = '30.jpg'
arrayImages[30] = '31.jpg'
arrayImages[31] = '32.jpg'
arrayImages[32] = '33.jpg'
arrayImages[33] = '34.jpg'
arrayImages[34] = '35.jpg'
arrayImages[35] = '36.jpg'
arrayImages[36] = '37.jpg'
arrayImages[37] = '38.jpg'
arrayImages[38] = '39.jpg'
arrayImages[39] = '40.jpg'
arrayImages[40] = '41.jpg'
arrayImages[41] = '42.jpg'
arrayImages[42] = '43.jpg'
arrayImages[43] = '44.jpg'
arrayImages[44] = '45.jpg'
arrayImages[45] = '46.jpg'
arrayImages[46] = '47.jpg'
arrayImages[47] = '48.jpg'
arrayImages[48] = '49.jpg'

var arraySlides = new Array()

function init() {
imgPlay = new Image();
imgPlay.src = 'https://www.hermanzondag.nl/images/sloop/play.png';

imgPause = new Image();
imgPause.src = 'https://www.hermanzondag.nl/images/sloop/pause.png';

if (document.images) {
for (var i = 0; i < arrayImages.length; i++) {
arraySlides[i] = new Image();
arraySlides[i].src = imgPrefix + arrayImages[i];
}
}
document.images.slide.src = arraySlides[0].src;
}

function nextSlide() {
if (document.images && typeof arraySlides != 'undefined') {
currentSlide++;
if (currentSlide >= arraySlides.length){
stop();
}else{
document.images.slide.src = arraySlides[currentSlide].src;
}
}
}

function prevSlide() {
if (document.images && typeof arraySlides != 'undefined') {
currentSlide--;
if (currentSlide < 0) currentSlide = 0;
document.images.slide.src = arraySlides[currentSlide].src;
}
}

function slideShow(){
if(run) {
nextSlide()
setTimeout('slideShow();', document.forms.form1.speed.value * 100);
}
}

function play(){
run=true;
document.images.but.src = imgPause.src;
slideShow();
}

function pause(){
run=false;
document.images.but.src = imgPlay.src;
}

function stop(){
currentSlide=0;
run=false;
document.images.but.src = imgPlay.src;
}

function togglePlayPause(){
if(run) {
pause();
}else{
play();
}
}


function setSpeed(speed){
document.forms.form1.speed.value = speed
}

</script>
</head>
<body>
<form name="form1">

<table border="1" cellpadding="0" cellspacing="0" style="font-family:
verdana; font-size: 10px; font-weight: bold;">
<tr>
<td colspan="3"><img
src="https://www.hermanzondag.nl/images/sloop/1.jpg"
ID="slide" name="slide"></td>
</tr>
<tr>
<td colspan="3" align="center">
<BR>
<a href="javascript:prevSlide()"><img src="https://www.hermanzondag.nl/images/sloop/prev.gif" border="0"></a>
<a href="javascript:togglePlayPause()" ><img src="https://www.hermanzondag.nl/images/sloop/play.png" border="0"
ID="but" name="but"></a>
<a href="javascript:nextSlide()"><img src="https://www.hermanzondag.nl/images/sloop/next.gif" border="0"></a>
</td>
</tr>
<tr>
<td>fast</td>
<td width="*" align="center">
<input type="radio" name="Spd" value="1"
onclick="setSpeed(this.value);run=true; play()">
<input type="radio" name="Spd" value="2"
onclick="setSpeed(this.value);run=true; play()">
<input type="radio" name="Spd" value="3"
onclick="setSpeed(this.value);run=true; play()">
<input type="radio" name="Spd" value="4"
onclick="setSpeed(this.value);run=true; play()">
<input type="radio" name="Spd" value="5" checked
onclick="setSpeed(this.value);run=true; play()">
<input type="radio" name="Spd" value="6"
onclick="setSpeed(this.value);run=true; play()">
<input type="radio" name="Spd" value="7"
onclick="setSpeed(this.value);run=true; play()">
<input type="radio" name="Spd" value="8"
onclick="setSpeed(this.value);run=true; play()">
<input type="radio" name="Spd" value="9"
onclick="setSpeed(this.value);run=true; play()">
</td>
<td align="right">slow</td>
</tr>
</table>

<input type="hidden" name="speed" value="5"><BR>
</form>

</body></html>{/source}