動態填充圖像滑塊

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