Hey folks. This may be outside the scope of what you’ve created, but I’m not familiar with the JSON format. I am not using RoR. I am just trying to create an AJAX carousel for dynamically loading additional images when users click on the navigation.

I see the Mock Ajax Response. I assume I remove that function from the example and insert the proper JSON formated content into ajax_carousel_content.html, I have not had luck getting that to work. I am using PHP to call the list of images.

I’ve spent the past several hours researching JSON and trying different things to get it to work. but with no luck. Any help with formating the JSON output would greatly be appreciated.

Fish
><>

Here’s a little more on what I tried to get this working. I deleted this mock ajax response

// Mock ajax response Ajax.Response.prototype._getHeaderJSON = function() { ... . ..

and then I changed the URL to a php page url: ”/carousel/test/fixtures/ajax_carousel_content.php”

I then used this to format the JSON response in ajax_carousel_content.php (note my server still has PHP 4 installed)

<?
require_once('/util/lib/JSON.php'); // downloaded from <a href="http://mike.teczno.com/json.html">http://mike.teczno.com/json.html</a>
$json = new Services_JSON();
$myMessages = array (
                 'html' => "<li><img alt='Window' src='/carousel/test/assets/images/window1.png' /></li><li><img alt='Window' src='/carousel/test/assets/images/window1.png' /></li>", 
                'from' => 0, 
                'to' => 1,
                'more' => true);
echo $json->encode($myMessages);

?>

And here is what that outputs:

{"html":"<li><img alt='Window' src='\/carousel\/test\/assets\/images\/window1.png' \/><\/li><li><img alt='Window' src='\/carousel\/test\/assets\/images\/window1.png' \/><\/li>","from":0,"to":1,"more":true}

Am I on the right track here? any info is greatly appreciated.

You should try putting

Haha…ok

 <pre></pre>

Oh, thats right. I fixed that in my post. Thx

Also I am trying the same thing without success.. No images in the carousel..

EDIT: I got it to work out.. I’ll post here my php later on..
EDIT2: Ooops – No I didn’t.. If I click “next” button, images duplicate.. something went wrong..
EDIT3: Fixed it. ‘more’ => false

Here’s an example..

<?php
global $_GET;

header('Content-Type: application/json; charset=utf-8');
header('Connection: keep-alive');
header('Keep-Alive: timeout=20');
header('Cache-Control: private, max-age=0, must-revalidate');

$samples = array();

for ($tmp=1;$tmp<=31;$tmp++) $samples[] = 'image' . $tmp . '.png';

$myMessages = array (
                'html' => "", 'from' => 0, 'to' => 1,'more' => false);

foreach ( $samples as $sample )
        $myMessages['html'] .= '<li onclick="Element.hide(\'galImage\');galLoadImage(\'assets/images/' . $sample . '\');new Effect.Appear(\'galImage\')"><img alt="' . $sample . '" src="assets/images/' . $sample . '" width="40" height="40" /></li>';

echo json_encode($myMessages);
?>

Hi Jake1981,

i found your post here on the forum and tried it because I have the same problem but your example does NOT work!
Do you have a working one?

Regards

anybody can help on this ?

Did anyone found out anything on this? Please do replay if you have fixed this.

What does the .php file output exactly?

Do we have to use the json_encode function?

EDIT: The above example work, I did something wrong.

I gave up and droped prototype for Jquery. It solved all my problems..

http://sorgalla.com/jcarousel/

here you can find the source and it was so easy to use. It loads images with ajax on fly.