Hello Guys,
I would appreciate if someone could help me with this. I am not sure if this is PHP or perhaps Javascript or JQUERY but I hope someone of you gurus would know.
I have created two pages (showclassified.php) and (showdetails.php). When a thumbnail link is clicked on the showclassified.php, images are populated in a table in the showdetails.php. The table shows five thumbnails photo1small, photo2small, photo3small, photo4small and photo5small all lined up in one column on the left. The next column shows a bigger image of photo1small (that is photo1big). The thumbnails and large images are all saved on a database. I would like the bigger image (photo1big) on the right to change to a bigger image of any other thumbnail when other thumbnails are clicked.
I tried creating four other pages (page1.php, page2.php, page3.php and page4.php) to link different thumbnails and their big images but, I would prefer to be able to change the images without loading different pages. Any help? Below is code showing my two different files.
Thank you.
showclassified.php
<?php
session_start();
mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("blog") or die(mysql_error());
$sql = mysql_query("SELECT * FROM classified");
while($row = mysql_fetch_array($sql)){
echo "<table border = '1'>";
echo "<tr>";
$id = $row['id'];
echo "<td rowspan='3'><a href='showdetails.php?id={$id}'><img src='{$row['photo1small']}'/></a></td>";
echo "<td width = '300'>". $row['title'] . "</td>";
echo "<td width = '100'>". $row['price'] . "</td>";
echo "</tr>";
echo "</table>";
echo "<br/>";
}
?>
showdetails.php
<?php
session_start();
$id = $_GET['id'];
mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("blog") or die(mysql_error());
$sql = mysql_query("SELECT * FROM classified WHERE id = '$id'");
while($row = mysql_fetch_array($sql)){
echo "<table border = '1'>";
echo "<tr><td><a href = 'showdetails.php'><img src='{$row['photo1small']}' width = '80' height = '55' /></a></td><td rowspan = '5'><img src = '{$row['photo1big']}'/></td></tr>";
echo "<tr><td><a href = 'page1.php'><img src='{$row['photo2small']}' width = '80' height = '55' /></a></td></tr>";
echo "<tr><td><a href = 'page2.php'><img src='{$row['photo3small']}' width = '80' height = '55' /></a></td></tr>";
echo "<tr><td><a href = 'page3.php'><img src='{$row['photo4small']}' width = '80' height = '55' /></a></td></tr>";
echo "<tr><td><a href = 'page4.php'><img src='{$row['photo5small']}' width = '80' height = '55'/></a></td></tr>";
echo "</table>";
}
?>