javascript - 动态填充图像 slider

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:

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

Answer 1

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

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