title: Create an array for simpleGallery (jquery plugin)
body: <p>I am using the jquery plugin simplegallery (<a href="http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm" rel="nofollow noreferrer">http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm</a>). out of the box it works like their documentation says. However I want to use it in a way that gets a dynamic list of random images from the server via an ajax call so that the list is different each time the page is loaded. On the server I have a shell script that finds and moves only the images i need to the proper folder once a day. Then I use an ajax call to a php script that finds the current batch of images and randomly picks n # of images. The php script returns a string simulated below as "var ouput". Originally I tried to get the php script to hand back an array but was unable to do so; so I just built the string in the php script with two different delimiters and sent that back. Then on the client, with javascript, I split the string up and create the images array. However there seems to be a difference in an array created from the string and an array hard coded with values like in the simplgallery example. 
  My code is below: does anyone know what I am doing wrong?</p>
  
  <pre><code>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&lt;out_list.length-1; i++){
      var out_list_items = out_list[i].split(":");
      for(var p = 0; p&lt;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); -&gt; function Array() { [native code] }
  alert(images.constructor); - &gt; function Array() { [native code] }
  </code></pre>
  
  <p><strong>However the following works:</strong></p>
  
  <pre><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)
    }
  });
  </code></pre>
  
  <p><strong>While this does not</strong> (it throws a jquery error: Node cannot be inserted at the specified point in the hierarchy" code: "3 [Break on this error] return jQuery(context).find(selector);}e...y.clean([container.innerHTML])[0];}else)</p>
  
  <pre><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: 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)
    }
  });
  </code></pre>
  
  <p>Besides solving my problem (how to dynamically create an array that simple gallery will take) I am interested in understading what is different about the array I build by parsing the string vs. the hard coded array [ ["blah", "blah", "img1" "img1" ], ["blah2", "blah2", "img2" "img2" ] ].</p>
  
  <p>Any thoughts? suggestions for a better way to do this are also welcome .... Thanks</p>