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' }但是滑块没有初始化......有什么帮助吗？

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

动态填充图像滑块

1 个答案: