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。

Lightbox无法正确显示Wordpress内容

1 个答案: