Intergrating agile carousel to wordpress: how to write the ajax_callback function

Question

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

<link rel="stylesheet" href="https://wordpress.stackexchange.com/questions/63304/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="https://wordpress.stackexchange.com/questions/63304/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 )

Related Posts: