【问题标题】:Slideshow Gallery with PHP and Javascript带有 PHP 和 Javascript 的幻灯片库
【发布时间】: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


【解决方案1】:

如果您可以编辑图像保存到 date_something.jpg 的方式,那么您可以使用以下内容。您将必须弄清楚如何将其放入您自己的源代码中,我不想为您完成所有工作。

  • 如果您无法更改图像名称的保存方式,请编辑您的问题并显示图像的保存方式。

日期格式:年月日=>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 & 20150410_six.jpg 不会返回,因为日期超过 3 天。

如您所见,我已经添加了 cmets 来解释每个步骤,如果您有任何问题,请在下方留言,我会尽快回复您。

我希望这会有所帮助。编码愉快!

【讨论】:

    猜你喜欢
    • 2015-07-06
    • 2014-10-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-05-10
    • 2014-01-03
    • 1970-01-01
    相关资源
    最近更新 更多