[jQuery] Re: Dynamic loading of PHP array into jCarousel?

[Theodore Ni]

That example is dynamic in the sense that you can populate that Javascript
array in many different ways. For example, you could take in user input and
create an array, or you can let your PHP echo out a Javascript array.

For dynamic in the sense that we use AJAX to pull data and then create the
carousel, a simple example would be
http://sorgalla.com/projects/jcarousel/examples/dynamic_javascript.html

Notice in each of the examples you still need to write your own function to
parse whatever data/string you return from the server. The example in the
link I gave you used jQuery.get() to pull a simple page
http://sorgalla.com/projects/jcarousel/examples/dynamic_ajax.txt which just
has some image URLs separated by a | character. The functions in the page
then separate the individual URLs and add them into the carousel.

You only need something like this on your server side after you get your
item array $photos from the database (in fact, you could do this in your
while loop if you are using one to pull data):

$photo_src = array();
for ($i = 0, $l = count($photos); $i < $l; $i++) {
    $photo_src[] = $photos['photo_id'] . '.jpg';
}
$photo_string = implode('|', $photo_src);
echo $photo_string;

Then, just replace dynamic_ajax.txt in the sample code with
your_php_page.php

On 9/15/07, Steve Finkelstein <[EMAIL PROTECTED]> wrote:
>
>
> Hi all,
>
> I'm a bit confused trying to understand sources on dynamic loading of
> images into a jCarousel object.  The issue here is the JavaScript
> array is already populated by page load, and obviously I can't see how
> server-side data was used to populate it. I'm a bit novice when it
> comes to this, but could certainly use some help.  An example
> JavaScript array taken from the example sites include:
>
> var mycarousel_itemList = [
>     {url: "http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg";,
> title: "Flower1"},
>     {url: "http://static.flickr.com/75/199481072_b4a0d09597_s.jpg";,
> title: "Flower2"},
>     {url: "http://static.flickr.com/57/199481087_33ae73a8de_s.jpg";,
> title: "Flower3"},
>     {url: "http://static.flickr.com/77/199481108_4359e6b971_s.jpg";,
> title: "Flower4"},
>     {url: "http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg";,
> title: "Flower5"},
>     {url: "http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg";,
> title: "Flower6"},
>     {url: "http://static.flickr.com/58/199481218_264ce20da0_s.jpg";,
> title: "Flower7"},
>     {url: "http://static.flickr.com/69/199481255_fdfe885f87_s.jpg";,
> title: "Flower8"},
>     {url: "http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg";,
> title: "Flower9"},
>     {url: "http://static.flickr.com/70/229228324_08223b70fa_s.jpg";,
> title: "Flower10"}
> ];
>
> Maybe I'm confused with the sense of 'dynamic' here, but I need to
> load all images that I populate from a table in my database. A dump of
> this array might look like this:
>
>     [0] => Array
>         (
>             [photo_id] => 2
>             [vehicle_id] => 1
>             [caption] =>
>             [position] => 2
>             [cars_com] => 0
>             [autotrader_com] => 0
>         )
>
>     [1] => Array
>         (
>             [photo_id] => 4
>             [vehicle_id] => 1
>             [caption] =>
>             [position] => 4
>             [cars_com] => 0
>             [autotrader_com] => 0
>         )
>
> At which point 2.jpg and 4.jpg are the photos I need to load.
>
> Thank you for any insight into how I can solve this problem.
>
> - sf
>



-- 
Ted