Quick Javascript Swap Image Issue

phatmambo · November 10, 2010, 9:46am

Solved! Thanks to everyone that looked at this post

Hi everyone

I am creating an online catalogue/shop site. For each product I have 6 thumbnails (loaded in with php) and then a main image. I just want to be able to click each thumbnail and have the main image change to match the thumbnail.

I am very close but the final file online just does not work. could anyone take a quick look?

You can see the page online here: www.ruxx.co.uk/trial/ruxxoutput3.php?id=1

Any help would be great as being a newbie. I just can’t work it out!

Here’s the code (affected code in red):

<?
$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: #999;
}
.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;
}
.thumbpics {
    font-size: 7px;
}
a:link {
    color: #999;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #999;
}
a:hover {
    text-decoration: none;
    color: #CCC;
}
a:active {
    text-decoration: none;
    color: #999;
}
.basemenu {
    color: #999;
}
-->
</style>

<title>RUXX</title><p>

[COLOR=Red]
<script type="text/javascript">
function load_image(image_name){
  document.getElementById('big_image_div').innerHTML = "<img src=\""+image_name+"\" />";
}
</script>[/COLOR]


<script type="text/javascript">
if (document.all||document.getElementById){
document.write('<style id="tmpStyle" type="text/css">#pic {-moz-opacity:0.00;filter:alpha(opacity=0);opacity:0;-khtml-opacity:0;}<\/style>')
var objG, degree=fadeAssist=0;
if (document.all&&typeof document.documentElement!=='undefined')
document.write('<!--[if GTE IE 5]><script type="text/javascript">fadeAssist=function (obj, degree){try {obj.filters.alpha.opacity=degree}catch(e){obj.style.filter="alpha(opacity="+degree+")"}}<'+'\/'+'script><![endif]-->')
}

function fadepic(obj){
objG=obj
if (!document.getElementById&&!document.all)
return;
var tS=document.all? document.all['tmpStyle'] : document.getElementById('tmpStyle')
if (degree<100){
degree+=5
if (objG.filters&&objG.filters[0]&&fadeAssist)
fadeAssist(objG, degree)
else if (typeof objG.style.MozOpacity=='string')
objG.style.MozOpacity=degree/101
else if (typeof objG.style.KhtmlOpacity=='string')
objG.style.KhtmlOpacity=degree/100
else if (typeof objG.style.opacity=='string'&&!objG.filters)
objG.style.opacity=degree/101
else
tS.disabled=true
setTimeout("fadepic(objG)", 40)
}
else
tS.disabled=true
}
</script>


  <?
++$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="" width="120" height="32" 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>
    
   [COLOR=Red] <td valign="top"><div id="big_image_div"><img src="/trial<?php echo "$mainimage1"; ?>" width="340" height="440" name="MainImage" onload="fadepic(this);" /></div></td>[/COLOR]
   
       <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 nowrap="nowrap" 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 class="rightaligntext"><font face="Arial, Helvetica, sans-serif"><a href="<? echo "$standardshoplink"; ?>" target="_blank" class="rightaligntext">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" nowrap="nowrap">&nbsp;</td>
        <td width="30" height="40">&nbsp;</td>
      </tr>
      <tr>
        <td width="20" height="15">&nbsp;</td>
        <td nowrap="nowrap" 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 class="rightaligntext"><font face="Arial, Helvetica, sans-serif"><a href="<? echo "$largeshoplink"; ?>" target="_blank" class="rightaligntext">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">
          



[COLOR=Red]<!this is where the thumbnails are imported!>
          
          <tr>
              <td height="60"><img src="/trial/Images/ItemGridThumbs/<? echo "$thumbfolder"; ?>/frontthumb.jpg" width="65" height="65" onclick="load_image(<?php echo "$mainimage1"; ?>)" /></td>            
            <td height="60"><img src="/trial/Images/ItemGridThumbs/<? echo "$thumbfolder"; ?>/backthumb.jpg" width="65" height="65" onclick="load_image(<?php echo "$mainimage2"; ?>)" /></td>
          </tr>
          <tr>
            <td height="60"><img src="/trial/Images/ItemGridThumbs/<? echo "$thumbfolder"; ?>/leftthumb.jpg" width="65" height="65" onclick="load_image(<?php echo "$mainimage3"; ?>)" /></td>
            <td height="60"><img src="/trial/Images/ItemGridThumbs/<? echo "$thumbfolder"; ?>/rightthumb.jpg" width="65" height="65" onclick="load_image(<?php echo "$mainimage4"; ?>)" /></td>
          </tr>
          <tr>
            <td height="60"><img src="/trial/Images/ItemGridThumbs/<? echo "$thumbfolder"; ?>/model1thumb.jpg" width="65" height="65" onclick="load_image(<?php echo "$mainimage5"; ?>)" /></td>
            <td height="60"><img src="/trial/Images/ItemGridThumbs/<? echo "$thumbfolder"; ?>/model2thumb.jpg" width="65" height="65" onclick="load_image(<?php echo "$mainimage6"; ?>)" /></td>
          </tr>
        </table></td>[/COLOR]
        <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="basemenu"><a href="terms.html" target="_blank">Terms &amp; Conditions</a> - <a href="refunds.html" target="_blank">Refund Policy</a> - <a href="privacy.html" target="_blank">Privacy Policy</a> -<a href="delivery.html" target="_blank"> Delivery Info</a> - Copyright Ruxx 2010 &copy;</td>
  </tr>
</table>

As always…thanks

Topic	Replies	Views
Old Newbie -Shop Catalogue - PHP imported image swap problem! programming	110	November 9, 2010
PHP novice having problems with a super simple image swap thingie programming	94	January 13, 2008
Thumbnail over state programming	26	February 20, 2007
Using a default Image when PHP is Broken	89	April 16, 2009
Help writing dynamic gallery involving php	109	November 15, 2007

Quick Javascript Swap Image Issue

Follow:

Popular

Loose Ends

Quick Javascript Swap Image Issue

Related topics

Follow:

Popular

Loose Ends