為simpleGallery創建一個數組（jquery插件）

Question

我正在使用jquery插件simplegallery（ http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm ）。 開箱即用，就像他們的文檔說的那樣。 但是我想以一種方式通過ajax調用從服務器獲取隨機圖像的動態列表，以便每次加載頁面時列表都不同。 在服務器上，我有一個Shell腳本，該腳本每天僅查找一次需要的圖像並將其移動到適當的文件夾中。 然后，我使用ajax調用php腳本，該腳本查找當前批次的圖像並隨機選擇n＃個圖像。 php腳本返回以下模擬為“ var ouput”​​的字符串。 最初，我試圖獲取php腳本來交出數組，但無法這樣做； 所以我只是用兩個不同的分隔符在php腳本中構建了字符串，並將其發送回去。 然后在客戶端上，使用javascript，將字符串拆分並創建images數組。 但是，由字符串創建的數組和以符號示例形式的值進行硬編碼的數組似乎有所不同。 我的代碼如下：有人知道我在做什么錯嗎？

var rand_pix = [ ["../img/blog-pix/l-1600-1200-c80e69aa-bc3f-4264-823b-fcdf2614f87c-300x225.jpg ", "../img/blog-pix/l-1600-1200-c80e69aa-bc3f-4264-823b-fcdf2614f87c-300x225.jpg ", "", "" ],["../img/blog-pix/l-1600-1200-4bebed86-e7e7-4395-8f01-97ab7f57c3c5-300x225.jpg ", "../img/blog-pix/l-1600-1200-4bebed86-e7e7-4395-8f01-97ab7f57c3c5-300x225.jpg ", "", "" ],["../img/blog-pix/l-1600-1200-f4013041-1ec8-4a5d-b261-1bb9bb330a38-300x225.jpg ", "../img/blog-pix/l-1600-1200-f4013041-1ec8-4a5d-b261-1bb9bb330a38-300x225.jpg ", "", "" ] ];  // hard coded like simple gallery example
var output = "../img/blog-pix/l-1600-1200-a27e5201-e371-4a36-9eeb-68eb5f95efe2-300x225.jpg:../img/blog-pix/l-1600-1200-a27e5201-e371-4a36-9eeb-68eb5f95efe2-300x225.jpg:pix_text1:pix_text2|../img/blog-pix/l-1600-1200-0bc2fec3-5e17-4447-8cff-2f0649100d6f-300x225.jpg:../img/blog-pix/l-1600-1200-0bc2fec3-5e17-4447-8cff-2f0649100d6f-300x225.jpg:pix_text1:pix_text2|../img/blog-pix/l-1600-1200-5b7447cd-ea80-4b7e-9f9e-c0cfc52ef040-300x225.jpg:../img/blog-pix/l-1600-1200-5b7447cd-ea80-4b7e-9f9e-c0cfc52ef040-300x225.jpg:pix_text1:pix_text2|../img/blog-pix/l-1600-1200-83f3544b-235a-415f-b988-393e24f52d71-300x225.jpg:../img/blog-pix/l-1600-1200-83f3544b-235a-415f-b988-393e24f52d71-300x225.jpg:pix_text1:pix_text2|../img/blog-pix/l-640-480-5db9395b-0394-4c14-9092-8bb001f3912e-300x225.jpg:../img/blog-pix/l-640-480-5db9395b-0394-4c14-9092-8bb001f3912e-300x225.jpg:pix_text1:pix_text2|"; //simulate what is recieved back from the server
var out_list = output.split("|");
var images = []; // dynamic array of arrays that simplge gallry can use
var img_stuff = []; // temp array holder for the four things each image needs
//alert(out_list.length);
for (var i = 0; i<out_list.length-1; i++){
    var out_list_items = out_list[i].split(":");
    for(var p = 0; p<out_list_items.length; p++){
        var items = out_list_items[p].split(":"); // this array holds each sub array of items for an image that can then be added to list array ..
        img_stuff.push(items);
    }
    images.push(img_stuff);
    img_stuff = [];
}
alert(rand_pix.constructor); -> function Array() { [native code] }
alert(images.constructor); - > function Array() { [native code] }

但是，以下工作原理：

var mygallery=new simpleGallery({
  wrapperid: "simplegallery1", //ID of main gallery container,
  dimensions: [300, 225], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
  imagearray: rand_pix,
  autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
  persist: false, //remember last viewed slide and recall within same session?
  fadeduration: 4500, //transition duration (milliseconds)
  oninit:function(){ //event that fires when gallery has initialized/ ready to run
  //Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
  },
  onslide:function(curslide, i){ //event that fires after each slide is shown
  //Keyword "this": references current gallery instance
  //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
  //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
  }
});

盡管這樣做沒有 （它引發jquery錯誤：無法在層次結構中的指定點插入節點”代碼：“ 3 [此錯誤中斷]返回jQuery（context）.find（selector）;} e ... y .clean（[container.innerHTML]）[0];}其他

var mygallery=new simpleGallery({
  wrapperid: "simplegallery1", //ID of main gallery container,
  dimensions: [300, 225], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
  imagearray: images,
  autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
  persist: false, //remember last viewed slide and recall within same session?
  fadeduration: 4500, //transition duration (milliseconds)
  oninit:function(){ //event that fires when gallery has initialized/ ready to run
  //Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
  },
  onslide:function(curslide, i){ //event that fires after each slide is shown
  //Keyword "this": references current gallery instance
  //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
  //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
  }
});

除了解決我的問題（如何動態創建簡單畫廊將要使用的數組）之外，我還有興趣通過解析字符串與硬編碼數組[[“ blah”，“ blah”， “ img1”“ img1”]，[“ blah2”，“ blah2”，“ img2”“ img2”]]。

有什么想法嗎？ 也歡迎提供更好的方法建議....謝謝

Answer 1

好吧，我不確定這不是您要尋找的東西，而且肯定不是很漂亮。 但是經過十分鍾左右的（非常令人印象深刻的）simplegallery演示，我湊齊了*

<?php

// variables

$dir = "img"; // <- the directory in which your images are stored, I've omitted the closing '/' deliberately.

$images = scandir($dir); // <- builds an array of images from the folder, above.

// foreach, below, removes the "." and ".." relative paths
foreach($images as $key => $value) {

    if ($value == "." || $value == "..") {
        unset($images[$key]);
    }

}
// gets the imagesize for the last (entirely arbitrary) image in the $images variable.
$img_dimensions = getimagesize($dir ."/" . end($images));

        if ($images) {

            foreach($images as $k => $v) {
                if (end($images)) {
                $simplegallery_image_array .= "[\"$dir/$v\", \"\", \"\", \"\"],\n\t";
                }
            }

        }

$simplegallery_image_array = rtrim($simplegallery_image_array,","); // removes the last comma generated from the above foreach.

/*

I know that foreach loops are inefficient, but I couldn't think of an easier way. If there's an easier way, please, let me know =)

*/

echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>Stu's gallery</title>
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/simplegallery.js"></script>

<!-- Stuff for simplegallery, from: http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm on 27/08/09 -->

<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>

<style type="text/css">

/*Make sure your page contains a valid doctype at the top*/
#simplegallery1{ //CSS for Simple Gallery Example 1
position: relative; /*keep this intact*/
visibility: hidden; /*keep this intact*/
border: 10px solid darkred;
}

#simplegallery1 .gallerydesctext{ //CSS for description DIV of Example 1 (if defined)
text-align: left;
padding: 2px 5px;
}

</style>

<script type="text/javascript" src="simplegallery.js">

/***********************************************
* Simple Controls Gallery- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

var mygallery=new simpleGallery({
    wrapperid: "simplegallery1", //ID of main gallery container,
    dimensions: [<?php echo $img_dimensions[0] ;?>, <?php echo $img_dimensions[1] ;?>], /* inserts image dimensions width then height */
    imagearray: [
    <?php
        echo "$simplegallery_image_array";
    ?>
    ],
    autoplay: [true, 1500, 5], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
    persist: false, //remember last viewed slide and recall within same session?
    fadeduration: 500, //transition duration (milliseconds)
    oninit:function(){ //event that fires when gallery has initialized/ ready to run
        //Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
    },
    onslide:function(curslide, i){ //event that fires after each slide is shown
        //Keyword "this": references current gallery instance
        //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
        //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
    }
})

</script>
<!-- End of Simplegallery-->

</head>

<body>
<div class="gallery_demo_unstyled">
<?php
    if ($images) {
?>
    <div id="simplegallery1">
        <ul>
<?php
        foreach($images as $k => $v) {
            $i++;
            echo "\n\t\t<li><img src=\"thumbs/$images[$k]\" /><span class=\"imgNum\">$i</span></li>";
        }
?>


        </ul>
    </div>
<?php
    }

?>
</div>
</div>
</body>

</html>

---

• 我想說“被黑”，但這將不公正地使我的可怕，可怕的嘗試端庄。