Сканирование папки Scandir

maiker2k · 9 Окт 2018

День добрый.
У меня есть задача:
Пользователи кладут каждый час новые картинки в папку в пределах 10 шт.

Нужно картинки которые положили в папку вывести на большую плазму ТВ. Картинки должны меняться анимацией каждые 5 -10 мин.

Загрузили новые картинки в папку, старые удалили, Новые Картинки крутятся анимацией на ТВ.

Я разобрался отдельно как сделать: отдельно анимацию заданных картинкой делать где используется - html и css

разобрался как сделать сканирование папки где находятся фото( с помощью PHP) c выводом на html страничку.
index.php

<head>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="css/styles.css" media="all" />
<title> =) </title>
</head>
<body>
<div id="title">
<p>Сканирование папки с картинками с помощью PHP-функции scandir();</p>
</div>
<div id="main-container">
<div id="img">
<div class="img">
<?PHP $files = require 'php/scanfolder.php';?>
</div>
</div>
</div>
</body>
</html>

scanfolder.php

<?PHP $directory = 'images/';
$scandir = scandir($directory);
for ($i=0; $i<count($scandir); $i++)
{
if ($scandir[$i] != '.' && $scandir[$i] != '..')
{
echo '<img src="'. $directory . $scandir[$i] . '" alt="'. $scandir[$i] . '" />';
}
}
?>

а нужно показывать на HTML странице по одной картинке, плавно делая анимацию на следующую.

а т.к. анимацией делается с помощью @keyframes

что бы плавно сменялась анимация картинка на другую кратинку нужно каждой картинке дать класс

что то типа вот этого:

@keyframes div-style1
{
from { opacity: 1; }
16% { opacity: 1; }
25% { opacity: 0; }
91% { opacity: 0; }
to { opacity: 1; }
}

@keyframes div-style2
{
from { opacity: 0; }
16% { opacity: 0; }
25% { opacity: 1; }
41% { opacity: 1; }
50% { opacity: 0; }
to { opacity: 0; }

@keyframes div-style3
{
from { opacity: 0; }
16% { opacity: 0; }
25% { opacity: 1; }
41% { opacity: 1; }
50% { opacity: 0; }
to { opacity: 0; }

что поменял по итогу в scanfolder.php

<?PHP
$directory = 'images/';
$scandir = scandir($directory);
for ($i=0; $i<count($scandir); $i++) {
if ($scandir[$i] != '.' && $scandir[$i] != '..') {
echo '<img class="div-style'.$i+1.'" src="'. $directory .$scandir[$i] . '" alt="'. $scandir[$i] . '" />';
}
}
?>

index.php

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<title>Document</title>
</head>
<body>
<div class="main">
<div class="dashboard">
<div class="div-style1"><img src=<?PHP $files = require'php/scanfolder.php';?>>
</div>
<div class="div-style2"><img src=<?PHP $files = require'php/scanfolder.php';?>>
</div>
<div class="div-style3"><img src=<?PHP $files = require'php/scanfolder.php';?>>
</div>
</div>
</div>
</body>
</html>

Как я подозреваю скорее всего мой косяк в index.php
в строчке <div class="div-style2"><img src=<?PHP $files = require'php/scanfolder.php';?>>
не могу не как догнать как передать классы div-style1,div-style2,div-style3 которые создаются в scanfolder.php, как грамотно записать их в Index.php ???
Подскажите пожалуйста. примером кода, ну или ссылку киньте где описывается момент, как грамотно написать код с классами которые получились из scanfolder.php PHP, как записать их со стороны html?

Тугай · 9 Окт 2018

Реши свою задачку без php для двух статических картинок, пусть одна заменяет анимацией другую через какой-то интервал.
Дальше тебе нужно использовать ajax запрос, который вызовет скрипт на php, который вернет ссылку на картинку для замены одной из двух в анимации, меняй ту у которой opacity = 0.
Короче тебе надо изучить javascript еще

ajax запрос потом вызывается через заданный интервал, для этого в javascripte есть функция setInterval.

scanfolder.php - зная какие картинки сейчас показываются, может найти в каталоге следующую по дате создания файла например.

Сканирование папки Scandir

maiker2k

Новичок

Тугай

Новичок