So I'm trying to make a testimonial panel for my website that displays 2 testimonials at a time.
The testimonials are stored in a MySQL Database.
So basically, what I want it to do is this.
1) Somehow identify which 2 testimonials to select first.
2) Display those 2 testimonials for 20 seconds.
3) Select & display the next 2 testimonials for 20 seconds with fadein and fadeout javascript.
4) Infinite repeat of this, displaying all testimonials stored in the database.
I'm trying to accomplish this through the use of AJAX, PHP, & JavaScript.
Here is my code so far.
GetTestimonials.php
<?php
require_once("Config.php");
require_once("CommonFunctions.php");
mysqlConnect($SQLHost, $SQLUsername, $SQLPassword, $SQLDatabase) or die('Error: ' . mysql_error());
$id1 = $_GET['id1'];
$id2 = $_GET['id2'];
$query1 = "SELECT description, author FROM testimonials WHERE id = $id1";
$query2 = "SELECT description, author FROM testimonials WHERE id = $id2";
$result1 = mysql_query($query1) or die(mysql_error());
$result2 = mysql_query($query2) or die(mysql_error());
$row1 = mysql_fetch_array($result1);
$row2 = mysql_fetch_array($result2);
$description1 = $row1['description'];
$author1 = $row1['author'];
$description2 = $row2['description'];
$author2 = $row2['author'];
?>
<div class="uniqueTestimonial">
<img src="Images/oQuote.jpg" alt="'" />
<?php
echo($description1);
?>
<img src="Images/cQuote.jpg" alt="'" />
<br />
<div class="author">
-
<?php
echo($author1);
?>
</div>
</div>
<div class="uniqueTestimonial">
<img src="Images/oQuote.jpg" alt="'" />
<?php
echo($description2);
?>
<img src="Images/cQuote.jpg" alt="'" />
<br />
<div class="author">
-
<?php
echo($author2);
?>
</div>
</div>
<?php
mysql_close();
?>
TestimonialsWidget.php
<script>
function showTestimonial(firstID, secondID)
{
if (str == "")
{
document.getElementById("testimonialsBox").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("testimonialsBox").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","GetTestimonials.php?id1=" + firstID + "?id2=" + secondID, true);
xmlhttp.send();
}
</script>
<div class="testimonialsContainer">
<div class="testimonialsTitle">
<h3>Testimonials</h3>
</div>
<div class="testimonialsBox" id="testimonialsBox"></div>
</div>
index.php
<?php
require_once("Config.php");
require_once("CommonFunctions.php");
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title><?php echo($Title); ?> - Home</title>
<link href="CSS/CSS.css" type="text/css" rel="stylesheet">
<script src="JS/jquery.js" type="text/javascript"></script>
<script>
function loopTestimonial()
{
window.setInterval(showTestimonial(), 5000);
}
</script>
</head>
<body onLoad="loopTestimonial()">
<div class="container">
<div class="headerContainer">
<div class="headerContent"></div>
</div>
<div class="clear"></div>
<div class="contentContainer">
<div class="topContent">
<div class="left">
<?php require_once("TestimonialsWidget.php"); ?>
</div>
<div class="right"></div>
</div>
</div>
</div>
</body>
</html>
