Сканирование папки с картинками и вывод слайд шоу.
Всем Привет.
Хочу сделать, на сайте что бы было окошко, где ластились(анимацией) картинки из папки.
собственно отдельно PHP сканирование фото сделал.
сделал отдельно анимацию HTML, CSS.
В вот вместе соединить не как не выходит...
вот HTML и CSS слайдшоу\анимация
https://codepen.io/vladimir-ignatov/pen/NLjbdW
Вот PHP сканирование папки с картинками.
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>Сканирование папки с картинками;</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] . '" />';
}
}
?>
Вот что у меня выходит:
index.php
<?php require_once('./php/scanfolder.php'); ?>
<head>
<meta charset="utf-8" />
<link type="text/css"
rel="stylesheet"
href="./css/styles.css"
media="all" />
<title> =) </title>
</head>
<style>
@import url("./css/animation.css");
</style>
<body>
<div id="title">
<p>Сканирование папки с картинками</p>
</div>
<div id="main-container">
<div id="img">
<div class="img">
<div class="div-style">
<?php foreach ($files as $i => $file): ?>
<img src="<?= $file[ 'path' ] ?>"
title="Image <?= $file[ 'name' ]; ?>"
class="img-style im-<?= $i ?>">
<?php endforeach; ?>
</div>
</div>
</div>
</div>
</body>
</html>файл animation.css
@keyframes fadeIm-1
{
from { opacity: 1; }
16% { opacity: 1; }
25% { opacity: 0; }
91% { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeIm-2
{
from { opacity: 0; }
16% { opacity: 0; }
25% { opacity: 1; }
41% { opacity: 1; }
50% { opacity: 0; }
to { opacity: 0; }
}
@keyframes fadeIm-3
{
from { opacity: 0; }
41% { opacity: 0; }
50% { opacity: 1; }
66% { opacity: 1; }
75% { opacity: 0; }
to { opacity: 0; }
}
@keyframes fadeIm-4
{
from { opacity: 0; }
66% { opacity: 0; }
75% { opacity: 1; }
91% { opacity: 1; }
to { opacity: 0; }
}
.div-style
{
position: relative;
text-align: center;
width: 99%;
}
.img-style
{
width: 33.3%;
margin-top: 8px;
border: 1px solid #0000ff;
animation-duration: 24s;
animation-iteration-count: infinite;
}
.img-style.next
{
position: absolute;
left: 33.3%;
opacity: 0;
}
.img-style.im-1
{
animation-name: fadeIm-1;
}
.img-style.next.im-2
{
animation-name: fadeIm-2;
}
.img-style.next.im-3
{
animation-name: fadeIm-3;
}
.img-style.next.im-4
{
animation-name: fadeIm-4;
}
также файлик styles.css
@charset "utf-8";
/* CSS Document */
body {
background: #ffffff;
margin: 0px;
padding: 0px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size:15px;}
#main-container {
width: 960px;
height: auto;
display: table;
background: #dddddd;
margin: 30px auto 40px auto;
border: 1px solid #fff;
box-shadow: 0px 0px 3px #a5a5a5;
padding: 0px 0px 10px 0px;}
#header {
background: black;
box-shadow: 0px 0px 3px black;
width: 100%;
height: 30px;
margin: 0px;
padding: 10px 0px 0px 0px;}
#title {
font-family: "Times New Roman", Times, serif;
color: #000;
text-shadow: 1px 1px 1px #fff;
font-size: 26px;
font-weight: bold;
margin: 0px auto 0px auto;
width: 960px;}
#title p{
margin-bottom: 100px;}
.img img{
float: left;
margin: 20px 5px 10px 5px;
width: 296px;
height: auto;}
#img {
margin: 0px auto 0px auto;
display: table;
height: auto;
width: 920px;}по итогу выходит вот такая шляпа...
анимация происходит саму на себя, картинка которая выделан красным.
Подскажите плз, что не так делаю....
3 ответов
Я бы разбил эту задачу на несколько этапов:
1. Сделать просто картинки в верстке и чтобы все работало (как в codepen)
2. Закомментировать html-код с картинками и вывести все картинки в цикле (без css вообще) просто в верстку с помощью php
3. Если все картинки выводятся, тогда добавить к ним нужные классы для анимации
Если не работает, я бы посмотрел через ctr+u исходный код в браузере который сгенерировал php для картинок и исправил ошибку генерации кода
p.s.
scandir можно вообще не использовать, а хранить название картинок в базе данных и циклом бежать после запроса к базе. Потом написать функционал загрузки картинок, который будет записывать в базу картинку переименовывая ее и генерируя ей уникальное имя.
В файле scanfolder.php вы выводите через echo картинки и потом этот файл инклудите в другой php файл и там еще раз в цикле выводите - это тоже неверно, т.к. в codepen примере один раз выводятся картинки в верстке.
И еще:
@import url("./css/animation.css");лучше в head подключить через linkref, такой способ вроде оптимальнее, чем @import
1 и 2 пункт я делал.. делал отдельно html css верстку ссылку скидывал. все работает. делал отдельно PHP, а вот как вместе совместить каша все время получается...
попробую поработать с этим:
"
3. Если все картинки выводятся, тогда добавить к ним нужные классы для анимации
Если не работает, я бы посмотрел через ctr+u исходный код в браузере который сгенерировал php для картинок и исправил ошибку генерации кода
p.s.
scandir можно вообще не использовать, а хранить название картинок в базе данных и циклом бежать после запроса к базе. Потом написать функционал загрузки картинок, который будет записывать в базу картинку переименовывая ее и генерируя ей уникальное имя.
В файле scanfolder.php вы выводите через echo картинки и потом этот файл инклудите в другой php файл и там еще раз в цикле выводите - это тоже неверно, т.к. в codepen примере один раз выводятся картинки в верстке.
И еще:
@import url("./css/animation.css");
лучше в head подключить через linkref, такой способ вроде оптимальнее, чем @import "