PHP Forum

**phatmambo** · 06:18 AM

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 thumnail gallery really! I guess (from googling the problem) I need to make a container and then have the thumbnails onclick and change the mainimage.

Code:

<?
$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

**Backslider** · 12:26 AM

First thing, if you don't want somebody to mess your database, you need to sanitize your $_GET variables. In your example, thats very simple:

Code:

$id = (int)$_GET['id'];

As for the thumbs, just Google "jQuery Image Swap". You will find tons of these and I am sure one that will do just what you want.