Создать массив для simpleGallery (плагин jquery)

Question

Я использую плагин jquery simplegallery (http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm). из коробки, он работает, как написано в их документации. Однако я хочу использовать его таким образом, чтобы получить динамический список случайных изображений с сервера через вызов ajax, так что список меняется каждый раз при загрузке страницы. На сервере у меня есть сценарий оболочки, который находит и перемещает только нужные мне изображения в нужную папку один раз в день. Затем я использую вызов ajax в сценарий php он находит текущий пакет изображений и случайным образом выбирает n # изображений. Скрипт php возвращает строку, смоделированную ниже как «var ouput». Первоначально я пытался заставить скрипт php вернуть массив, но не смог этого сделать, поэтому Я только что собрал строку в скрипте php с двумя разными разделителями и отправил ее обратно. Затем на клиенте с помощью javascript я разделил строку и создал массив images. Однако, похоже, есть разница в массиве, созданном из строка и массив жестко запрограммированы со значениями, как в примере Simpgallery. Мой код ниже: кто-нибудь знает, что я делаю неправильно?

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: узел не может быть вставлен в указанной точке иерархии "code:" 3 [Break on this error] возвращает jQuery (context) .find ( селектор);} е ... 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>

<ч />

• Я бы хотел сказать «взломанный», но это несправедливо удостоило бы мою ужасную, ужасную попытку.