0

我正在做一个项目，我似乎无法找到处理这个问题的最佳方法。我正在使用 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'},

为什么它不会从回声中加载图像，但它表明它在源中。

4

3 回答 3

1

做这件事要非常非常非常小心。您直接输出到 Javascript 代码块，这意味着您的所有输出都必须创建语法上有效的 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.
于 2012-09-12T19:41:48.133 回答
1

我建议用清晰的 php 代码创建 json，然后将该 json 包含到 javascript 表达式中。

代码会更好。

你犯错的机会更少（例如用引号）。

于 2012-09-12T19:32:32.320 回答
0

您需要确保在 php 大括号的任一侧放置引号，否则 javascript 不会将其作为字符串接收。例如

random                  :   '<?php echo of_get_option('random', '0'); ?>'
于 2012-09-12T19:10:22.597 回答