simpleGallery（jquery plugin）の配列を作成

Question

jqueryプラグインsimplegallery（http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm）を使用しています。それはドキュメントのように動作します。しかし、私はAjax呼び出しを介してサーバーからランダムなイメージの動的なリストを取得して、ページがロードされるたびにリストが異なるようにしたいのです。サーバー上には、適切なフォルダに必要なイメージだけを見つけて1日に1回移動するシェルスクリプトがあります。次に、現在の画像バッチを見つけて、n個の画像をランダムに選ぶphpスクリプトにajax呼び出しを使用します。 phpスクリプトは、 "var ouput"として以下のようにシミュレートされた文字列を返します。もともと私は配列を手渡すPHPスクリプトを手に入れようとしましたが、そうすることはできませんでした。だから私はちょうど2つの異なるデリミタで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 [このエラーのブレーク] return jQuery（context）.find（セレクタ）;} e ... y.clean（[container.innerHTML]）[0];} else）

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デモで遊んでの10分ほど後に、私は石畳*この一緒に

<?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> 

---

私はそれが不当に威厳う「ハッキング」言いたい

私恐ろしい、ひどいatttempt。