У меня есть папка с изображениями от 10 до 200, веб-страница, jQuery fade и php-скрипт, которые читают папку, полную изображений
Есть ли способ заставить php-скрипт сканировать папку, получить список изображений (в массиве?) И передать его сценарию jquery? (Первый вопрос)
Теперь я могу сделать xml-файл из найденного списка файлов результатов php или сделать html <li> из списка в html. есть ли другой способ сделать это? (вопрос 2)
Чтобы продолжить с превосходного ответа nickf , это немного более устойчиво для изображений разных типов.
$imagesDir = 'path/to/your/images/'; $images = glob($imagesDir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE); echo json_encode($images);
Есть и другие способы сделать это, но это проще всего. Обратите внимание, что некоторые файловые системы чувствительны к регистру, поэтому убедитесь, что список расширений соответствует тому, что вам нужно.
функция glob сканирует папку и возвращает массив:
$jpgs = glob("*.jpg");
вы можете передать его обратно в jQuery с помощью JSON:
echo json_encode($jpgs);
это будет просто случай перебора результата, генерирующий необходимый HTML.
Чтобы создать элементы списка, вы можете использовать что-то вроде этого (предполагая, что изображения являются результатом 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>'); });.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>
Вы не можете просто передавать изображения как «данные» в JavaScript для отображения, по крайней мере, не в разумном порядке.
Я попробую здесь ответить от многих
Алекс и Ник:
<?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....
все это динамически до конца массива!