CODEWITHSUNDEEP
phpjavascriptcsswordpress
MrMachoman86
MrMachoman86

Reputation: 185

Rotating Testimonial

I'd appreciate some help in fixing this little testimonial box of mine. Now, I don't know if the problem is the PHP, CSS, or just my markup, because the although the posts seem to fade, they all appear at once and the first fade just goes on to show the third post.

Here's the script:

    <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 } ?>

and finally the 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.

Upvotes: 1

Views: 2591

Answers (2)

Sean
Sean

Reputation: 12433

You need to do 2 things - (1) remove the <div id="testimonials"> from within the loop. And (2) set all but the first <div class="slide"> to style="display:none" on page load. You can do this by setting up a basic counter (ie. $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 } ?>

Check out the jsfiddle - http://jsfiddle.net/CEqKu/

Upvotes: 1

jeroen
jeroen

Reputation: 91762

One problem in the php / markup / javascript is that #testimonials is inside the loop. It should be out of the loop as now your .slide elements have no siblings and next() gets the next sibling (and you can only have one unique ID per page; now you have as many #testimonials elements as you have 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>

Upvotes: 2

Related Questions