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