phatmambo Posted November 10, 2010 Share Posted November 10, 2010 Hi everyone I was told that you guys on the javascript forum might be able to help me??? 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> <script type="text/javascript"> function load_image(image_name){ document.getElementById('big_image_div').innerHTML = "<img src=\""+image_name+"\" />"; } </script> <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> </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 & 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"> </td> <td height="60"> </td> <td width="20" height="60" nowrap="nowrap"> </td> </tr> <tr> <td width="30" height="15" nowrap="nowrap"> </td> <td height="15" class="BagTitle"><font face="Arial, Helvetica, sans-serif"><? echo "$name"; ?></font></td> <td width="20" height="15" nowrap="nowrap"> </td> </tr> <tr> <td width="30" height="15" nowrap="nowrap"> </td> <td height="15" class="leftaligntext"><font face="Arial, Helvetica, sans-serif"><? echo "$subtitle"; ?></font></td> <td width="20" height="15" nowrap="nowrap"> </td> </tr> <tr> <td width="30" height="50" nowrap="nowrap"> </td> <td height="50"> </td> <td width="20" height="50" nowrap="nowrap"> </td> </tr> <tr> <td width="30" height="100" nowrap="nowrap"> </td> <td height="100" class="leftaligntext"><font face="Arial, Helvetica, sans-serif"><? echo "$description"; ?></font></td> <td width="20" height="100" nowrap="nowrap"> </td> </tr> <tr> <td width="30" height="55" nowrap="nowrap"> </td> <td height="55"> </td> <td width="20" height="55" nowrap="nowrap"> </td> </tr> <tr> <td width="30" height="100" nowrap="nowrap"> </td> <td height="100" class="leftaligntext"><font face="Arial, Helvetica, sans-serif"><? echo "$colour"; ?></font></td> <td width="20" height="100" nowrap="nowrap"> </td> </tr> </table></td> <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> <td width="230" valign="top"><table width="230" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="20" height="60"> </td> <td height="60"> </td> <td width="30" height="60"> </td> </tr> <tr> <td width="20" height="15"> </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"> </td> </tr> <tr> <td width="20" height="15"> </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"> </td> </tr> <tr> <td width="20" height="40"> </td> <td height="40" nowrap="nowrap"> </td> <td width="30" height="40"> </td> </tr> <tr> <td width="20" height="15"> </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"> </td> </tr> <tr> <td width="20" height="15"> </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"> </td> </tr> <tr> <td width="20" height="20"> </td> <td height="20"> </td> <td width="30" height="20"> </td> </tr> <tr> <td width="20" height="200"> </td> <td height="200"><table width="150" border="0" align="right" cellpadding="0" cellspacing="5" class="thumbtable"> <!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> <td width="30" height="0"> </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 & 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 ©</td> </tr> </table> As always.....thanks Quote Link to comment https://forums.phpfreaks.com/topic/218283-javascriptphp-swap-image-problem-advised-to-come-here-for-help/ Share on other sites More sharing options...
brianlange Posted November 11, 2010 Share Posted November 11, 2010 Try putting quotes around your arguments in the load_image functions. Quote Link to comment https://forums.phpfreaks.com/topic/218283-javascriptphp-swap-image-problem-advised-to-come-here-for-help/#findComment-1132838 Share on other sites More sharing options...
brianlange Posted November 11, 2010 Share Posted November 11, 2010 Working example with single quotes around image path arguments. http://www.realtown.com/test7.php Quote Link to comment https://forums.phpfreaks.com/topic/218283-javascriptphp-swap-image-problem-advised-to-come-here-for-help/#findComment-1132859 Share on other sites More sharing options...
phatmambo Posted November 11, 2010 Author Share Posted November 11, 2010 Ahhhh Brilliant!. Thank you so much. At least i was kinda close!?!?!? Thanks Again Quote Link to comment https://forums.phpfreaks.com/topic/218283-javascriptphp-swap-image-problem-advised-to-come-here-for-help/#findComment-1132994 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.