i have a problem. I have an application which write a maximum of 1000 jpg files into a folder located in my web server. I have to create a player which will read in order these files. There are 4 buttom, the first is to skip to the last image, the second to the previous image, the third to skip to the next image and the fourth to the first image. The folder in which images are stored is always changing, oldest are deleted and replaced with new images which come every second.
The code that i posted works. The only problem is that images are not fresh. If new images come you cannot see them. I would like to know if i should use a system which reload every time images (i would do it using AJAX) or it is ok in the form that i made it.
sorry for my very bad english. Thank you.
<html>
<head>
<script language="Javascript">
var indice;
arr = new Array();
function setarray(set_arr)
{
arr = set_arr;
chiamata(0);
}
function chiamata(tipo)
{
var immagine = document.getElementById('snap');
if (tipo==0)
{
indice = arr.length-1;
}else if (tipo==1)
{
indice = indice-1;
}else if (tipo==2)
{
indice = indice+1;
}else if (tipo==3)
{
indice = 0;
}
if (indice==arr.length-1)
{
document.getElementById("next").disabled = true;
document.getElementById("before").disabled = false;
}else if (indice==0)
{
document.getElementById("before").disabled = true;
document.getElementById("next").disabled = false;
}else
{
document.getElementById("before").disabled = false;
document.getElementById("next").disabled = false;
}
immagine.src='/images/' + arr[window.indice] +'?rand=' + Math.random();
}
</script>
<?php
exec('ls /var/www/images/ -rt',$arr_images);
$js_array = json_encode($arr_images);
echo "</head>";
echo "<body onload='setarray($js_array);'>";
?>
<form>
<table border="1">
<tr>
<td colspan="4"><img id="snap" src="" width="450" height="360"></td>
</tr>
<tr>
<td><button type="button" onclick="chiamata(0)"> << </button></td>
<td><button type="button" id="before" onclick="chiamata(1)"> > </button></td>
<td><button type="button" id="next" onclick="chiamata(2)"> < </button></td>
<td><button type="button" onclick="chiamata(3)"> >> </button></td>
</tr>
</table>
</form>
<br>
</body>
</html>