Сканирование папки с картинками и вывод слайд шоу.
Владимир3 ответов
Всем Привет.
Хочу сделать, на сайте что бы было окошко, где ластились(анимацией) картинки из папки.
собственно отдельно 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;}по итогу выходит вот такая шляпа...
анимация происходит саму на себя, картинка которая выделан красным.
Подскажите плз, что не так делаю....