phatmambo Posted November 8, 2010 Share Posted November 8, 2010 Just a quick one for anyone here that knows. 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. I have given the main image an ID so maybe I could use a bit of javascript to swap the mainimage1 (<? echo "$mainimage1"; ?>) ....... to........ mainimage2 (<? echo "$mainimage2"; ?>) when i click on Any ideas of where to start? Its really just a simple thumbnail gallery i guess! I'm a newbie so as simple as possible would be great! $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"); //main images $mainimage1=mysql_result($result,$i,"mainimage1"); //front image $mainimage2=mysql_result($result,$i,"mainimage2"); //back image $mainimage3=mysql_result($result,$i,"mainimage3"); //left image $mainimage4=mysql_result($result,$i,"mainimage4"); //right image $mainimage5=mysql_result($result,$i,"mainimage5"); //model image 1 $mainimage6=mysql_result($result,$i,"mainimage6"); //model image 2 //thumbnail images $leftimage=mysql_result($result,$i,"leftimage"); $rightimage=mysql_result($result,$i,"rightimage"); $backimage=mysql_result($result,$i,"backimage"); $frontimage=mysql_result($result,$i,"frontimage"); $modelimage1=mysql_result($result,$i,"modelimage1"); $modelimage2=mysql_result($result,$i,"modelimage2"); ?> <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> <p> <? ++$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="grid.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.html">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>- The Ruxx Store - Bag Sizing & Details - <a href="/contact.html">Contact</a> - Register For Info</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"><img src="<? 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"> </td> <td height="60"> </td> <td width="30" height="60"> </td> </tr> <tr> <td width="20" height="15"> </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"> </td> </tr> <tr> <td width="20" height="15"> </td> <td height="15" class="rightaligntext"><font face="Arial, Helvetica, sans-serif"><a href="<? echo "$standardshoplink"; ?>">Buy This Bag</a></font></td> <td width="30" height="15"> </td> </tr> <tr> <td width="20" height="40"> </td> <td height="40"> </td> <td width="30" height="40"> </td> </tr> <tr> <td width="20" height="15"> </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"> </td> </tr> <tr> <td width="20" height="15"> </td> <td height="15" class="rightaligntext"><font face="Arial, Helvetica, sans-serif"><a href="<? echo "$largeshoplink"; ?>">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"> <tr> <td height="60"><img src="<? echo "$frontimage"; ?>" width="65" height="65" /></td> <td height="60"><img src="<? echo "$backimage"; ?>" width="65" height="65" /></td> </tr> <tr> <td height="60"><img src="<? echo "$leftimage"; ?>" width="65" height="65" /></td> <td height="60"><img src="<? echo "$rightimage"; ?>" width="65" height="65" /></td> </tr> <tr> <td height="60"><img src="<? echo "$modelimage1"; ?>" width="65" height="65" /></td> <td height="60"><img src="<? echo "$modelimage2"; ?>" width="65" height="65" /></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="areasmenu"><span class="basemenu">Terms & Conditions - Refund Policy - Privacy Policy - Delivery Info - Copyright Ruxx 2010 ©</span></td> </tr> </table> Thanks Quote Link to comment Share on other sites More sharing options...
micah1701 Posted November 8, 2010 Share Posted November 8, 2010 I think your on the right track, although, this tread should probably be in the javascript forum. You need to do something like, on each thumbnail, modify the code from: <td height="60"><img src="<?php echo "$frontimage"; ?>" width="65" height="65" /></td> to <td height="60"><img src="<?php echo "$frontimage"; ?>" width="65" height="65" onclick="load_image(<?php echo "$frontimage_big"; ?>)" /></td> (where $frontimage_big is a variable containing the file name of the larger version of the image) Then create a little javascript function named "load_image()" as refereneced by the above "onclick" event: <script type="text/javascript"> function load_image(image_name){ document.getElementById('big_image_div').innerHTML = "<img src=\""+image_name+"\" />"; } </script> lastly, modify the area where the large image is displayed by giving it a container with the name "big_image_div" - as referenced by the above javascript snippet. something like, change: <td valign="top"><img src="<?php echo "$mainimage1"; ?>" width="340" height="440" name="MainImage" /></td> to <td valign="top"><div id="big_image_div"><img src="<?php echo "$mainimage1"; ?>" width="340" height="440" name="MainImage" /></div></td> Quote Link to comment Share on other sites More sharing options...
phatmambo Posted November 9, 2010 Author Share Posted November 9, 2010 Hi, thanks micah1701 This looks good. I'm a little confused why I need to create a new set of variables ($frontimage_big ....etc) as my large images are already setup as variables. ie. //main images $mainimage1=mysql_result($result,$i,"mainimage1"); //front image $mainimage2=mysql_result($result,$i,"mainimage2"); //back image $mainimage3=mysql_result($result,$i,"mainimage3"); //left image $mainimage4=mysql_result($result,$i,"mainimage4"); //right image $mainimage5=mysql_result($result,$i,"mainimage5"); //model image 1 $mainimage6=mysql_result($result,$i,"mainimage6"); //model image 2 I'm sorry to bother you again.... I almost understand this! (???) Quote Link to comment Share on other sites More sharing options...
micah1701 Posted November 9, 2010 Share Posted November 9, 2010 sorry for taking a while to get back to you... I didn't really look through your code so I didn't see that you already have a variable. You don't need to create a new one if you're already grabbing it from the database. The point really is that you need to pass the file name of the larger image to the javascript function so it can populate the <div> with the correct image. so when you (1) click on the thumbnail, it triggers (2) the javascript function which (3) updates the HTML within the <div> to show the larger version of the image. in step 1, we're using the "onclick" event in the link to call the javascript function and we're including the name of the file to display. in step 2, we're taking that passed file name which is now a javascript variable and... in step 3, we're using javascript to update the div. hope that helps clear it up a bit. if you have more questions, you might want to post the code you've got so far in the javascript forum Quote Link to comment 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.