Получение изображений из папки для слайдшоу jQuery - PullRequest
Новая
       40

Получение изображений из папки для слайдшоу jQuery

1 голос
/ 07 ноября 2011

Мой скрипт слайд-шоу Jquery выглядит так 

  $(function() {
    $('#bg').crossSlide({
      sleep: 3,
      shuffle: true,
      fade: 1
    }, [
  { src: 'core/design/images/bgs/1.jpg'},
  { src: 'core/design/images/bgs/2.jpg'},
  { src: 'core/design/images/bgs/3.jpg'},
  { src: 'core/design/images/bgs/4.jpg'}
    ])
  });

Как видите, я объявил пути к изображениям один за другим. Есть ли способ отсканировать папку на наличие изображений и добавить все сразу. Может быть, это можно сделать с помощью PHP?

Ответы [ 2 ]

4 голосов
/ 07 ноября 2011

Это невозможно сделать с помощью Javascript. Но со встроенным кодом на стороне сервера это должно быть возможно (как PHP). Вот пример в php.

Существует функция с именем glob , которая может подойти для вашей цели. Вот пример того, как его использовать. 

$path = <absolute path for the folder where images are located>
$images = glob($path.'/*.jpg') // this returns an array of file names only doesnt contain the path

Теперь у вас есть список массивов в php. Вы должны начать использовать это в JavaScript 

$(function() {
$('#bg').crossSlide({
  sleep: 3,
  shuffle: true,
  fade: 1
}, [
<?php foreach($images as $filename){ ?>
    { src: 'core/design/images/bgs/<?php echo $filename.jpg ?>'},
<? } ?>

    ])
  });
0 голосов
/ 12 января 2016

Да. Это можно сделать с помощью JS / jQuery:

Работает как локально, так и на работающем сервере без проблем и позволяет расширять список разрешенных расширений файлов с разделителями: 

var folder = "core/design/images/bgs/";

$.ajax({
    url : folder,
    success: function (data) {
        $(data).find("a").attr("href", function (i, val) {
            if( val.match(/\.jpg|\.png|\.gif/) ) { 
                $("body").append( "<img src='"+ folder + val +"'>" );
            } 
        });
    }
});

в вашем случае вы хотите построить массив объектов {src:"path"}, чтобы он мог выглядеть так: 

var folder = "core/design/images/bgs/";

$.ajax({
    url : folder,
    success: function (data) {
        var srcArr = [];
        $(data).find("a").attr("href", function (i, val) {
            if( val.match(/\.jpg|\.png|\.gif/) ) { 
                var ob = {src : folder+val};
                srcArr.push( ob );
            } 
        });
        // Now that the Array is filled with Objects send to callback
        readFolderCallback( srcArr );
    }
});


function readFolderCallback( srcArr ) {
    $('#bg').crossSlide({
      sleep: 3,
      shuffle: true,
      fade: 1
    }, arrSrc);
}

https://stackoverflow.com/a/32940532/383904

...