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 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. 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 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 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
Archived
This topic is now archived and is closed to further replies.