Загрузить список изображений из папки

Question

У меня есть папка с изображениями от 10 до 200, веб-страница, jquery fade и скрипт php, который читает папку, полную изображений

Есть ли способ заставить скрипт php сканировать папку, получить список изображений (в массиве?) И передать его в скрипт jquery? (первый вопрос)

Теперь я могу создать xml-файл из списка найденных файлов php или создать html <li> из списка в html. Есть ли другой способ сделать это? (вопрос № 2)

Answer 1

Чтобы продолжить с отличный ответ Никфа , это немного более надежно для изображений разных типов.

$imagesDir = 'path/to/your/images/';
$images = glob($imagesDir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);

echo json_encode($images);

Есть другие способы сделать это, но это самый простой. Обратите внимание, что некоторые файловые системы чувствительны к регистру, поэтому убедитесь, что список расширений точно соответствует вашим запросам.

Answer 2

функция glob сканирует папку и возвращает массив:

$jpgs = glob("*.jpg");

затем вы можете передать его обратно в jQuery с помощью JSON:

echo json_encode($jpgs);

тогда это был бы случай с циклическим просмотром результата, генерирующий необходимый HTML.

Answer 3

Для генерации элементов списка вы можете использовать что-то вроде этого (если предположить, что изображения являются результатом json_encode ()):

var images = {'image1':'images/image1.jpg','image2':'images/image2.jpg'}

jQuery('#imagelist').empty();
jQuery.each(images, function() {
  jQuery('#imagelist').append('<li>'+this+'</li>');
});

И убедитесь, что у вас есть неупорядоченный / упорядоченный список в источнике HTML:

<ul id="imagelist">
  <li>No images found</li>
</ul>

Answer 4

Я попробую здесь с ответом от многих

Алекс и Ник:

<?php
  $imagesDir = 'path/to/your/images/';
  $images = glob($imagesDir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);
  echo json_encode($images);
?>

и от mattoc (изменить), чтобы привыкнуть к увеличенному

jQuery('#imagelist').empty();
jQuery.each(images, function() {
  jQuery('#imagelist').append('<img src="'+this+'"/>');
});

и надеюсь получить что-то подобное в конце!

<div id="supersize">
    <img  src="images/001.jpg"/>
    <img  src="images/002.jpg"/>
    <img  src="images/003.jpg"/>
</div>

для финальной части кода, мне нужно будет найти решение, чтобы отправить изображение в суперразмерный плагин "один за другим" с предварительной загрузкой без проблем со списком ошибок изображений

Пусть предположим, что я получу список из 150 изображений ... это будет проблемой, поэтому пусть плагин просто знает, что есть 2 изображения, предварительно загрузите следующее и "ajax" изменит следующее изображение

image001.jpg is display
... preload image002.jpg
display image002.jpg
... preload image003.jpg
on and on and on....

все это динамически до конца массива!

Answer 5

Вы не можете просто передавать изображения как «данные» в JavaScript для отображения, по крайней мере, разумным способом.