带有PHP和Javascript的幻灯片库

Question

Hi there I want to create Slideshow Gallery using PHP and Javascript. 嗨，我想用PHP和Javascript创建Slideshow Gallery。

I have a camera setup at my house that is sending picture in JPG format every time when motion is detected. 我家里有一个摄像头设置，每次检测到运动时都会以JPG格式发送图片。

I want to be able when I visit: 我希望能够在访问时：

camera.example.com/ camera.example.com/

Pictures from last 3 Days to start to appear in A slideshow fast. 最近3天开始的图片开始快速显示在幻灯片中。

The structure is like this: 结构是这样的：

camera.example.com
-snap (where the pictures from the camera are uploaded when motion is detected).

code of index.php: 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
?>

code of getimages.php: 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
?>

code of: slideshow.php 代码：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>

Please help me with this, it doesn't neccesery have to be even my code.. all I want is to work so if someone gives me a better alternative it's fine. 请帮我解决这个问题，它甚至不需要我的代码。我只想工作，所以如果有人给我一个更好的选择，那就好了。

I want to be able to view what happen on my Front yard during the past 3 days fast, without having to Open all pictures one by one. 我希望能够快速查看过去3天在前院发生的事情，而不必一次打开所有图片。

I want them SORTED from the Newest to the Oldest. 我希望它们从最新到最旧排序。

I used the following tutorial to do this: Slideshow Gallery loading all images in directory 我使用以下教程来做到这一点：幻灯片库将所有图像加载到目录中

Thank you! 谢谢！

Answer 1

If you can edit the way your images are saved to date _something.jpg then you can use the following. 如果可以编辑将图像保存到_something.jpg 日期的方式，则可以使用以下内容。 You will have to work out how to place this into your own source code, I wouldn't want to do all the work for you. 您将必须弄清楚如何将其放入自己的源代码中，我不想为您完成所有工作。

If it isn't possible for you to change the way image names are saved, please edit your question and display how your images are saved. 如果您无法更改图像名称的保存方式，请编辑问题并显示如何保存图像。

Date format: Year Month Day => 20150415 日期格式：年月日=> 20150415

The following is going by today's date: 15th April 2015. 以下是今天的日期： 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.' ';
}
//*********************************************************
?>

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

20150411_five.jpg & 20150410_six.jpg will not return because the dates are more than 3 days old. 20150411_five.jpg和20150410_six.jpg将不会返回，因为日期已超过3天。

As you can see I have added comments to explain every step, if you have any questions please leave a comment below and I will get back to you as soon as possible. 如您所见，我已经添加了注释以解释每个步骤，如果您有任何疑问，请在下面留下评论，我们会尽快与您联系。

I hope this helps. 我希望这有帮助。 Happy coding! 编码愉快！

带有PHP和Javascript的幻灯片库

问题描述

1 个解决方案

解决方案1
0 2015-04-15 22:10:53

带有PHP和Javascript的幻灯片库

问题描述

1 个解决方案

解决方案1 0 2015-04-15 22:10:53

解决方案1
0 2015-04-15 22:10:53