我正在做一个项目，似乎不知道处理这个问题的最佳方法。我正在使用jQuery Supersized和options框架来构建一个主题。除了图像之外，我已经为滑块选项做了所有的工作。这是我的脚本
<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'},
为什么它不从回声中加载图像，但它显示它在源中。
做这件事要非常非常小心。您直接输出到一个Javascript代码块中，这意味着ALL的输出必须创建语法有效的JS代码。一个错误放置的'可以杀死整个脚本块。
为了安全起见，您应该通过json_encode（）进行所有输出，这可以保证您不会引入语法错误。
例如
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.
我建议在清晰的php代码中创建json，然后将该json包含到javascript表达式中。
代码会更好。
你犯错误的机会更少（比如用引号）。
您需要确保在php大括号的两侧放置引号，否则javascript将不会将其作为字符串接收。例如
random : '<?php echo of_get_option('random', '0'); ?>'