Добавление изображений из папки на сайт динамически

У меня есть сайт, на котором будет галерея с 3 разделами. Каждый раздел имеет до 30 изображений. Я буду хранить изображения в папках, относящихся к соответствующим разделам (например, "img/gallery/category1", "img/gallery/category2" и "img/gallery/category3")

По сути, вместо того, чтобы писать HTML для отображения каждого отдельного изображения, я хотел бы иметь цикл javascript, который будет смотреть в папку и отображать каждое изображение, и помещать URL-адрес в предопределенный фрагмент кода, то есть:

<div class="span4">
  <img src="img/gallery/category1/IMAGE-FILENAME1">
</div>

<div class="span4">
  <img src="img/gallery/category1/IMAGE-FILENAME2">
</div>

... и т. д., пока все изображения из папки не будут обработаны... (также я знаю, что могу быть немного умнее с HTML выше, но я хочу сообщить, что я хочу, чтобы каждый найденный URL изображения находился среди повторяющихся фрагмент кода).

Я все еще тренируюсь в javascript, поэтому мне было интересно, есть ли способ сделать это?

Спасибо

Источник

3 ответа

Решение

Я нашел альтернативное решение.

Я еще не был готов взяться за AJAX, JSON или что-либо из перечисленного ниже. Поэтому я решил изучить использование PHP. Решение как следующие:

Я первым делом использовал следующее, чтобы перейти и прочитать содержимое папки в массив:

$directory = "DIRECTORY"

$dirhandler = opendir($directory);

$nofiles=0;
while ($file = readdir($dirhandler)) {

if ($file != '.' && $file != '..')
{
  $nofiles++;
  $files[$nofiles]=$file;                
}}

И затем, используя цикл foreach, я перебирал массив, каждый раз повторяя вывод html, который ссылался на найденное имя файла.

Работает отлично.

Источник

Javascript не может сделать это сам по себе... однако, если у вас был список изображений в формате XML или JSON и их соответствующие местоположения, вы могли бы использовать ajax, чтобы получить этот файл, проанализировать его содержимое и создать свою разметку.

Источник

Вы не можете смотреть прямо на каталог на сервере из Javascript. Вы можете сделать AJAX-запрос к серверу, чтобы получить список (в формате XML или JSON), а затем создать и добавить новый div для каждого файла, пока вы просматриваете ответ.

Источник
Другие вопросы по тегам