Question

您好，我想使用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

谢谢！

Answer 1

如果您可以将图片保存方式编辑为日期 _something.jpg，则可以使用以下内容。你将不得不弄清楚如何将它放入你自己的源代码中，我不想为你做所有的工作。

如果您无法更改图片名称的保存方式，请修改您的问题并显示图片的保存方式。

日期格式：年月日=＆gt; 20150415

以下是今天的日期： 2015年4月15日。

<?php
// Temporary Array of image names (demo use).
$ImageNames=array("20150415_one.jpg","20150414_two.jpg","20150413_three.jpg","20150412_four.jpg","20150411_five.jpg","20150410_six.jpg");
// Empty Array - To hold image names within date range
$ReturnImages=array();
// For each value in $ImageNames array
foreach ($ImageNames as $Image) {
// Split the image name to get the date
    $Uploaded=explode("_",$Image);
/*
$Uploaded[0] => Date
$Uploaded[1] => one.jpg / two.jpg / three.jpg
*/   
// If image date is equal to or greater than. 
    if($Uploaded[0]>=date('Ymd', strtotime('-3 day'))){
        array_push($ReturnImages, $Image);
    }
}
/* $ReturnImages now holds all the images within the date range (Last 3 days) */

//*********************************************************
// This foreach isn't required, this is to show the results
foreach ($ReturnImages as $display) {
echo $display.' ';
}
//*********************************************************
?>

输出：20150415_one.jpg 20150414_two.jpg 20150413_three.jpg 20150412_four.jpg

20150411_five.jpg＆amp; 20150410_six.jpg将不会返回，因为日期超过3天。

如您所见，我已添加评论以解释每一步，如果您有任何疑问，请在下面发表评论，我会尽快回复您。

我希望这会有所帮助。快乐的编码！

幻灯片库与PHP和Javascript

1 个答案: