スライドショーのように写真を表示するシンプルなウェブサイトを構築しています。写真は予測不能なタイミングでサーバーに自動的にアップロードされます。現在、毎分cronジョブを実行して、写真のファイル名のリストを配列として含むjavascriptファイルを作成しています。Web ページでこのファイルを参照し、配列にリストされている写真を一度に 1 つずつ表示します。現在、この部分は正常に動作しています。
初期ロード時にファイルを取得してから、配列を定義する JavaScript ファイルに追加があったかどうかを Web ページで定期的に確認したいと思います。追加がある場合、Web ページはリストの最初からやり直し、最新の写真を表示する必要があります。
これを行う簡単な方法はありますか?
これはウェブページです:
<html><head>
<style type="text/css">
body {background: black;}
</style>
<script src="imageList.js"></script>
<script type="text/javascript">
function switchImage() {
document.getElementById("body").innerHTML='<img id="main" src="photos/' + imageList[i] + '"/>';
i++;
if (i>=imageList.length) { i=0; }
}
i=0;
setInterval(function(){switchImage()},45000);
</script>
<title>SlideShow</title></head>
<body id="body">
</body>
</html>
これは、imageList.js で JavaScript 配列として写真のリストを生成するために実行しているスクリプトです。
#! /usr/bin/bash
printf "var imageList = new Array();\n" > /var/www/htdocs/example.com/imageList.js
count=0
for file in `ls /var/www/htdocs/example.com/photos/`;
do
printf 'imageList[%s] = "%s";\n' $count $file >> /var/www/htdocs/example.com/imageList.js
count=$(($count+1))
done