Вращающийся отзыв

Question

Я был бы признателен за помощь в исправлении этой маленькой обоймы. Теперь я не знаю, является ли проблема PHP, CSS или просто моей разметкой, потому что хотя сообщения, похоже, исчезают, все они появляются сразу, и первое исчезновение просто продолжается, чтобы показать третий пост.

Вот сценарий:

<script language="javascript"> 
jQuery(document).ready(function(){ 
    jQuery('#testimonials .slide'); 
    setInterval(function(){ 
     jQuery('#testimonials .slide').filter(':visible').fadeOut(1000,function(){ 
      if(jQuery(this).next('.slide').size()){ 
       jQuery(this).next().fadeIn(1000); 
      } 
      else{ 
       jQuery('#testimonials .slide').eq(0).fadeIn(1000); 
      } 
     }); 
    },1500);  
}); 
</script> 

PHP/HTML:

<?php 
    $loop = new WP_Query(array('post_type' => 'qcamp', 'posts_per_page' => 5)); 
    if ($loop->have_posts()) { ?> 
<div id="camps-quote"> 

<?php while ($loop->have_posts()) : $loop->the_post(); ?> 

    <div id="testimonials"> 
     <div class="slide"> 
      <div class="testimonial-quote"> 
      <?php the_content(); ?> 
      </div> 
     </div> 

    </div> 

<?php endwhile; ?> 

</div> 
<?php } ?> 

и, наконец, CSS:

#camps-quote { 
    margin-top:50px; 
    box-shadow: 7px 7px 7px #C0C0C0; 
    background-color: #7D9EC0; 
    height: 120px; 
    font-size: 16px; 
    padding:7px; 
    font-family: Arial; 
    width:500px; 
    margin-left:200px; 
    overflow:hidden; 
} 

#testimonials{ 

} 

#testimonials .slide {color: #fff;} 

#testimonials .testimonial-quote { 
    padding: 3px 0 0 65px; 
    line-height: 1.5em; 
    font-family:Helvetica, Arial, sans-serif !important; 
    font-size: 16px; 
    font-weight: normal; 
    font-style: italic; 
    margin: 10px 0 20px 0; 
} 

Here's the site I'm testing it on.

Answer 1

Вам нужно сделать 2 вещи - (1) удалить <div id="testimonials"> изнутри цикла. И (2) установите все, кроме первого <div class="slide">, на style="display:none" на загрузку страницы. Вы можете сделать это путем установки основного счетчика (т.е. $i=0; $i++;.)

<?php 
    $loop = new WP_Query(array('post_type' => 'qcamp', 'posts_per_page' => 5)); 
    if ($loop->have_posts()) { ?> 
<div id="camps-quote"> 
<div id="testimonials"> 
<?php $i=0; // set up a basic counter counter ?> 
<?php while ($loop->have_posts()) : $loop->the_post(); ?> 

     <div class="slide" <?php if ($i > 0) echo 'style="display:none"'; ?> > 
      <div class="testimonial-quote"> 
      <?php the_content(); ?> 
      </div> 
     </div> 
<?php $i++; // increase the counter ?> 
<?php endwhile; ?> 

</div> 
</div> 
<?php } ?> 

Отъезд jsfiddle - http://jsfiddle.net/CEqKu/

Answer 2

Одна проблема в PHP/наценки/jav ascript заключается в том, что #testimonials находится внутри цикла. Он должен выйти из цикла, как теперь ваши .slide элементы не имеют братьев и next() получает следующий родственный (и вы можете иметь только один уникальный идентификатор на странице, а теперь у вас есть столько #testimonials элементы, как у вас есть отзывы):

<div id="testimonials"> 
<?php while ($loop->have_posts()) : $loop->the_post(); ?> 

     <div class="slide"> 
      <div class="testimonial-quote"> 
      <?php the_content(); ?> 
      </div> 
     </div> 

<?php endwhile; ?> 
</div>