Old Newbie -Shop Catalogue - PHP imported image swap problem!

programming
1

Just a quick one for anyone here that knows. I’m a real newbie but am learning fast. I Promise!

I am setting up a small catalog site that runs off a MySQL database.
On each product page there is a main image and six supporting thumbnails of different views of said product.

I have six thumbnails (front, back, left, right, modelimage1, modelimage2) with then six main images to match.

I want to be able to click on each of the thumbnails and have it swap the main image to match. Just a simple thumbnail gallery really! I guess (from googling the problem) I need to make a container and then have the thumbnails onclick and change the mainimage. (I don’t know how to go about this)

Here is my code so far … apologies if its long.

<?
$id = $_GET['id']; // will be equal to '1' if the url ends in ?id=1  it would be '2' if it ended in ?id=2 etc.

$query="SELECT * FROM ruxxshop WHERE id='$id'";
$result=mysql_query($query);

$num=mysql_numrows($result); 

mysql_close();

$i=0;
while ($i < $num) {
$name=mysql_result($result,$i,"name");
$subtitle=mysql_result($result,$i,"subtitle");
$description=mysql_result($result,$i,"description");
$colour=mysql_result($result,$i,"colour");
$standardprice=mysql_result($result,$i,"standardprice");
$standardshoplink=mysql_result($result,$i,"standardshoplink");
$largeprice=mysql_result($result,$i,"largeprice");
$largeshoplink=mysql_result($result,$i,"largeshoplink"); 

//list of the main images that need to be called in to the container
$mainimage1=mysql_result($result,$i,"mainimage1");
$mainimage2=mysql_result($result,$i,"mainimage2");
$mainimage3=mysql_result($result,$i,"mainimage3");
$mainimage4=mysql_result($result,$i,"mainimage4");
$mainimage5=mysql_result($result,$i,"mainimage5");
$mainimage6=mysql_result($result,$i,"mainimage6");

//thumbnail folder defines where the thumbnails are strored. These will be clicked on to change the main image
$thumbfolder=mysql_result($result,$i,"thumbfolder");

?>
<style type="text/css">
<!--
.areasmenu {    font-size: 13px;
    color: #CCC;
}
.basemenu {
    text-align: left;
    font-size: 9px;
    font-family: Verdana, Geneva, sans-serif;
}
.rightalignmenu {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 10px;
    font-style: normal;
    color: #999;
    text-align: right;
    vertical-align: top;
}
.thumbtable {
    background-color: #E2E2E2;
}
.maintable {
    background-image: url(Images/Main%20Content/background.jpg);
}
.BagTitle {
    color: #666;
    font-size: 14px;
    font-family: Verdana, Geneva, sans-serif;
    font-weight: bold;
    vertical-align: top;
}
.leftaligntext {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 11px;
    color: #666;
    vertical-align: top;
}
.rightaligntext {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 11px;
    color: #666;
    text-align: right;
    vertical-align: top;
}
.thumbpics {
    font-size: 7px;
}
a:link {
    color: #999;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #999;
}
a:hover {
    text-decoration: none;
    color: #999;
}
a:active {
    text-decoration: none;
    color: #999;
}
-->
</style>

<title>Ruxx</title><p>
  <?
++$i;
};

?>

</p>
<p>&nbsp;</p>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <th rowspan="2" align="left" valign="top" scope="col"><a  href="index.html"><img src="Images/Main Content/Ruxx Logo  Black.jpg" alt="Home Page" width="100" height="28" border="0"  /></a> </th>
    <th width="316" height="20" valign="top" class="rightalignmenu"  scope="col"><span class="areasmenu"><a  href="grid1.php">WOMENS</a></span></th>
    <th width="74" height="20" valign="top" class="rightalignmenu"  scope="col"><span  class="areasmenu">MENS</span></th>
    <th width="131" height="20" valign="top" class="rightalignmenu"  scope="col"><span  class="areasmenu">ACCESSORIES</span></th>
  </tr>
  <tr>
    <td height="20" colspan="3" class="rightalignmenu"><a  href="index.html">Home</a> - <a href="about.html">About  Ruxx</a>- <a href="http://s328432197.e-shop.info/"  target="_blank">The Ruxx Store</a> - <a  href="sizing.html">Bag Sizing &amp; Details</a> - <a  href="contact.html">Contact</a> - <a  href="register.html">Register For Info</a></td>
  </tr>
</table>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" class="maintable" valign="middle" >
  <tr class="greybackground">
    <td width="230" height="440" valign="top"><table width="230" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="30" height="60" nowrap="nowrap">&nbsp;</td>
        <td height="60">&nbsp;</td>
        <td width="20" height="60" nowrap="nowrap">&nbsp;</td>
      </tr>
      <tr>
        <td width="30" height="15" nowrap="nowrap">&nbsp;</td>
        <td height="15" class="BagTitle"><font face="Arial,  Helvetica, sans-serif"><? echo "$name";  ?></font></td>
        <td width="20" height="15" nowrap="nowrap">&nbsp;</td>
      </tr>
      <tr>
        <td width="30" height="15" nowrap="nowrap">&nbsp;</td>
        <td height="15" class="leftaligntext"><font  face="Arial, Helvetica, sans-serif"><? echo "$subtitle";  ?></font></td>
        <td width="20" height="15" nowrap="nowrap">&nbsp;</td>
      </tr>
      <tr>
        <td width="30" height="50" nowrap="nowrap">&nbsp;</td>
        <td height="50">&nbsp;</td>
        <td width="20" height="50" nowrap="nowrap">&nbsp;</td>
      </tr>
      <tr>
        <td width="30" height="100" nowrap="nowrap">&nbsp;</td>
        <td height="100" class="leftaligntext"><font  face="Arial, Helvetica, sans-serif"><? echo "$description";  ?></font></td>
        <td width="20" height="100" nowrap="nowrap">&nbsp;</td>
      </tr>
      <tr>
        <td width="30" height="55" nowrap="nowrap">&nbsp;</td>
        <td height="55">&nbsp;</td>
        <td width="20" height="55" nowrap="nowrap">&nbsp;</td>
      </tr>
      <tr>
        <td width="30" height="100" nowrap="nowrap">&nbsp;</td>
        <td height="100" class="leftaligntext"><font  face="Arial, Helvetica, sans-serif"><? echo "$colour";  ?></font></td>
        <td width="20" height="100" nowrap="nowrap">&nbsp;</td>
      </tr>
    </table></td>
    <td valign="top"><img src="/trial<? echo "$mainimage1";  ?>" width="340" height="440" name="MainImage" /></td>
    <td width="230" valign="top"><table width="230" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="20" height="60">&nbsp;</td>
        <td height="60">&nbsp;</td>
        <td width="30" height="60">&nbsp;</td>
      </tr>
      <tr>
        <td width="20" height="15">&nbsp;</td>
        <td height="15" class="rightaligntext"><font  face="Arial, Helvetica, sans-serif">STANDARD  SIZE</font><font face="Arial, Helvetica, sans-serif">: <?  echo "$standardprice"; ?></font></td>
        <td width="30" height="15">&nbsp;</td>
      </tr>
      <tr>
        <td width="20" height="15">&nbsp;</td>
        <td height="15" class="rightaligntext"><font  face="Arial, Helvetica, sans-serif"><a href="<? echo  "$standardshoplink"; ?>" target="_blank">Buy This  Bag</a></font></td>
        <td width="30" height="15">&nbsp;</td>
      </tr>
      <tr>
        <td width="20" height="40">&nbsp;</td>
        <td height="40">&nbsp;</td>
        <td width="30" height="40">&nbsp;</td>
      </tr>
      <tr>
        <td width="20" height="15">&nbsp;</td>
        <td height="15" class="rightaligntext"><font  face="Arial, Helvetica, sans-serif">LARGE SIZE</font><font  face="Arial, Helvetica, sans-serif">: <? echo "$largeprice";  ?></font></td>
        <td width="30" height="15">&nbsp;</td>
      </tr>
      <tr>
        <td width="20" height="15">&nbsp;</td>
        <td height="15" class="rightaligntext"><font  face="Arial, Helvetica, sans-serif"><a href="<? echo  "$largeshoplink"; ?>" target="_blank">Order This  Bag</a></font></td>
        <td width="30" height="15">&nbsp;</td>
      </tr>
      <tr>
        <td width="20" height="20">&nbsp;</td>
        <td height="20">&nbsp;</td>
        <td width="30" height="20">&nbsp;</td>
      </tr>
      <tr>
        <td width="20" height="200">&nbsp;</td>
        <td height="200"><table width="150" border="0"  align="right" cellpadding="0" cellspacing="5" class="thumbtable">
          



<!this is were the thumbnails are imported!>
          
          <tr>
            <td height="60"><img  src="/trial/Images/ItemGridThumbs/<? echo "$thumbfolder";  ?>/frontthumb.jpg" width="65" height="65" /></td>
            <td height="60"><img  src="/trial/Images/ItemGridThumbs/<? echo "$thumbfolder";  ?>/backthumb.jpg" width="65" height="65" /></td>
          </tr>
          <tr>
            <td height="60"><img  src="/trial/Images/ItemGridThumbs/<? echo "$thumbfolder";  ?>/leftthumb.jpg" width="65" height="65" /></td>
            <td height="60"><img  src="/trial/Images/ItemGridThumbs/<? echo "$thumbfolder";  ?>/rightthumb.jpg" width="65" height="65" /></td>
          </tr>
          <tr>
            <td height="60"><img  src="/trial/Images/ItemGridThumbs/<? echo "$thumbfolder";  ?>/model1thumb.jpg" width="65" height="65" /></td>
            <td height="60"><img  src="/trial/Images/ItemGridThumbs/<? echo "$thumbfolder";  ?>/model2thumb.jpg" width="65" height="65" /></td>
          </tr>
        </table></td>
        <td width="30" height="0">&nbsp;</td>
      </tr>
    </table></td>
  </tr>
</table>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="15" valign="bottom" class="areasmenu"><span  class="basemenu">Terms &amp; Conditions - Refund Policy - Privacy  Policy - Delivery Info - Copyright Ruxx 2010  &copy;</span></td>
  </tr>
</table>

Any help would be great! I’m a bit lost on this one.
Thanks