Ответов: 7 Просмотров: 315
|
День добрый.
У меня есть задача:
Пользователи кладут каждый час новые картинки в папку в пределах 10 шт.
Нужно картинки которые положили в папку вывести на большую плазму ТВ. Картинки должны меняться анимацией каждые 5 -10 мин.
Загрузили новые картинки в папку, старые удалили, Новые Картинки крутятся анимацией на ТВ.
Я разобрался отдельно как сделать: отдельно анимацию заданных картинкой делать где используется - html и css
разобрался как сделать сканирование папки где находятся фото( с помощью PHP) c выводом на html страничку.
index.php
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:
скопировать код в буфер обмена
<?PHP $directory = 'images/'; 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:
скопировать код в буфер обмена
<?PHP $directory = 'images/'; 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
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-style1,div-style2,div-style3 которые создаются в scanfolder.php, как грамотно записать их в Index.php ???
Подскажите пожалуйста. примером кода, ну или ссылку киньте где описывается момент, как грамотно написать с классами которыми ты работал в PHP как записать их со стороны html? |