将灵活的旋转木马整合到WordPress:如何编写ajax_allback函数

时间:2012-08-28 作者:elbee

json对我来说是全新的,如何为agile carousel 在wordpress工作?下面是我需要编写为php数组的jason数据格式,因为它可以由$解析。getJSON()函数。

 [{
      "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>"
}]
或者我甚至必须将数据转换为php数组?

1 个回复
SO网友:Tom J Nowell

因此,我看到您正在引用并尝试重新创建此示例:

<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>
正在使用JSON AJAX回调中的数据参数创建旋转木马。

然而carousel_data 需要一个数据对象,它不需要来自对的调用$.getJSON(). 相反,您可以在此处定义json对象,如:

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

}],
此外,您还可以在PHP中生成必要的数据,然后使用wp_localize_script, WordPress会将其包含在标题中:

<?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\\u localize\\u script()必须在附加到的脚本已排队后调用。它不会将本地化脚本放入队列中,以供以后排队的脚本使用。

您可以访问JavaScript中的变量,如下所示:

<script>
alert(object_name.some_string); // alerts \'Some string to translate\'
</script>
这应该绕过对AJAX和自定义请求的所有需求。

但是,如果您觉得必须这样做,请在此处查看WP AJAX API:

http://codex.wordpress.org/AJAX_in_Plugins

(它也适用于主题)

结束

相关推荐

including jquery

我知道wordpress附带jquery。我首先用html构建了我的网站,我在html版本中运行的每个脚本在运行版本1.4.2时都运行良好。我包含了相同的jquery脚本,但现在我的一个特性不起作用了。这就是我将jquery加载到我的站点头部的方式function register_savior_scripts(){ wp_deregister_script(\'jquery\'); wp_enqueue_script(\'prettyPhoto\', get_templa