Lightbox正確顯示內容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。