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

1 Views

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?

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. 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 )