PHP & Javascript Product/Image viewer
<p>I have this web page I'm developing that displays multiple images of one product in a sort of gallery. However I'm having great trouble trying to have the thumbnail images appear as the main image when clicked.</p>

<p>Heres a link to the page in question: <a href="http://www.carbondelight.co.uk./prodview.php?id=50" rel="nofollow">http://www.carbondelight.co.uk./prodview.php?id=50</a></p>

<p>Ok so i'm using the bxslider(bxslider.com) for the thumbnail slider, and my initial plan was to simply write some javascript that would change the main image to the relevant thumbnail image. Athough this is where I become stuck, as I can't figure out a good way to achieve this.</p>

<p>I have looked at ways like setting all main images to display:none; bar one image and then altering their display attr via javascipt like Sohtanaka does in his tutorial(http://www.sohtanaka.com/web-design/css-multiple-image-viewer-thumbnails/) and I've looked at changing the src location of the main image with javascript.</p>

<p>Before you take a look at my code I will say that im no pro with PHP or Javascript so my code is in no way shape or form efficient, so i'd like to focus on simply getting the question at hand solved rather than changing all the code to make it more effcient. However if I have to rewrite some of the queries to make this work then im all ears.</p>

<p>So basically can anyone help me get the thumbnails and main images working.</p>

<p>NOTE: I have cleaned up the code and taken out some simple styling classess to make it more readable. And if its a benfit I can include the CSS as well.</p>

<p>Im here all day so any questions you have will be answered swiftly be myself.</p>

<p>Heres my code:</p>

<pre><code>if (isset($_GET['id']))
$id = cleanString($_GET['id']);

$sql = "SELECT * FROM partTable WHERE partID='$id'";
$result = performQuery($sql);

$sql2 = "SELECT car FROM carTable WHERE carID='$result[6]'";
$result2 = performQuery($sql2);

$sql3 = "SELECT category FROM categoryTable WHERE categoryID='$result[7]'";
$result3 = performQuery($sql3);

$sql4 = "SELECT medImg, lrgImg FROM imageTable WHERE partID='$id'";
$result4 = mysql_query($sql4);

$rows = mysql_num_rows($result4);

$sql5 = "SELECT smlImg FROM imageTable WHERE partID='$id'";
$result5 = mysql_query($sql5);

$rows5 = mysql_num_rows($result5);

$row = mysql_fetch_row($result4);
echo "&lt;a id='single_image' href='$row[1]'&gt;&lt;img src='$row[0]' /&gt;&lt;/a&gt;"; 

for ( $j = 1 ; $j &lt; $rows ; $j++)
{
    $row = mysql_fetch_row($result4);
    echo "&lt;a id='single_image' href='$row[1]'&gt;&lt;img style='display:none;' src='$row[0]'/&gt;&lt;/a&gt;"; 
}


echo "&lt;div id='slider1'&gt;";

for ( $j = 0 ; $j &lt; $rows5 ; ++$j)
{
    $row = mysql_fetch_row($result5);
    echo "&lt;div class='pv-thumb'&gt;&lt;a href='javascript:void(0)' onclick='superalert()'&gt;&lt;img  src='$row[0]'  /&gt;&lt;/a&gt;&lt;/div&gt;";
}

echo "&lt;/div&gt;";
</code></pre>
