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

Question

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

Я использую плагин Vegas jQuery для отображения слайд-шоу для веб-сайта. Это работает следующим образом:

$("#example").vegas({
    slides: [
        { src: "/img/slide1.jpg" },
        { src: "/img/slide2.jpg" },
        { src: "/img/slide3.jpg" },
        { src: "/img/slide4.jpg" }
    ]
});

Я разработал (действительно простой) серверную часть php для добавления и удаления изображений.Но я не знаю, как справиться с этим при инициализации слайд-шоу.

Моей первой идеей было написать csv-файл, содержащий количество картинок после того, как пользователь добавит или удалит одну. Затем я могу прочитать этот файл с помощью javascript, чтобы создать массив и использовать его в slides.

Как это мне не кажется хорошим решением, не могли бы вы дать здесь какой-нибудь технический совет? Спасибо.

РЕДАКТИРОВАТЬ: Я, наконец, решил позвонить АЯКСУ $(document).ready:

$.ajax({
    type: "GET",
    url: "../admin/get_files.php",
    cache: false,
    datatype: "JSON",
    success: function(result){
        data = $.parseJSON(result);
        alert(data);

        $('#slider').vegas({
            slides: data,
            preload: true,
            overlay: '../img/overlays/06.png',
            transition: 'fade'
        });
    }
});

В get_files.php функция:

$dir = '../img/slider/accueil/';
$a = scandir($dir);
$b = count($a);
$res = array();
for($x = 2; $x < $b; $x++) {
    array_push( $res, "{ src: '../img/slider/accueil/" . $a[$x] . "' }");
}

echo json_encode($res);

Предупреждение выдает этот массив: { src: '../img/slider/accueil/1.jpg' },{ src: '../img/slider/accueil/2.jpg' },{ src: '../img/slider/accueil/3.jpg' }, но ползунок не инициализируется... Есть какая-нибудь помощь?

2

php javascript jquery slider

Author: ahbon, 2016-03-08

Source

1 answers

score 0 · Accepted Answer

Я наконец-то понял это. Я пытался передать строку, но требовалась пара ключ/значение. Правильный способ сделать это:

Get_files.php функция:

$dir = '../img/slider/accueil/';
$a = scandir($dir);
$b = count($a);
$res = array();
for($x = 2; $x < $b; $x++) {
    array_push( $res, "../img/slider/accueil/" . $a[$x]);
}

echo json_encode($res);

И функция js:

$.ajax({
    type: "GET",
    url: "../admin/get_files.php",
    cache: false,
    datatype: "JSON",
    success: function(result){
        data = $.parseJSON(result);
        var dataSrc = [];
        for (var i = 0; i < data.length; i++) {
            dataSrc.push({'src': data[i]});
        }            

        $('#slider').vegas({
            slides: dataSrc,
            preload: true,
            overlay: '../img/overlays/06.png',
            transition: 'fade'
        });
    }
});