Всем привет. я PHP новичок, поэтому сильно не ругайте, постараюсь грамотно описать свою проблему. Должна быть страничка на которую выгружаются фотки, которые находятся в папке. На страничке показывается одна фотка и с помощью css она плавно делает слайдшоу на следующие картинки. Что бы понять как все делается. Я сделал 3 сайта index1.html - тут у меня в коде три фотки которые делают слайд шоу( в коде указаны ссылки на картинки) index2.php - Здесь у меня выполнение php скрипта scandir сканирует папку на наличие фоток и выводит их через echo на страничку все разом. index3.php - здесь я попытался соединить это все в одном сайте и тут у меня возникли проблемы, как указать в html коде ссылку на php скрипт (скан папки фото), что бы к нему применялись css стили.. ниже код: index1.html вот пример как все получается. https://codepen.io/vladimir-ignatov/pen/NLjbdW HTML: <!DOCTYPE html> <html> <head> <title>Плавная смена изображений</title> <meta charset="windows-1251"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> @import url("styles.css"); </style> </head> <body> <div class="div-style"> <img src="/image-1.jpg" title="Image 1" class="img-style im-1"> <img src="/image-2.jpg" title="Image 2" class="img-style next im-2"> <img src="/image-3.jpg" title="Image 3" class="img-style next im-3"> <img src="/image-4.jpg" title="Image 4" class="img-style next im-4"> </div> </body> </html> Код (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; } Index2.php HTML: <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/script1.php';?> </div> </div> </div> </body> </html> 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] . '" />'; } } ?> index3.php HTML: <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>Сканирование папки с картинками с помощью PHP-функции scandir();</p> </div> <div id="main-container"> <div id="img"> <div class="img"> <div class="div-style"> <img src="<?php $files = require 'php/script1.php';?>" title="Image 1" class="img-style im-1"> </div> </div> </div> </div> </body> </html> вот так не работает.... получается то что на сркиншоте... подскажите что поправить нужно?
Отсканируйте, а потом в шаблоне выводите в цикле. В шаблонах лучше использовать альтернативный синтаксис. --- Добавлено --- PHP: <div id="img"> <div class="img"> <div class="div-style"> <?php foreach ($scandir as $i=>$name): ?> <img src="/images/<?= $name ?>" title="Image <?= $i ?>" class="img-style im-<?= $i ?>"> <?php endforeach; ?> </div> </div> </div>
а можно пояснить чучуть для чего переменная $i, вот в этой строчке? <img src="/images/<?=$name?>" title="Image <?=$i?>" class="img-style im-<?=$i?>"> я видимо туго соображаю и не понимаю зачем делать $scandiras$i=>$name ?
Нафиг вы в цикл втащили 4 повторения? Для чего нужен $i, сложнее не понять, чем понять. Но это был просто «побочный пример». Подгоняйте под свои нужды. Если картинки хранятся в корне, уберите префикс /images/ и впредь больше думайте головой, чем занимайтесь тупым копипастом. --- Добавлено --- Оставьте просто слэш.
прежде чем написать я попробовал разные варианты.. показал, тот который, последний был, что пробовал.. Картинки находятся в папке images. все равно не отображается не одной картинки..
Изучите результат (на скрине он не детализирован) и, если он в порядке, см., чего уже не хватает статику. Например, вы уверены, что корнем сайта является SiteT1, а не inetpub? --- Добавлено --- Это был только пример. Я сказал, что вам нужно сделать. Успехов.