动态填充图像滑块

Question

我正在使用 Vegas jQuery 插件来显示网站的幻灯片。它是这样工作的：

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

我开发了一个（非常简单的）php 后端来添加和删除pictures.But我不知道如何用幻灯片初始化来处理它。

我的第一个想法是写一个csv文件，包含用户添加或删除图片后的数量。然后，我可以用 javascript 读取这个文件来创建一个数组并在 slides.

中使用它

在我看来这不是一个好的解决方案，请问您有什么技术建议吗？谢谢。

编辑： 我终于决定在 $(document).ready 上调用 AJAX：

$.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' } 但滑块未初始化...有帮助吗？

Answer 1

我终于明白了。我试图传递一个字符串，但需要 key/value 对。正确的做法是：

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'
        });
    }
});

动态填充图像滑块

Dynamically populate image slider

javascript

php

jquery

slider