如何在wordpress的标签窗格投资组合项中添加活动类?

时间:2018-07-05 08:48:47

标签: javascript php wordpress

我在wordpress中创建了动态的投资组合部分。网站实时链接位于http://www.nayeemriddhi.info/testproject/portfolio/。 但是事实是,当我打开一个投资组合项目并从左侧选择项目时,对于第一个投资组合图像,它的工作是右侧的视图部分,但是对于右侧的第二个和第三个图像视图部分,这是行不通的。虽然它已在代码中以静态方式添加了活动类,但它适用于第一个图像,为什么我不知道。现在我想在该项目的query3循环部分中动态添加活动类。是否可以添加。代码在下面....

 <section>            
<div class="container gal-container">
  <?php
    args = array(
       'post_type' => 'custom_portfolio',
       'posts_per_page' => '-1',
        );
      // the query
        $query = new WP_Query( $args );
         // The Loop   
         if ( $query->have_posts() )  ?>
          <?php while ( $query->have_posts() ) : $query->the_post() ; ?> 
             <!-- Item-->        
              <div class="col-md-4 col-sm-6 co-xs-12 gal-item">
                <div class="box">
                  <a class="trigger" data-iziModal-open="#modal<?php the_ID(); ?>">
           <img src="<?php echo get_post_meta(get_the_ID(), 'portfolio_image', true);   ?>">
                  </a>

                </div>
              </div>

              <!-- Modal-->
              <div id="modal<?php the_ID(); ?>" class="iziModal portfolio" data-izimodal-title="Portfolio Title" data-izimodal-subtitle="Web Design" style="max-width: 1200px important;">

                  <div class="col_one_third p-20">
                      <?php

                        $args2 = array(
                        'post_type' => 'custom_portfolio',
                        'posts_per_page' => '6',
                          );
                         // the query
                         $query2 = new WP_Query( $args2 );
                          // The Loop   
                         if ( $query2->have_posts() )  ?>
                        <?php while ( $query2->have_posts() ) : 
                          $query2->the_post() ; ?>

                     <div class="col_half p-10">
                        <a  href="#<?php the_ID(); ?>b" data-toggle="tab">
                                  <img src="<?php echo get_post_meta(get_the_ID(), 'portfolio_image', true);   ?>" class="portfolio-thumb"/>
                        </a>       
                      </div>

             <?php endwhile; wp_reset_query();  ?>

                        <div class="col_full p-10">
                          <div class="portfolio-links">
         <a href="#" class="btn btn-new" target="_blank">Launch Website</a>    

<a href="#request-quote-form" class="btn btn-danger request-quote-modal">Request a Quote</a>
                       </div>
                      </div> 

                  </div>        

                  <div class="col_two_third col_last">
                      <div class="tab-content">                    
                          <?php

                        $args3 = array(
                        'post_type' => 'custom_portfolio',
                        'posts_per_page' => '-1',
                          );
                         // the query
                         $query3 = new WP_Query( $args3 );
                          // The Loop   
                         if ( $query3->have_posts() )  ?>
                        <?php while ( $query3->have_posts() ) : 
                          $query3->the_post() ; ?>        
                          <div class="tab-pane active" id="<?php the_ID(); ?>b">
                              <img src="<?php echo get_post_meta(get_the_ID(), 'portfolio_image', true);   ?>" class="img-responsive"/>                         
                          </div>
                        <?php endwhile; wp_reset_query();  ?>                            
                        </div>
                        </div>
                        </div>        
                 <!-- Item End-->                
             <?php  endwhile; wp_reset_query();   ?>                  
            </div>        
          </section>Thanks for help....

1 个答案:

答案 0 :(得分:0)

您必须更改第二个和第三个模式的ID。当前,您到处都有相同的ID,并且图像在第一个ID上也发生了变化。 从网址中添加另一个ID,以打开模式