【发布时间】:2015-06-21 22:28:15
【问题描述】:
您好,我想使用 PHP 和 Javascript 创建幻灯片库。
我家有一个摄像头设置,每次检测到运动时都会发送 JPG 格式的图片。
我希望在访问时能够:
camera.example.com/
最近 3 天的图片开始快速出现在幻灯片中。
结构是这样的:
camera.example.com
-snap (where the pictures from the camera are uploaded when motion is detected).
index.php 代码:
<?
//This function gets the file names of all images in the current directory
//and ouputs them as a JavaScript array
function returnimages($dirname="snap") {
$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 '<img src="snap/'.$file .'" /><br />';
$curimage++;
}
}
closedir($handle);
}
return($files);
}
echo '<a href=./slideshow.php>WHEN ALL OF THE PICTURES LOAD UP << CLICK ME >></a><br /><br /><br />';
returnimages() //Output the array elements containing the image file names
?>
getimages.php 代码:
<?
//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="snap") {
$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
?>
代码:slideshow.php
<html>
<head>
<title>Timelapse</title>
</head>
<body bgcolor="#000" align="center">
<script src="getimages.php"></script>
<script type="text/javascript">
var curimg=0
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "snap/"+galleryarray[curimg])
curimg=(curimg<galleryarray.length-1)? curimg+1 : 0
}
window.onload=function(){
setInterval("rotateimages()", 500)
}
</script>
<div>
<img id="slideshow" src="loader.gif" />
</div>
</body>
</html>
请帮我解决这个问题,它甚至不必是我的代码。我只想工作,所以如果有人给我一个更好的选择,那很好。
我希望能够快速查看过去 3 天在我的前院发生的事情,而不必一张一张打开所有照片。
我希望它们从最新到最旧排序。
我使用以下教程来做到这一点:Slideshow Gallery loading all images in directory
谢谢!
【问题讨论】:
-
你好马丁,我认为你的问题可能正在快速关闭......(抱歉)
-
为什么先生,我做错了什么?
-
您能否展示您的尝试并解释您在当前源代码中遇到的问题?还是要求有人为您完成工作?
-
StackOverflow 是针对代码问题的,您没有提供任何代码或尝试。
-
没有源代码 = 没有可调试的内容,并且不知道此设置会使问题过于宽泛。我可以想出多种方法来设置此设置,但如果没有这些信息,人们会猜测,我们不会来这里猜测。我们来这里调试/修复/解释。您能否使用相关源代码编辑您的问题并解释您遇到的问题。
标签: javascript php image gallery slideshow