從文件夾中獲取圖像與jQuery的幻燈片

我的Jquery幻燈片腳本看起來像從文件夾中獲取圖像與jQuery的幻燈片

$(function() { 
    $('#bg').crossSlide({ 
     sleep: 3, 
     shuffle: true, 
     fade: 1 
    }, [ 
    { src: 'core/design/images/bgs/1.jpg'}, 
    { src: 'core/design/images/bgs/2.jpg'}, 
    { src: 'core/design/images/bgs/3.jpg'}, 
    { src: 'core/design/images/bgs/4.jpg'} 
    ]) 
    });

正如你看到的，我聲明瞭圖像路徑一個接一個。有沒有辦法掃描文件夾的圖像，並一次添加全部。也許，它可以用PHP完成？

來源

2011-11-07 Tural Ali

如果你認爲我的回答是正確的，你可以這樣標記它。 – Saeros

這是「一半」的答案。我仍然無法得到它的工作。 –

問題是什麼，現在，也許我能幫忙嗎？ – Saeros

它不能使用JavaScript來完成。但有了嵌入式服務器端代碼，它應該是可能的（如PHP）。這裏是一個例子在PHP中。

存在一個叫做glob功能，這可能是適合你的目的。這裏是一個如何使用它的例子。

$path = <absolute path for the folder where images are located> 
$images = glob($path.'/*.jpg') // this returns an array of file names only doesnt contain the path

現在你已經在PHP中的數組列表。您必須開始在javascript中使用此功能

$(function() { 
$('#bg').crossSlide({ 
    sleep: 3, 
    shuffle: true, 
    fade: 1 
}, [ 
<?php foreach($images as $filename){ ?> 
    { src: 'core/design/images/bgs/<?php echo $filename.jpg ?>'}, 
<? } ?> 

    ]) 
    });

來源

2011-11-07 02:05:30 Saeros

我的HTML標記和js文件是分開的。所以我不能將pho代碼放入js中。必須有另一個解決方案，它通過php的所有路徑通過ajax。用標記 –

搞砸邏輯不是好習慣你可以發送ajax請求來獲取imagePath的JSON。獲得JSON後，您可以評估並獲取實際的文件路徑，您可以將其插入到js中。 – Saeros

是的。它可以使用JS/jQuery的完成：

作品在本地，沒有問題，活的服務器上，並允許您允許文件擴展名的分隔列表擴展：在你的情況

var folder = "core/design/images/bgs/"; 

$.ajax({ 
    url : folder, 
    success: function (data) { 
     $(data).find("a").attr("href", function (i, val) { 
      if(val.match(/\.jpg|\.png|\.gif/)) { 
       $("body").append("<img src='"+ folder + val +"'>"); 
      } 
     }); 
    } 
});

你要構造對象{src:"path"}數組所以它可能看起來像：

var folder = "core/design/images/bgs/"; 

$.ajax({ 
    url : folder, 
    success: function (data) { 
     var srcArr = []; 
     $(data).find("a").attr("href", function (i, val) { 
      if(val.match(/\.jpg|\.png|\.gif/)) { 
       var ob = {src : folder+val}; 
       srcArr.push(ob); 
      } 
     }); 
     // Now that the Array is filled with Objects send to callback 
     readFolderCallback(srcArr); 
    } 
}); 


function readFolderCallback(srcArr) { 
    $('#bg').crossSlide({ 
     sleep: 3, 
     shuffle: true, 
     fade: 1 
    }, arrSrc); 
}

https://stackoverflow.com/a/32940532/383904

來源

2016-01-12 12:42:15

從文件夾中獲取圖像與jQuery的幻燈片

回答

相關問題