Сканирование папки PHP анимация css

День добрый.
У меня есть задача:
Пользователи кладут каждый час новые картинки в папку в пределах 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?

php

css

3 ответов

У вас в коде проблемы судя по всему. Вы используете три раза require. Обычно require используется в начале файл. Судя по отрывку вашего кода:

<div class="div-style1"><img src=<?PHP $files = require'php/scanfolder.php';?>>

вы должны просто получить массив с путями картинок из сканируемой папки. Уберите все что связанно с scanfolder и напишите вручную массив с путями картинок, что-то типа:

$img_arr = ['/img/pic1.jpg', '/img/pic2.jpg', '/img/pic3.jpg'];

затем в цикле идите по этим картинкам и вешайте на них классы для анимации. Если не справитесь, кидайте весь код и подробное описание задачи, попробую помочь.

Расшарьте весь код с которым есть проблема через гугл драйв или дропбокс и краткое пояснение к нему, попробую помочь.

хмм

то, что вы описали не подходит. т.к. в папке где хранятся фотки, названия все время разные и ко-во их все время разное. поэтому и решил использовать функцию scandir PHP.

Ок.

Cейчас постараюсь по подробнее описать задачу.

Задачу нужно сделать с помощью HTML\PHP\CSS.

Есть сетевая папка на сервере, туда складывают фотки, макс 10 штук могут положить. Спустя час или два фотки удаляют в этой папке и кладут новые фотки, и так в течении рабочего дня. может быть раз 10. Соответственно имена фоток все время разные, и кол-во их все время разное.

Эти фотки отображаются на большом ТВ и листаются как карусель по кругу, по одной. Тоесть одна фотка на весь экран ТВ, проходит скажем 1 минута, анимацией переходит на следующую фотку, которая лежит в папке.

Тоесть по итогу сценарий должен быть примерно такой:

Пример:

в папку положили 6 фото, скрипт 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] . '" />';
		}
	}
?>

сканирует папку видит что там 6 фоток, каждой фотке присвавает класс.

далее в HTML прописаны код на этот PHP scanfolder.php

а уже в css файлике прописаны @keyframes div-style1, @keyframes div-style2, ... ... ... ... ... ... @keyframes div-style10.

которые делают анимацию.

С начало не понимал как сделать. мне посоветовали сделать все по отдельности.

я сделал отдельно анимацию, отдельно сканирование папки.

пока выходит не очень.

вот как примерно должно работать

https://codepen.io/vladimir-ignatov/pen/NLjbdW

только тут задействованы статичные картинки, и спользуется html и сcss.

Мне нужно сделать тоже самое, что бы делала, но только чтоб картинки брались из папки и имена и кол-во картинок рандомное всегда.