我正在研究一个项目，我似乎无法找到解决这个问题的最佳方法。我正在使用jQuery Supersized和选项框架来构建主题。我有一切工作的滑块选项除了图像。这是我的剧本
<script type="text/javascript">
jQuery(function ($) {
$.supersized({
// Functionality
slideshow: 1, // Slideshow on/off
autoplay: <? php echo of_get_option('autoplay', '1'); ?> , // Slideshow starts playing automatically
start_slide: 1, // Start slide (0 is random)
stop_loop: 0, // Pauses slideshow on last slide
random: <? php echo of_get_option('random', '0'); ?> , // Randomize slide order (Ignores start slide)
slide_interval: <? php echo of_get_option('slide_interval', '3000'); ?> , // Length between transitions
transition: <? php echo of_get_option('transitions', '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: 1000, // 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: 1, // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
image_protect: <? php echo of_get_option('protect_images', '1'); ?> , // 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: <? php echo of_get_option('horizontal_center', '1'); ?> , // Horizontally center background
fit_always: <? php echo of_get_option('always_fit', '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
slides: [ // Slideshow Images
{
image: '<?php echo of_get_option("image_1"); ?>'
}, {
image: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg',
title: 'Image Credit: Maria Kazvan',
thumb: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-2.jpg',
url: 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'
}, {
image: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg',
title: 'Image Credit: Maria Kazvan',
thumb: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-3.jpg',
url: 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'
}, {
image: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-1.jpg',
title: 'Image Credit: Colin Wojno',
thumb: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-1.jpg',
url: 'http://www.nonsensesociety.com/2011/03/colin/'
}, {
image: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-2.jpg',
title: 'Image Credit: Colin Wojno',
thumb: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-2.jpg',
url: 'http://www.nonsensesociety.com/2011/03/colin/'
}, {
image: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-3.jpg',
title: 'Image Credit: Colin Wojno',
thumb: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-3.jpg',
url: 'http://www.nonsensesociety.com/2011/03/colin/'
}, {
image: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-1.jpg',
title: 'Image Credit: Brooke Shaden',
thumb: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-1.jpg',
url: 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'
}, {
image: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg',
title: 'Image Credit: Brooke Shaden',
thumb: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-2.jpg',
url: 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'
}, {
image: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-3.jpg',
title: 'Image Credit: Brooke Shaden',
thumb: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-3.jpg',
url: 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'
}],
// Theme Options
progress_bar: 1, // Timer for each slide
mouse_scrub: 0
});
});
</script>
除了图像外，我的所有设置都有用。有趣的是，当我查看源时，它显示了图像的链接，就像手动输入的那样。
我试图将数据放在一个数组中，然后动态显示输出，但仍然没有。我在源代码中得到了相同的结果。 {image :'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg'},
为什么它不会从回声中加载图像，但它会显示它在源中。
答案 0 :(得分：1)
我建议在清晰的PHP代码中创建json，然后将json包含到javascript表达式中。
代码会更好。
你犯错的机会较少（例如引用）。
答案 1 :(得分：1)
非常非常小心这样做。您将直接输出到Javascript代码块，这意味着输出的 ALL 必须创建语法上有效的JS代码。单个错误放置的'可以杀死整个脚本块。
出于安全考虑，您应该通过json _encode（）进行所有输出，以确保您不会引入语法错误。
e.g。
random: <?php echo json_encode(of_get_option('random', '0')); ?> , // Randomize slide order (Ignores start slide)
考虑如下案例：
<?php
$name = "Miles O'Brien";
?>
<script type="text/javascript">
var name = '<?php echo $name; ';
</script>
你最终会产生：
var name = 'Miles O'Brien';
^--- syntax error, terminating the string early.
答案 2 :(得分：0)
你需要确保在php括号的任一侧放置引号，否则javascript将不会以字符串形式接收它。 e.g。
random : '<?php echo of_get_option('random', '0'); ?>'