Как динамически загрузить все изображение из папки для слайд-шоу изображений - jquery

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

<div class="slider-wrapper theme-default">
        <div class="ribbon"></div>
        <div id="slider" class="nivoSlider">
            <img src="images/toystory.jpg" alt="" />
            <a href="http://dev7studios.com"><img src="images/up.jpg" alt="" title="This is an example of a caption" /></a>
            <img src="images/walle.jpg" alt="" data-transition="slideInLeft" />
            <img src="images/nemo.jpg" alt="" title="#htmlcaption" />
        </div>

(приведенный выше код был извлечен из файла HTML).

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

На данный момент я не против, загружаются ли все или некоторые фотографии при загрузке страницы.

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

Хотя, честно говоря, я немного новичок в jquery (и в программировании в целом) и борюсь с некоторыми основами. Поэтому при ответе на вопрос, пожалуйста, используйте манекен.

В настоящее время у меня есть папка с изображениями (хранит все изображения), файл jscript и файл css, которые хранятся на сервере. Затем я добавляю html к веб-части (так как sharepoint используется для мадимации веб-страницы), чтобы появился слайдер.

Может ли код быть выполнен полностью на стороне клиента или это нужно делать как на стороне сервера, так и на стороне клиента?

Источник

5 ответов

Это поместит имена изображений в массив Javascript:

$dir = 'images/c-data/' . $result; //set the working directory
$pics = scandir($dir);
unset($pics[0], $pics[1]); //first and second ellement are the "."".." , get rid of them
$string = '<script type ="text/javascript">var images_' . $result . ' =[ ';
foreach ($pics as $key => $item) {
    $string .= '"' . $item . '",';
}
echo substr($string, 0, -1) . "];</script>";

Это перекликается с ними, когда проходит через них:

$path = 'images/c-data/';
$results = scandir($path);
$dirArray = array();
unset($results[0], $results[1]); //first and second ellement are the "."".." , get rid of them
foreach ($results as $result) {
    echo 'Image' . $result . ', ';
}

В обоих случаях мы используем php scandir() который возвращает массив всех элементов в каталоге.

Источник

Я бы порекомендовал загрузить все пути к изображениям в массив javascript с помощью вызова ajax (который требует программирования на стороне сервера, а папка с изображениями должна находиться на сервере). Затем вы можете поискать любой плагин jquery для создания слайд-шоу и создать потрясающее слайд-шоу.

Источник

Возможно получить изображение с сервера каталогов с помощью php и dropzone.js

пожалуйста, проверьте эту ссылку с практическими рекомендациями http://www.startutorial.com/articles/view/dropzonejs-php-how-to-display-existing-files-on-server

Источник

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

  1. Проверьте здесь, как включить список каталогов для tomcat, например. Если вы включите это, нажмите путь к каталогу с помощью вызова ajax, найдите все гиперссылки в ответе, отфильтруйте те, которые имеют расширение jpg, и передайте ссылки плагину.

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

Источник

Я последовал за тем же и написал некоторые изменения в слайдере nivo, которые заставили его работать.

Вам нужно:

  • написать некоторый код на стороне сервера, чтобы получить все изображения из папки на сервере. Просто путь, чтобы вы могли добавить его к объекту изображения DOM

  • написать Javascript AJAX-код для вызова кода на стороне сервера, а затем проанализировать ответ и создать объекты изображения, чтобы затем добавить в DOM

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

  • обновите код nivo, чтобы добавить новые изображения
Источник
Другие вопросы по тегам