У меня есть папка с 400 изображениями. Я бы хотел поместить их на страницу, чтобы по восемь штук за раз. Это означает, что у меня будут все изображения на одной странице, но я буду разрезать их на части по восемь изображений, заключенных в такую коробку:
<div class = "eightbox">
<img src = "image1">
<img src = "image2">
<img src = "image3">
<img src = "image4">
<img src = "image5">
<img src = "image6">
<img src = "image7">
<img src = "image8">
</div>
<div class = "eightbox">
<img src = "image9">
<img src = "image9">
<img src = "image10">
<img src = "image11">
<img src = "image12">
<img src = "image13">
<img src = "image14">
<img src = "image15">
</div>
Теперь мой код для этого пока делает вывод, но не закрывает «восьмерку», так что каждый новый div находится внутри другого.
Вот мой код:
<?php
$files = glob("images/*.*"); //loads all the images from my folder into an array
$y = ceil(count($files)/8); // The amount of images divided by eight and rounded up
$z = 1; //This counter makes the array continue outside the loop
for ($i=1; $i<$y; $i++)
{
echo '<div class=\'eightbox\'>';
for ($q=0; $q<8; $q++)
{
$num = $files[$z];
echo '<img src=\'' . $num . '\' >';
$z++;
}
echo '</div>';
}
?>
Я надеюсь, что это имеет для вас какой-то смысл, и заранее спасибо за помощь!
Обновлено: по многочисленным просьбам вот скриншот кода, который я получаю с помощью chrome: Скриншот моего кода
Можете ли вы опубликовать (неправильный) HTML-код, который вы получаете?
имхо это невозможно. ничего плохого в вашем коде. Возможно, вы не выводите данные напрямую в браузер, используете ли вы какой-либо фреймворк или систему шаблонов?
eightbox
…
@Alex, я использую Joomla, и код находится внутри модуля, который отображается внутри статьи ...
@misorude есть для меня, если вы посмотрите мой скриншот: ссылка
@ T.Roman, пожалуйста, держите вашу страницу общедоступной, чтобы мы могли видеть реальный результат вашего кода.
Это не то, что я вижу в исходном коде. Вы загружаете это динамически через AJAX? Тогда ошибка сценария, которую показывает консоль браузера, может быть причиной того, что я не вижу никаких изображений там.
предоставьте полный фрагмент - что делает этот модуль? на каком этапе он был выполнен, это очень похоже на эту проблему github.com/joomla/joomla-cms/issues/12784
@Alex Я использую плагин Sourcerer для использования php-кода внутри модуля
Я думаю, вам стоит хотя бы попробовать сменить свой '<div> </div>' на <p></p>
. Это связано с фильтрацией тела статьи Joomla, которая запускает фильтрацию закрывающего тега.
В описании плагина четко сказано: Единственное, что вам нужно сделать, это окружить код тегами Sourcerer. Я не вижу Sourcerer
в вашем коде.
@Alex, я поместил {source} и {/ source} в свой код .. иначе он бы вообще не работал
@Alex Использование тега p вместо div вообще не оборачивает изображения, а просто выводит все изображения ...
если делали {source}
- поделитесь полным фрагментом
Альтернатива, которая разбивает файлы на куски по 8 (используя array_chunk()
), а затем выводит каждый фрагмент за раз ...
$split = array_chunk($files, 8);
foreach ( $split as $div ) {
echo '<div class=\'eightbox\'>';
foreach ($div as $file ) {
echo '<img src=\'' . $file . '\' />';
}
echo '</div>';
}
Или с помощью implode()
для вывода данных ...
$split = array_chunk($files, 8);
foreach ( $split as $div ) {
echo '<div class=\'eightbox\'><img src=\''.
implode('\' /><img src=\'', $div).
'\' /></div>';
}
который ИМХО чуть менее читабелен, но более компактен.
Похоже, этот код намного чище, чем моя работа! Код дает мне ту же проблему, о которой говорилось в моем вопросе выше. Дивы завернуты друг в друга ...
Если вы просматриваете исходный код, будет ли этот блок вложенным или раздельным?
вложены как в "восьмерке" внутри "восьмерки"
Кажется, я не могу воспроизвести, что в моих тестах все они представляют собой фрагменты тегов img в теге div.
Не поймите меня неправильно ... изображения загружаются нормально, но теги div, в которых они находятся, не находятся рядом друг с другом ...
Может ли это означать, что проблема в макете (возможно, CSS), а не в тегах?
это довольно интересный подход, но стоит посмотреть. Мой CSS: .eightbox { width:100%; } .eightbox img { display: inline-block; width:20%; margin:2.5%; }
Используя Modulo, вы можете сделать это
<?php
$files = glob("images/*.*"); //loads all the images from my folder into an array
foreach ( $files as $idx=>$file) {
if ( $idx % 8 == 0 && $idx != 0){ // every 8 close a div and open a new one
echo '</div>';
echo '<div class = "eightbox">';
}
if ( $idx == 0 ){ // output first div
echo '<div class = "eightbox">';
}
echo "<img src='$file'>";
}
if ( $idx+1 % 8 != 0 ) { // close the last div
echo '</div>';
}
?>
Разве последний </div>
не должен всегда отображаться эхом?
Нет, если в последнем наборе было ровно 8 изображений. Я все равно внес незначительную поправку, пожалуйста, проверьте
echo '<div class = "eightbox">';