PHP和JavaScript产品/图像查看器

Question

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.

Here's a link to the page in question: http://www.carbondelight.co.uk./prodview.php?id=50

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.

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.

I will say that I'm 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 efficient. However if I have to rewrite some of the queries to make this work then I'm all ears.

How can I get the thumbnails and main images working?

NOTE: I have cleaned up the code and taken out some simple styling classes to make it more readable. And if it's a benefit I can include the CSS as well.

Here's my 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 "<a id='single_image' href='$row[1]'><img src='$row[0]' /></a>"; 

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


echo "<div id='slider1'>";

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

echo "</div>";

Answer 1

OK, so this is a JavaScript question. To make life easy for yourself, get yourself a copy of jQuery, and then you can do this:

// Wait for document ready
$(document).ready(function() {
    // Attach to all thumbnails (give all images a class of 'thumbnail')
    $('img.thumbnail').click(function() {
        // Let us assume your thumbs and medium images are thus:
        // Thumb: /admin/image/proSml/96.jpg
        // Medium: /admin/image/proMed/96.jpg

        // Reset source of main image based on thumbnail
        var thumbSrc = $(this).attr('src');
        var medSrc = thumbSrc.replace('proSml', 'proMed');
        $('#mainimage').attr('src', medSrc);
    });
);