灯箱没有正确显示内容 Wordpress

Question

我正在构建一个带有自定义帖子类型的 wordpress 作品集。该页面显示图像的缩略图，当您滚动它们时，您会看到标题、摘录和一个链接，以便在灯箱中查看帖子的内容。为了获得灯箱，我使用了一个名为 Lightbox Plus ColorBox 的插件。出于某种原因，只有一些图像可以在灯箱中正常工作，而在其他图像上它什么也不显示，您无法关闭它。我认为它以某种方式陷入了循环，但我真的不确定如何解决它。

网站网址是http://www.ginahughes.co.uk/commercial-photography/

这是我的页面代码：

<?php get_header(); ?>
<?php
  //list terms in a given taxonomy (useful as a widget for twentyten)
    $taxonomy = 'commercial-project-name';
    $tax_terms = get_terms($taxonomy);
?>
<div class="project-titles wrap">
    <ul>
        <?php
        foreach ($tax_terms as $tax_term) {
        echo '<li>' . '<a href="' . esc_attr(get_term_link($tax_term, $taxonomy)) . '" title="' . sprintf( __( "View all posts in %s" ), $tax_term->name ) . '" ' . '>' . $tax_term->name.'</a></li>';
        }
        ?>
    </ul>
</div>
        <div id="content">
            <div id="inner-content" class="wrap clearfix">
                    <div id="main" class="clearfix" role="main">
                        <div id="portfolio">   

                            <div class="group"> 
                                  <?php wp_reset_query(); ?> 
                                      <?php 
                                  query_posts('post_type=commercial-photo&posts_per_page=100');
                                  $i=1;
                                  if (have_posts()) : while (have_posts()) : the_post(); ?>  

                                  <?php  
                                      $title= str_ireplace('"', '', trim(get_the_title()));  
                                      $desc= str_ireplace('"', '', trim(get_the_content())); 
                               ?>     


                                        <div class="bp-wrapper">  
                                        <a title="<?=$title?>: <?=$desc?>" href="<?php the_permalink() ?>"><?php the_post_thumbnail('portfolio-thumb'); ?></a>

                                        <div class="bp-post-details">
                                            <a title="<?=$title?>: <?=$desc?>" rel="lightbox" href="<?php the_permalink() ?>">
                                            <h4><a class="lbp-inline-link-<?=$i?> cboxElement" href="#">
                                                 <?=$title?></a></strong></h4>
                                            <p><?php print get_the_excerpt(); ?></p>
                                            </a>
                                        </div>

                                        </div> 

                                        <div style="display: none;">
                                                <div id="lbp-inline-href-<?=$i?>" style="padding:10px; ">
                                                    <?php the_content(); ?>
                                           </div>
                                            </div> 

                                            <?php $i++;endwhile; endif; wp_reset_query(); ?>
                                        </div>  
                                    </div>
                    </div> <?php // end #main ?>
            </div> <?php // end #inner-content ?>

        </div> <?php // end #content ?>

Answer 1

你有几个问题，其中之一是你有块元素 -<h4> 内联元素 - <a> 但我认为主要问题是您的 scripts.js 中的以下内容：

$( "#zoomIn" ).click(function() {
$( "#zoomingOverlay" ).show( "slow" );
});
$( "#close" ).click(function() {
$( "#zoomingOverlay" ).hide( "slow" );
});

Wordpress 使用无冲突的 JQuery，这意味着为了使用 $ 您需要将它放在无冲突的包装器中。像这样：

jQuery(document).ready(function($) {
    // Inside of this function, $() will work as an alias for jQuery()
    // and other libraries also using $ will not be accessible under this shortcut
});

要了解更多信息，请参阅jQuery noConflict Wrappers。