Javascript array with PHP

**Keithb** · 12-12-2008, 12:23 AM

I'm not sure if this should go in the PHP forum but as the issue concerns Javascript I've put it here. I am experimenting with a script that uses PHP to populate an array with the contents of a directory (a list of image files). This is the PHP:

Code:

<?
//PHP SCRIPT: getimages.php
Header("content-type: application/x-javascript");

//This function gets the file names of all images in the current directory
//and ouputs them as a JavaScript array
function returnimages($dirname=".") {
$pattern="(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)"; //valid image extensions
$files = array();
$curimage=0;
if($handle = opendir($dirname)) {
while(false !== ($file = readdir($handle))){
if(eregi($pattern, $file)){ //if this file is a valid image
//Output it as a JavaScript array element
echo 'galleryarray['.$curimage.']="'.$file .'";';
$curimage++;
}
}

closedir($handle);
}
return($files);
}

echo 'var galleryarray=new Array();'; //Define array in JavaScript
returnimages() //Output the array elements containing the image file names
?>

and the javascript:

Code:

<HTML>
<HEAD>

<script src="http://www.wthrman.com/maps/surface/200001/getimages.php">
//This is the directory where the images are eg www.wthrman.com/maps/surface/ etc..put the php in there
</script>

<script type="text/javascript">

var curimg=0
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "http://www.wthrman.com/maps/surface/200001/"+galleryarray[curimg])//Change the directory here too ie "..." + galleryarray[curimg]
curimg=(curimg<galleryarray.length-1)? curimg+1 : 0
}

window.onload=function(){
setInterval("rotateimages()", 2500)
}
</script>
</HEAD>
<BODY>

<div style="width: 680px; height: 400px">
<img id="slideshow" src="2000010100.png"/>
</div>
</BODY>
</HTML>

As it stands, the scripts automatically run a slideshow of all the images in the directory, when the .htm file is opened. However I don't want to automatically see all the files, but only a certain range of them. The images have date formats as in YYYYMMDDHH (HH is for hours at 6-hourly intervals ie 00,06,12,18).

I'm sure this can be done with 2 sets of option boxes that select a first and last date based on the above file format...the idea is to view all the images in between the two dates selected (there will be a box of options for first and last year, month, day and hour..this is the only way I know how to specify the dates).

I've no problem with setting up the option boxes, but apart from having to bypass the automatic 'onload' so the user can access them, I don't know what I then should do to get only the images between the two dates, into the array, assuming it would function as it does with all the images, as outlined above.

The foregoing is all a bit long-winded but I think there's got to be a simple solution.

Could someone please help?

Thank you

**jscheuer1** · 12-12-2008, 04:06 AM

That looks a lot like getpics.php (text version):

http://www.dynamicdrive.com/dynamici...etpics.php.txt

which outputs an array like so (active PHP version):

http://www.dynamicdrive.com/dynamici...ry/getpics.php

As you can see in the active version the date and time are in the second part of each array contained in the main galleryarray entry for each image (galleryarray[#][1]) which could then be parsed for hour, ex:

Code:

<script type="text/javascript">
var galleryarray=new Array();
galleryarray[0]=["jag1.jpg", "Aug 11, 2007 17:00:05"];
galleryarray[1]=["jag10.jpg", "Aug 11, 2007 17:00:07"];
galleryarray[2]=["jag11.jpg", "Aug 11, 2007 17:00:08"];
galleryarray[3]=["jag12.jpg", "Aug 11, 2007 17:00:08"];
galleryarray[4]=["jag13.jpg", "Aug 11, 2007 17:00:09"];
galleryarray[5]=["jag14.jpg", "Aug 11, 2007 17:00:10"];
galleryarray[6]=["jag2.jpg", "Aug 11, 2007 17:00:10"];
galleryarray[7]=["jag3.jpg", "Aug 11, 2007 17:00:11"];
galleryarray[8]=["jag4.jpg", "Aug 11, 2007 17:00:12"];
galleryarray[9]=["jag5.jpg", "Aug 11, 2007 17:00:13"];
galleryarray[10]=["jag6.jpg", "Aug 11, 2007 17:00:14"];
galleryarray[11]=["jag7.jpg", "Aug 11, 2007 17:00:17"];
galleryarray[12]=["jag8.jpg", "Aug 11, 2007 17:00:18"];
galleryarray[13]=["jag9.jpg", "Aug 11, 2007 17:00:18"];

alert(galleryarray[0][1].replace(/^[^:]* (\d+):.*$/, '$1'));
</script>

In a similar fashion one could get the year, etc. However, this information is also available on the server side, and it might be better to get at it in that fashion. If so, ask in the PHP forum.

**Keithb** · 12-12-2008, 04:44 AM

Thanks John, I did base it on a similarly-named script from another forum..forget which one now...maybe a modified version of the one you refer to, I don't know.

I've been doing more trawling around and I think I probably need some sort of date script, as the names of the images I want to view are defined by dates (as selected in the option boxes). PHP was the latest option I had tried as I couldn't get anything else to work. But the main issue is really how to populate the array with the image names (eg 2008010112.png) so as to view them in a slideshow.

There are probably better ways of doing all this than what I've posted but the multitude of slideshow programs online so far haven't been of much help, unfortunately.

**jscheuer1** · 12-12-2008, 07:17 AM

Since, as far as I could tell, you currently have only images for January 2000, I only allowed for those values in the month and year selects. I noticed that there were images for hour 3, but since you didn't mention those in your post, I didn't include them in the hour selects. Anything may be added or removed from the selects as long as your image base will support the resulting values. The hour 3 images will show up, if they are in range of the selected values:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script src="http://www.wthrman.com/maps/surface/200001/getimages.php" type="text/javascript">
//This is the directory where the images are eg www.wthrman.com/maps/surface/ etc..put the php in there
</script>

<script type="text/javascript">
(function(g){
 for (var i = g.length - 1; i > -1; --i)
  g[i] = g[i].split('.');
 g.sort(function(a, b){return b[0] - a[0];});
})(galleryarray);

var galshow = function(f, g){
if(g.timer)
clearInterval(g.timer);
f = f.elements; g.curimg = 0; g.gal = []; var v = function(el){return el.value;};
for (var i = galleryarray.length - 1; i > -1; --i)
if(galleryarray[i][0] >= v(f.by) + v(f.bm) + v(f.bd) + v(f.bh) && galleryarray[i][0] <= v(f.ey) + v(f.em) + v(f.ed) + v(f.eh))
 g.gal.push(galleryarray[i].join('.'));
g.rotateimages();
g.timer = setInterval(g.rotateimages, 2500)
};

galshow.rotateimages = function(g){
 g = galshow;
 document.getElementById("slideshow").src = 'http://www.wthrman.com/maps/surface/200001/' + g.gal[g.curimg];//Change the directory here too ie "..." + galleryarray[curimg]
 g.curimg = g.curimg < g.gal.length-1? g.curimg + 1 : 0;
};

galshow.r = new RegExp('(\\d{4})(\\d\\d)(\\d\\d)(\\d\\d)');

onload = function(){
 document.getElementById("slideshow").onload = function(){
  var g = galshow;
  if(g.timer)
   document.getElementById('num').firstChild.nodeValue = g.gal[g.curimg].split('.')[0].replace(g.r, 'Year: $1 Month: $2 Date: $3 Hour: $4');
 };
};

</script>
</head>
<body>
<div style="width: 680px;height: 500px;">
<span id="num">Year: 2000 Month: 01 Date: 01 Hour: 00</span><br>
<img id="slideshow" src="http://www.wthrman.com/maps/surface/200001/2000010100.png" alt="Weather Map" title=""><br>
</div>
<form action="#" onsubmit="galshow(this, galshow);return false;">
<div>
Begin Year: <select name="by">
<option value="2000">2000</option>
</select>
End Year: <select name="ey">
<option value="2000">2000</option>
</select>
Begin Month: <select name="bm">
<option value="01">January</option>
</select>
End Month: <select name="em">
<option value="01">January</option>
</select>
Begin Day: <select name="bd">
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
End Day: <select name="ed">
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
Begin Hour: <select name="bh">
<option value="00">0</option>
<option value="06">6</option>
<option value="12">12</option>
<option value="18">18</option>
</select>
End Hour: <select name="eh">
<option value="00">0</option>
<option value="06">6</option>
<option value="12">12</option>
<option value="18">18</option>
</select>

<input type="submit" value="Go!">
</div>
</form>
</body>
</html>

**jscheuer1** · 12-12-2008, 07:50 AM

I realized that there were a few minor improvements, most are just efficiencies, but some are required to make it so that it doesn't get out of sync with the image data shown at the top and the image shown:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script src="http://www.wthrman.com/maps/surface/200001/getimages.php" type="text/javascript">
//This is the directory where the images are eg www.wthrman.com/maps/surface/ etc..put the php in there
</script>

<script type="text/javascript">
(function(g){
 for (var i = g.length - 1; i > -1; --i)
  g[i] = g[i].split('.');
 g.sort(function(a, b){return b[0] - a[0];});
})(galleryarray);

var galshow = function(f, g){
 if(g.timer)
  clearInterval(g.timer);
 f = f.elements; g.curimg = 0; g.gal = []; var v = function(el){return el.value;};
 for (var i = galleryarray.length - 1; i > -1; --i)
  if(galleryarray[i][0] >= v(f.by) + v(f.bm) + v(f.bd) + v(f.bh) && galleryarray[i][0] <= v(f.ey) + v(f.em) + v(f.ed) + v(f.eh))
   g.gal.push(galleryarray[i].join('.'));
 g.rotateimages();
};

galshow.rotateimages = function(g){
 g = galshow;
 document.getElementById("slideshow").src = 'http://www.wthrman.com/maps/surface/200001/' + g.gal[g.curimg];//Change the directory here too ie "..." + galleryarray[curimg]
};

galshow.r = new RegExp('(\\d{4})(\\d{2})(\\d{2})(\\d{2})');

onload = function(){
 document.getElementById("slideshow").onload = function(){
  var g = galshow;
  if(!g.gal) return;
  document.getElementById('num').firstChild.nodeValue = g.gal[g.curimg++].split('.')[0].replace(g.r, 'Year: $1 Month: $2 Date: $3 Hour: $4');
  g.curimg = g.curimg < g.gal.length? g.curimg : 0;
  g.timer = setTimeout(g.rotateimages, 2500);
 };
};

</script>
</head>
<body>
<div style="width: 680px;height: 500px;">
<span id="num">Year: 2000 Month: 01 Date: 01 Hour: 00</span><br>
<img id="slideshow" src="http://www.wthrman.com/maps/surface/200001/2000010100.png" alt="Weather Map" title=""><br>
</div>
<form action="#" onsubmit="galshow(this, galshow);return false;">
<div>
Begin Year: <select name="by">
<option value="2000">2000</option>
</select>
End Year: <select name="ey">
<option value="2000">2000</option>
</select>
Begin Month: <select name="bm">
<option value="01">January</option>
</select>
End Month: <select name="em">
<option value="01">January</option>
</select>
Begin Day: <select name="bd">
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
End Day: <select name="ed">
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
Begin Hour: <select name="bh">
<option value="00">0</option>
<option value="06">6</option>
<option value="12">12</option>
<option value="18">18</option>
</select>
End Hour: <select name="eh">
<option value="00">0</option>
<option value="06">6</option>
<option value="12">12</option>
<option value="18">18</option>
</select>

<input type="submit" value="Go!">
</div>
</form>
</body>
</html>

**Keithb** · 12-12-2008, 07:54 AM

John, I can't thank you enough for the way in which over a few hours you've come up with a solution that I could never have dreamed of despite bashing my head in Javascript etc for several days! No wonder I was struggling!

I will add further years (I have maps going back to 1948) and see how that goes but it's working perfectly at present. I left out other years for the sake of (relative) brevity in the forum. Thanks also for the mention of the hours; I haven't finished tidying that up but the maps only run every 6 hours so I should have deleted the ones that weren't needed.

If I have further issues I hope you will be able to help me further but as it stands, I doubt I will have any further problems.

Thanks again.

**jscheuer1** · 12-12-2008, 08:26 AM

Once I start playing with something, sometimes I get a little carried away. I decided to add a pause onmouseover of the image, and a few more efficiencies:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script src="http://www.wthrman.com/maps/surface/200001/getimages.php" type="text/javascript">
//This is the directory where the images are eg www.wthrman.com/maps/surface/ etc..put the php in there
</script>

<script type="text/javascript">
(function(g){
 for (var i = g.length - 1; i > -1; --i)
  g[i] = g[i].split('.');
 g.sort(function(a, b){return b[0] - a[0];});
})(galleryarray);

var galshow = function(f, g){
 if(g.timer)
  clearInterval(g.timer);
 f = f.elements; g.curimg = 0; g.gal = [];
 var b = [g.v(f.by), g.v(f.bm), g.v(f.bd), g.v(f.bh)].join(''), e = [g.v(f.ey), g.v(f.em), g.v(f.ed), g.v(f.eh)].join('');
 for (var i = galleryarray.length - 1; i > -1; --i)
  if(galleryarray[i][0] >= b && galleryarray[i][0] <= e)
   g.gal.push(galleryarray[i].join('.'));
 g.rotateimages();
};

galshow.v = function(el){return el.value;};

galshow.pause = function(){
if(galshow.p){
galshow.timer = setTimeout(galshow.pause, 300);
return;
}
galshow.rotateimages();
};

galshow.rotateimages = function(g){
 g = galshow;
 document.getElementById("slideshow").src = 'http://www.wthrman.com/maps/surface/200001/' + g.gal[g.curimg];//Change the directory here too ie "..." + galleryarray[curimg]
};

galshow.r = new RegExp('(\\d{4})(\\d{2})(\\d{2})(\\d{2})');

onload = function(){
 var im = document.getElementById("slideshow");
 im.onload = function(){
  var g = galshow;
  if(!g.gal) return;
  document.getElementById('num').firstChild.nodeValue = g.gal[g.curimg++].split('.')[0].replace(g.r, 'Year: $1 Month: $2 Date: $3 Hour: $4');
  g.curimg = g.curimg < g.gal.length? g.curimg : 0;
  g.timer = setTimeout(g.pause, 2500);
 };
 im.onmouseover = function(){galshow.p = true;};
 im.onmouseout = function(){galshow.p = false;};
};

</script>
</head>
<body>
<div style="width: 680px;height: 500px;">
<span id="num">Year: 2000 Month: 01 Date: 01 Hour: 00</span><br>
<img id="slideshow" src="http://www.wthrman.com/maps/surface/200001/2000010100.png" alt="Weather Map" title="Paused"><br>
</div>
<form action="#" onsubmit="galshow(this, galshow);return false;">
<div>
Begin Year: <select name="by">
<option value="2000">2000</option>
</select>
End Year: <select name="ey">
<option value="2000">2000</option>
</select>
Begin Month: <select name="bm">
<option value="01">January</option>
</select>
End Month: <select name="em">
<option value="01">January</option>
</select>
Begin Day: <select name="bd">
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
End Day: <select name="ed">
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
Begin Hour: <select name="bh">
<option value="00">0</option>
<option value="06">6</option>
<option value="12">12</option>
<option value="18">18</option>
</select>
End Hour: <select name="eh">
<option value="00">0</option>
<option value="06">6</option>
<option value="12">12</option>
<option value="18">18</option>
</select>

<input type="submit" value="Go!">
<input type="button" value="Stop" onclick="clearTimeout(galshow.timer);">
</div>
</form>
</body>
</html>

**Keithb** · 12-12-2008, 08:39 AM

John that's fantastic! I was just about to ask about pausing and stopping the sequence. How would I add buttons for stopping, restarting or pausing?

**jscheuer1** · 12-12-2008, 09:52 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script src="http://www.wthrman.com/maps/surface/200001/getimages.php" type="text/javascript">
//This is the directory where the images are eg www.wthrman.com/maps/surface/ etc..put the php in there
</script>

<script type="text/javascript">
(function(g){
 for (var i = g.length - 1; i > -1; --i)
  g[i] = g[i].split('.');
 g.sort(function(a, b){return b[0] - a[0];});
})(galleryarray);

var galshow = function(f, g){
 g.im.title = 'Paused';
 if(g.timer)
  clearInterval(g.timer);
 f = f.elements; g.curimg = 0; g.gal = []; f.stop.disabled = false;
 var b = [g.v(f.by), g.v(f.bm), g.v(f.bd), g.v(f.bh)].join(''), e = [g.v(f.ey), g.v(f.em), g.v(f.ed), g.v(f.eh)].join('');
 for (var i = galleryarray.length - 1; i > -1; --i)
  if(galleryarray[i][0] >= b && galleryarray[i][0] <= e)
   g.gal.push(galleryarray[i].join('.'));
 g.rotateimages();
};

galshow.v = function(el){return el.value;};

galshow.pause = function(){
if(galshow.p){
galshow.timer = setTimeout(galshow.pause, 300);
return;
}
galshow.rotateimages();
};

galshow.rotateimages = function(g){
 g = galshow;
 g.im.src = 'http://www.wthrman.com/maps/surface/200001/' + g.gal[g.curimg];//Change the directory here too ie "..." + galleryarray[curimg]
};

galshow.r = new RegExp('(\\d{4})(\\d{2})(\\d{2})(\\d{2})');

onload = function(){
 var g = galshow; g.im = document.getElementById('slideshow');
 g.im.onload = function(){
  if(!g.gal) return;
  document.getElementById('num').firstChild.nodeValue = g.gal[g.curimg++].split('.')[0].replace(g.r, 'Year: $1 Month: $2 Date: $3 Hour: $4');
  g.curimg = g.curimg < g.gal.length? g.curimg : 0;
  g.timer = setTimeout(g.pause, 2500);
 };
 g.im.onmouseover = function(){g.p = true;};
 g.im.onmouseout = function(){g.p = false;};
};

</script>
</head>
<body>
<div style="width: 680px;height: 500px;">
<span id="num">Year: 2000 Month: 01 Date: 01 Hour: 00</span><br>
<img id="slideshow" src="http://www.wthrman.com/maps/surface/200001/2000010100.png" alt="Weather Map" title=""><br>
</div>
<form action="#" onsubmit="galshow(this, galshow);return false;">
<div>
Begin Year: <select name="by">
<option value="2000">2000</option>
</select>
End Year: <select name="ey">
<option value="2000">2000</option>
</select>
Begin Month: <select name="bm">
<option value="01">January</option>
</select>
End Month: <select name="em">
<option value="01">January</option>
</select>
Begin Day: <select name="bd">
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
End Day: <select name="ed">
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
Begin Hour: <select name="bh">
<option value="00">0</option>
<option value="06">6</option>
<option value="12">12</option>
<option value="18">18</option>
</select>
End Hour: <select name="eh">
<option value="00">0</option>
<option value="06">6</option>
<option value="12">12</option>
<option value="18">18</option>
</select>

<input type="submit" value="Go!">
<input type="button" name="stop" disabled value="Stop" onclick="clearTimeout(galshow.timer);galshow.im.title='Stopped';this.form.elements.resume.disabled=false;">
<input type="button" name="resume" disabled value="Resume" onclick="this.disabled=true;galshow.rotateimages();galshow.im.title='Paused';">
</div>
</form>
</body>
</html>

**Keithb** · 12-12-2008, 11:47 AM

Thanks again John.

As a bit of a refinement I tried to put in an option to change the speed:

Code:

<INPUT TYPE="radio" onclick="galshow.timer = setTimeout(galshow.pause, 1000);"checked>1 sec (default)

This appeared to make the sequence timing uneven. The reason I want to vary the speed is that I will later on use satellite animations at different speeds, with a button for each (I hadn't mentioned this before as I was so preoccupied in getting the basic operation right).

Can I push my luck here and ask where the above snippet is wrong?

Thanks

Thread: Javascript array with PHP

Thread Tools

Search Thread

Javascript array with PHP

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions