Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Changing testimonials WordPress

  • SOLVED

Hello

I've setup a testimonial plugin on a clients website I'm working on.

The client asked me to make it so that the testimonials automaticly change after a certain amount of time, without reloading the page.

I'm using the WP-Testimonials plugin.

Thanks in advance.

2010-10-07 by René Sejling

Answers (1)

2010-10-07

enodekciw answers:

preload few testimonials into some div block.
then jQuery comes to work: setup recursive function to display random testimonials using .hide() and .show() methods.

EDIT:
Final script looks like this:
<script type="text/javascript" language="javascript">
jQuery(function() {
jQuery('.testimonial').hide();
var countedItems = jQuery('.testimonial').length;
var itemId = 1;
var testimonialNumber = 1;
jQuery('.testimonial').each(function(){
jQuery(this).attr('id', itemId);
itemId++;
});
function randomTestimonial() {
visibleTestimonial = jQuery('.testimonial:visible').attr('id');
while(visibleTestimonial == testimonialNumber){
testimonialNumber = Math.floor(Math.random()*countedItems+1);
}
jQuery('.testimonial').fadeOut();
jQuery('#' + testimonialNumber).fadeIn();
var me = arguments.callee;
var timer = setTimeout(function() { me(); }, 6000);
}

randomTestimonial();
});
</script>

Now it won't show same testimonial two or more times in a row.

René Sejling comments:

Thanks for the quick reply.

I need more help, I don't know how to code the jquery etc.

enodekciw comments:

Firstly, 4 bucks for this is pretty low, tbh. But great thing, that I wasn't really doing something right now, so I've decided to show you how it's done.

At first, to use my script you'll need markup like this:
<div style="height: 400px; width: 300px;">
<ul id="testimonials" style="list-style-type: none; position: relative;">
<li class="testimonial" style="position: absolute; top: 0; left: 0;">oh cool! great effect!</li>
<li class="testimonial" style="position: absolute; top: 0; left: 0;">this stuff works great!</li>
<li class="testimonial" style="position: absolute; top: 0; left: 0;">rawwwwr!</li>
<li class="testimonial" style="position: absolute; top: 0; left: 0;">demo from <a href="http://www.wpquestions.com">WPQuestions.com!</a></li>
</ul>
</div>

Then, insert this piece of code into <head></head> section:
<script type="text/javascript" language="javascript">
jQuery(function() {
jQuery('.testimonial').hide();
var countedItems = jQuery('.testimonial').length;
var itemId = 1;
jQuery('.testimonial').each(function(){
jQuery(this).attr('id', itemId);
itemId++;
});

function randomTestimonial() {
jQuery('.testimonial').fadeOut();
var testimonialNumber = Math.floor(Math.random()*countedItems+1)
jQuery('#' + testimonialNumber).fadeIn();
var me = arguments.callee;
var timer = setTimeout(function() { me(); }, 6000);
}

randomTestimonial();
});
</script>
I'll explain it a bit. At first, we hide and count all testimonial items from page. After that we assign unique ids to every list item. Then recursive randomTestimonial() function fades out current testimonial, generates random integer, and fades in testimonial with id equal to that integer.

enodekciw comments:

Btw, you can check it [[LINK href="http://www.dekciw.lt/tuts/test.html"]]right here[[/LINK]]

René Sejling comments:

That looks pretty good. Thanks for the fast reply, your the winner.
Will offer more next time around, but wasn't sure of the price structure :)

Thanks