Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

json is totally new to me how to write an ajax_callback function for agile carousel to work in wordpress? Below is the jason data format that I need to write as php arrays for it could be parsed by $.getJSON() function.

 [{
      "content": "<div class='slide_inner'><a class='photo_link' href='#'><img class='photo' src='slides/slide_3.png' alt='Bike'></a><a class='caption' href='#'></a></div>",
      "content_button": "<div class='thumb'><img src='slides/f2_thumb.jpg' alt='bike is nice'></div><p> Place Holder</p>"
}, {
      "content": "<div class='slide_inner'><a class='photo_link' href='#'><img class='photo' src='slides/slide_4.png' alt='Bike'></a><a class='caption' href='#'></a></div>",
      "content_button": "<div class='thumb'><img src='slides/f2_thumb.jpg' alt='bike is nice'></div><p> Place Holder</p>"
}]

Or do I even have to convert the data into php arrays?

share|improve this question
    
Could you link to the relevant documentation for agile carousel? It's not clear exactly what needs to be done –  Tom J Nowell Aug 28 '12 at 10:18
    
@TomJNowell:link that's the link to the carousel, it works by parsing json data format to the javascript i.e $.getJSON("url of carousel data"). I have created the carousel_data() function in wordpress, am just not sure how to pass on the jason data format to the function. Thanks in advance. –  elbee Aug 29 '12 at 6:48
add comment

1 Answer

So I see you're referring and attempting to recreate this example:

<link rel="stylesheet" href="agile_carousel.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.js"></script>
<script src="agile_carousel/agile_carousel.a1.1.js"></script>

<script>

    // Code used for "Flavor 2" example (above)

    $.getJSON("agile_carousel/agile_carousel_data.php", function(data) {
        $(document).ready(function(){
            $("#flavor_2").agile_carousel({

                // required settings

                carousel_data: data,
                carousel_outer_height: 330,
                carousel_height: 230,
                slide_height: 230,
                carousel_outer_width: 480,
                slide_width: 480,

                // end required settings

                transition_type: "fade",
                transition_time: 600,
                timer: 3000,
                continuous_scrolling: true,
                control_set_1: "numbered_buttons,previous_button,
                ... (continues on same line)... pause_button,next_button",
                control_set_2: "content_buttons",
                change_on_hover: "content_buttons"
            });
        });
    });
 </script>

The carousel is being created using the data parameter in the JSON AJAX callback.

However, carousel_data requires a data object, it doesn't require that it comes from a call to $.getJSON(). Instead you could define the json object there, like:

carousel_data: [{
"content": "<div class='slide_inner'><a class=' continues... ",
"content_button": "<div class='thumb'><img src=' coninues... "
}, {
... add more object members as needed

// See http://www.agilecarousel.com/agile_carousel/agile_carousel_data.php
// for complete data

}],

Even further, you can generate the necessary data in PHP, and then localise it using wp_localize_script, and WordPress will include it in the header:

<?php
wp_enqueue_script( 'some_handle' );
$translation_array = array(
'some_string' => __( 'Some string to translate' ), 'a_value' => '10'
);
wp_localize_script( 'some_handle', 'object_name', $translation_array ); ?> 

IMPORTANT!: wp_localize_script() MUST be called after the script it's being attached to has been enqueued. It doesn't put the localized script in a queue for later queued scripts.

You can access the variables in JavaScript as follows:

<script>
alert(object_name.some_string); // alerts 'Some string to translate'
</script>

This should bypass all need for AJAX and custom requests.

However if you feel you must, look at the WP AJAX API here:

http://codex.wordpress.org/AJAX_in_Plugins

( it applies to themes too )

share|improve this answer
    
I just defined the JASON data object in the javascript and worked like a charm. I but i need to do more with the data for the slides and will have to use the wp_localize_script to get it to work. Thanks a bunch, you are a life saver! –  elbee Aug 29 '12 at 12:31
    
If this answer works for you, could you mark it as the correct answer? –  Tom J Nowell Aug 29 '12 at 13:32
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.