I am working on a project and I can't seem to figure the best way to handle this. I am using jQuery Supersized and options framework to build a theme. I have everything working for the slider options except for the images. Here is my script
我正在研究一个项目,我似乎无法找到解决这个问题的最佳方法。我正在使用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: *e Shaden',
thumb: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-1.jpg',
url: 'http://www.nonsensesociety.com/2011/06/*e-shaden/'
}, {
image: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg',
title: 'Image Credit: *e Shaden',
thumb: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-2.jpg',
url: 'http://www.nonsensesociety.com/2011/06/*e-shaden/'
}, {
image: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-3.jpg',
title: 'Image Credit: *e Shaden',
thumb: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-3.jpg',
url: 'http://www.nonsensesociety.com/2011/06/*e-shaden/'
}],
// Theme Options
progress_bar: 1, // Timer for each slide
mouse_scrub: 0
});
});
</script>
All my settings work s intended except images. The funny thing is that when I view the source the it shows the link to the image just like the ones that are manually put in. I have tried to put the data in an array and then display the output dynamically and still no go. I get the same result in the source. {image :'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg'},
除图像外,我的所有设置都有用。有趣的是,当我查看源时,它显示了图像的链接,就像手动输入的那样。我试图将数据放入一个数组,然后动态显示输出,但仍然没有。我在源代码中得到了相同的结果。 {image:'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg'},
Why won't it load the image from an echo but it shows that it's there in the source.
为什么它不会从回声加载图像,但它表明它在源中存在。
3 个解决方案
#1
1
Be VERY VERY VERY careful doing this. You're directly outputting into a Javascript code block, which means that ALL of your output has to create syntactically valid JS code. A single mis-placed ' can kill the entire script block.
非常非常小心这样做。您将直接输出到Javascript代码块,这意味着您的所有输出都必须创建语法上有效的JS代码。单个错位'可以杀死整个脚本块。
For security's sake, you should be doing all your output via json _encode() which guarantees that you won't introduce syntax errors.
为安全起见,您应该通过json _encode()进行所有输出,这样可以保证您不会引入语法错误。
e.g.
random: <?php echo json_encode(of_get_option('random', '0')); ?> , // Randomize slide order (Ignores start slide)
Consider a case like:
考虑一个例如:
<?php
$name = "Miles O'Brien";
?>
<script type="text/javascript">
var name = '<?php echo $name; ';
</script>
You'd end up producing:
你最终会产生:
var name = 'Miles O'Brien';
^--- syntax error, terminating the string early.
#2
1
I suggest to create json in clear php code, and then include that json into javascript expression.
我建议在清晰的PHP代码中创建json,然后将json包含到javascript表达式中。
Code will be better.
代码会更好。
You have less chances to do mistakes (with quotes for example).
你犯错误的机会较少(例如引用)。
#3
0
You need to ensure that you place quotes either side of the php braces, or else javascript won't receive it as a string. e.g.
您需要确保在php括号的任一侧放置引号,否则javascript将不会将其作为字符串接收。例如
random : '<?php echo of_get_option('random', '0'); ?>'
#1
1
Be VERY VERY VERY careful doing this. You're directly outputting into a Javascript code block, which means that ALL of your output has to create syntactically valid JS code. A single mis-placed ' can kill the entire script block.
非常非常小心这样做。您将直接输出到Javascript代码块,这意味着您的所有输出都必须创建语法上有效的JS代码。单个错位'可以杀死整个脚本块。
For security's sake, you should be doing all your output via json _encode() which guarantees that you won't introduce syntax errors.
为安全起见,您应该通过json _encode()进行所有输出,这样可以保证您不会引入语法错误。
e.g.
random: <?php echo json_encode(of_get_option('random', '0')); ?> , // Randomize slide order (Ignores start slide)
Consider a case like:
考虑一个例如:
<?php
$name = "Miles O'Brien";
?>
<script type="text/javascript">
var name = '<?php echo $name; ';
</script>
You'd end up producing:
你最终会产生:
var name = 'Miles O'Brien';
^--- syntax error, terminating the string early.
#2
1
I suggest to create json in clear php code, and then include that json into javascript expression.
我建议在清晰的PHP代码中创建json,然后将json包含到javascript表达式中。
Code will be better.
代码会更好。
You have less chances to do mistakes (with quotes for example).
你犯错误的机会较少(例如引用)。
#3
0
You need to ensure that you place quotes either side of the php braces, or else javascript won't receive it as a string. e.g.
您需要确保在php括号的任一侧放置引号,否则javascript将不会将其作为字符串接收。例如
random : '<?php echo of_get_option('random', '0'); ?>'