Галерея слайд-шоу с PHP и Javascript
Привет, я хочу создать галерею слайд-шоу, используя 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 дня быстро, без необходимости открывать все снимки по одному.
Я хочу, чтобы они отсортированы от самых новых до самых старых.
Я использовал следующий учебник, чтобы сделать это: Галерея слайд-шоу загружает все изображения в каталог
Спасибо!
Решение
Если вы можете редактировать способ сохранения изображений в Дата_something.jpg, то вы можете использовать следующее. Вам нужно будет решить, как поместить это в ваш собственный исходный код, я бы не хотел делать всю работу за вас.
- Если вы не можете изменить способ сохранения имен изображений, отредактируйте вопрос и покажите, как сохраняются ваши изображения.
Формат даты: Год Месяц День => 20150415
Следующее происходит к сегодняшней дате: 15 апреля 2015 г.
<?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 дней.
Как вы видите, я добавил комментарии, чтобы объяснить каждый шаг, если у вас есть какие-либо вопросы, пожалуйста, оставьте комментарий ниже, и я свяжусь с вами как можно скорее.
Надеюсь, это поможет. Удачного кодирования!
Другие решения
Других решений пока нет …