0

私はプロジェクトに取り組んでいますが、これを処理する最善の方法がわかりません。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'},

エコーから画像をロードしないのはなぜですか？ソースにあることを示しています。

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 に答える