超大字幕无法与wordpress一起使用

Question

I am working with a multisite WP platform. 我正在使用多站点WP平台。

Supersized images are loading, but I am not getting the thumbnail tray, progress loading bar, captions, transitions or nav arrows. 正在加载超大图像，但我无法获得缩略图托盘，进度加载栏，标题，过渡或导航箭头。 It seems like jquery/jquery.supersized does not realize there are multiple images. 看来jquery / jquery.supersized并未意识到有多个图像。

I have tried to duplicate the script loading from the supersized site , but to no avail. 我试图复制从超大型站点加载的脚本，但无济于事。 In a sense, load exactly what the demo loads to try to bug out the issue. 从某种意义上说，完全加载演示加载的内容以尝试解决问题。

Here is what is in my header: 这是我的标题中的内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes() ?>>
<head profile="http://gmpg.org/xfn/11">
    <title><?php wp_title( '-', true, 'right' ); echo wp_specialchars( get_bloginfo('name'), 1 ) ?></title>
    <meta http-equiv="content-type" content="<?php bloginfo('html_type') ?>; charset=<?php bloginfo('charset') ?>" />
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url') ?>" />

    <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri() ?>/css/supersized.core.css" />
    <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri() ?>/css/supersized.shutter.css" />

    <link rel="pingback" href="<?php bloginfo('pingback_url') ?>" />
    <?php wp_head() // For plugins ?>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript" src="<?php echo get_template_directory_uri() ?>/js/jquery.easing.min.js"></script>
    <script type="text/javascript" src="<?php echo get_template_directory_uri() ?>/js/supersized.3.2.6.min.js"></script>
    <script type="text/javascript" src="<?php echo get_template_directory_uri() ?>/js/supersized.shutter.min.js"></script>

    <script type="text/javascript">

    jQuery(function($){

                $.supersized({

                    // Functionality
                    slideshow               :   1,          // Slideshow on/off
                    autoplay                :   1,          // Slideshow starts playing automatically
                    start_slide             :   1,          // Start slide (0 is random)
                    stop_loop               :   0,          // Pauses slideshow on last slide
                    random                  :   0,          // Randomize slide order (Ignores start slide)
                    slide_interval          :   3000,       // Length between transitions
                    transition              :   6,          // 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           :   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       :   1,          // Horizontally center background
                    fit_always              :   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, 'number', 'name', 'blank')
                    thumb_links             :   1,          // Individual thumb links for each slide
                    thumbnail_navigation    :   0,          // Thumbnail navigation
                    slides                  :   [           // Slideshow Images
                                                        {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-1.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
                                                        {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>
</head>

The images load and the slideshow works, but there are no nav arrows, thumbnail tray or the main thing that I want, captions. 图像加载并进行幻灯片播放，但是没有导航箭头，缩略图托盘或我想要的主要标题（字幕）。 I tried initially to enqueue the scripts from functions.php but that was not working so I was trying to pinpoint the issue. 最初，我尝试将脚本从functions.php入队，但是那没有用，所以我试图找出问题所在。 Another ball in the chain is, if I add the supersized plugin for WP, along with the NextGen gallery, it all works fine. 链中的另一个问题是，如果我为WP添加超大插件，以及NextGen画廊，则一切正常。 I get the tray, progress bar and captions. 我得到了任务栏，进度条和标题。 The reason I do not want to use the plugins is I want to control the captions in a more granular level by pulling the images and captions from a CPT. 我不想使用插件的原因是我想通过从CPT中提取图像和字幕来更精细地控制字幕。 That point is moot though if I cannot get captions from the basic implementation. 如果我不能从基本实现中获得字幕，那一点就没有意义了。 I am wondering if I am missing a load parameter or a load order. 我想知道我是否缺少加载参数或加载顺序。 All resources load successfully, so i dont know why it would not reciprocate from the demo site, unless there was some conflict. 所有资源均已成功加载，因此，除非有任何冲突，否则我不知道为什么它不会从演示站点中获得回报。

Answer 1

This was because of a stupid mistake on my part. 这是因为我犯了一个愚蠢的错误。

You have to include the Id hooks in the body to get the captions. 您必须在主体中包括Id挂钩才能获得标题。 I thought those were created through the js, but not true. 我以为这些是通过js创建的，但事实并非如此。 You have to provide the html framework for the captions, progress bar, etc to render properly. 您必须提供用于字幕，进度条等的html框架才能正确呈现。 So, in your <body> , add 因此，在您的<body> ，添加

<!--Thumbnail Navigation-->
    <div id="prevthumb"></div>
    <div id="nextthumb"></div>

    <!--Arrow Navigation-->
    <a id="prevslide" class="load-item"></a>
    <a id="nextslide" class="load-item"></a>

    <div id="thumb-tray" class="load-item">
        <div id="thumb-back"></div>
        <div id="thumb-forward"></div>
    </div>

    <!--Time Bar-->
    <div id="progress-back" class="load-item">
        <div id="progress-bar"></div>
    </div>

    <!--Control Bar-->
    <div id="controls-wrapper" class="load-item">
        <div id="controls">

            <a id="play-button"><img id="pauseplay" src="img/pause.png"/></a>

            <!--Slide counter-->
            <div id="slidecounter">
                <span class="slidenumber"></span> / <span class="totalslides"></span>
            </div>

            <!--Slide captions displayed here-->
            <div id="slidecaption"></div>

            <!--Thumb Tray button-->
            <a id="tray-button"><img id="tray-arrow" src="img/button-tray-up.png"/></a>

            <!--Navigation-->
            <ul id="slide-list"></ul>

        </div>
    </div>

This is not explicit on the supersized site, but if you pay attention (like I should have done) to the demo files provided, it explains all. 这在超大型站点上不是很明显，但是如果您注意（如我应该做的那样）所提供的演示文件，便可以全部解释。

超大字幕无法与wordpress一起使用

问题描述

1 个解决方案

解决方案1
0 已采纳 2013-07-18 14:17:31

超大字幕无法与wordpress一起使用

问题描述

1 个解决方案

解决方案1 0 已采纳 2013-07-18 14:17:31

解决方案1
0 已采纳 2013-07-18 14:17:31