我原本以为这是WordPress的问题-但经过几个小时的尝试后意识到-这可能是一个更一般的JavaScript问题
我已经为此挣扎了几个小时,希望你能给我指出正确的方向。我一直在使用这个教程来帮助我理解wp_localize_script
是如何工作的(这是一个WordPress函数,允许你将PHP变量传递给JS文件)。首先,我像这样对脚本进行排队:
function of_load_scripts() {
if (!is_admin()) {
if(is_front_page()) {
global $post;
wp_register_script('supersized.shutter', get_template_directory_uri().'/js/mylibs/supersized.shutter.min.js', 'jquery');
wp_enqueue_script('supersized.shutter');
wp_register_script('shutter_home', get_template_directory_uri().'/js/shutter-home.js', 'jquery');
wp_enqueue_script('shutter_home');
}
$tester = get_field('text');
// Add some parameters for the JS.
wp_localize_script(
'shutter_home',
'shutter',
array(
'testerjs' => $tester
)
);
}
}
add_action('wp_print_scripts', 'of_load_scripts');
我已经验证了这是输出到页面的HTML源:
<script type='text/javascript'>
/* <![CDATA[ */
var shutter = {"testerjs":"This is a test value"};
/* ]]> */
</script>
然后,在我的shutter-home.js
文件中,我有以下内容:
jQuery(document).ready(function($) {
var testerjs = shutter.testerjs;
alert(testerjs);
$.supersized({
// Functionality
slideshow : 1, // Slideshow on/off
autoplay : 1, // Slideshow starts playing automatically
start_slide : 1, // Start slide (0 is random)
stop_loop : 0, // Pauses slideshow on last slide
random : 0, // Randomize slide order (Ignores start slide)
slide_interval : 3000, // Length between transitions
transition : 1, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 700, // Speed of transition
new_window : 1, // Image links open in new window/tab
pause_hover : 0, // Pause slideshow on hover
keyboard_nav : 1, // Keyboard navigation on/off
performance : 0, // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
image_protect : 0, // Disables image dragging and right click with Javascript
// Size & Position
min_width : 0, // Min width allowed (in pixels)
min_height : 0, // Min height allowed (in pixels)
vertical_center : 1, // Vertically center background
horizontal_center : 1, // Horizontally center background
fit_always : 0, // Image will never exceed browser width or height (Ignores min. dimensions)
fit_portrait : 1, // Portrait images will not exceed browser height
fit_landscape : 0, // Landscape images will not exceed browser width
// Components
slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
thumb_links : 1, // Individual thumb links for each slide
thumbnail_navigation : 0, // Thumbnail navigation
// Components
slides : [ // Slideshow Images
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-1.jpg', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-2.jpg'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-3.jpg'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-1.jpg', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-1.jpg'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-2.jpg', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-2.jpg'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-3.jpg', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-3.jpg'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-1.jpg', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-1.jpg'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-2.jpg'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-2.jpg'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-2.jpg'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-2.jpg'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-3.jpg', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-3.jpg'}
],
// Theme
progress_bar : 0 // Slide bar that shows duration until next transition
});
});
正确地输出This is a test value
(就像我快速输出alert()
一样)。我遇到的问题是在$.supersized
函数中传递此值(特别是在image
位置的slides
区域)。这可能是一个一般的JS问题-但我该如何去粘在testerjs
变量到该区域?我试过这样做:
{image : ''+ testerjs + '', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg'},
没有骰子。任何帮助将非常感激!
testerjs
只是一个示例变量-它通常会保存一个图像URL -因此仅用于示例目的
如果你不能通过wp_localize_script
函数传递一个对象数组作为JavaScript对象并将其作为slides参数传递你可以在php中构建url数组,例如
$slides = array(
array('image' => 'http://...', 'thumb' => 'http://...'),
array('image' => 'http://...', 'thumb' => 'http://...'),
array('image' => 'http://...', 'thumb' => 'http://...')
);
json_encode
这个数组,它将给你所需的数据结构在你的JavaScript幻灯片参数
wp_localize_script(
'shutter_home',
'shutter',
array( 'slides' => json_encode($slides) )
);
然后你就可以解析和使用它作为对象的幻灯片参数传递到美元。超大型的功能。
slides: $.parseJSON(shutter.slides.replace('"', '"')
最好的办法是在使用结果对象之前进行解析,这样您就可以捕获可能出现的错误JSON。
edit:更正了注释中提供的代码片段。
你是附加每个图像/拇指对象作为一个字符串,所以这些将是字符串仍然在js。此外,您在JavaScript中有几个语法错误的幻灯片参数(缺少括号和分号),我删除了不必要的字符串替换。
// php
$imageArray = array();
if(get_field('image_container')) {
while(the_repeater_field('image_container')) {
$imageSource = wp_get_attachment_image_src(get_sub_field('image'), 'full');
$thumbSource = wp_get_attachment_image_src(get_sub_field('image'), 'background_thumb');
array_push($imageArray, array('image'=> $imageSource[0], 'thumb' => $thumbSource[0]));
}
}
$imageOutput = json_encode($imageArray);
// Add some parameters for the JS.
wp_localize_script(
'shutter_home',
'shutter',
array(
'imageOutputjs' => $imageOutput
)
);
//js
slides : $.parseJSON(shutter.imageOutputjs)