Dear friends,
First of all, thank you for your continued support, I’ve heard many positive reviews about my blog ( though I don’t post much on this blog )
So, I was doing some enchantments on our hosting site http://www.sunshellhosting.com and adding some more client testimonials. So I come up with an ‘exploding’ testimonial box which will show all the testimonials one after another. Of course, you can see the demo there on the page bottom
A demo page can also be found at http://blog.vivekv.com/demo/testimonials/
Here we need two php files ( of course, you can also combine these two files, and it will make the script complex, which I am not going to explain here )
testimonials.php
[php]
<?php
$a[] = “SunShell Hosting is a great choice when it comes to web hosting. There servers are almost never down and when they are, it’s not for long. The tech support is very friendly and the response time is quick”;
$a[] = “Sunil Kumar” ;
$a[] = “We switched to SunShell Hosting almost 2 years ago and are happy!”;
$a[] = “James danial” ;
$a[] = “They have setup our domain and hosting in just 1 minute! Great deal when comes domain as well as hosting. “;
$a[] = “Rakesh Mukarji” ;
foreach($a as $item)
{
if($i == 1 )
{
echo “<p class=”quote-from”><strong><i>- $item</i></strong>, <i>Customer</i></p></li>”;
$i=0 ;
}
else
{
echo “n<li><img width=50px src=client.png>$item” ;
$i++ ;
}
}
[/php]
This first file contains all the testimonials in the array called $a. I have designed this in this way so that if you have the comments in your database you can simply export those from the database and assign in an array. And no ( or less) modification in the php code is required.
The file is self explanatory, the first item in the array is the comment and the next is the customer name.
index.php
[html]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Testimonial Page example, www.vivekv.com</title>
<link href=’http://fonts.googleapis.com/css?family=Expletus+Sans’ rel=’stylesheet’ type=’text/css’>
<style>
*{
padding:0;
margin:0;
}
#testimonials{
border: 1px solid #ccc;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
color: #666;
font-family: ‘Expletus Sans’, arial, serif;
font-size:13px;
width:350px;
}
#testimonials ul{
padding:20px 30px;
}
#testimonials li{
list-style:none;
}
#testimonials li img{
float:left;
margin:0 10px 10px 0;
}
.quote-from{
text-align:right;
}
</style>
</head>
<body>
<div id=”testimonials”>
<ul>
<?php include ‘testimonials.php’; ?>
</ul>
</div>
<p>
<script src=”http://code.jquery.com/jquery.min.js”></script>
<script src=”jquery-ui-1.8.12.custom.min.js”></script>
<script>
$(function(){
$(‘#testimonials li’).hide().eq(0).show();
(function Next(){
$(‘#testimonials li:visible’).delay(3000).hide( “explode”,{pieces: 16 },1000,function(){
$(this).appendTo(‘#testimonials ul’);
$(‘#testimonials li:first’).fadeIn(‘slow’,function(){
Next();
});
});
})();
});
</script>
</p>
<p><a href=”http://blog.vivekv.com/2011/07/13/exploding-testimonial-page-using-php-jquery/”>Back to tutorial and download</a></p>
</body>
</html>
[/html]
We are now including the testimonials.php file. Of course, I have also used a Google Font which I had used on my resume page
Here comes the magic. We show the comments one by one and I have added some nice exploding effect as well.
[javascript]
<script>
$(function(){
$(‘#testimonials li’).hide().eq(0).show();
(function Next(){
$(‘#testimonials li:visible’).delay(3000).hide( “explode”,{pieces: 16 },1000,function(){
$(this).appendTo(‘#testimonials ul’);
$(‘#testimonials li:first’).fadeIn(‘slow’,function(){
Next();
});
});
})();
});
</script>
[/javascript]
And that is all. You can also adjust the delay if required. The default is 3 seconds.
If you want to download the entire files, here is the DOWNLOAD LINK