PHP 和 JavaScript 产品/图像查看器

Question

我正在开发这个网页，它在某种画廊中显示一个产品的多个图像。但是，我在尝试让缩略图在单击时显示为主图像时遇到了很大的麻烦。

这是相关页面的链接：http://www.carbondelight.co.uk./prodview.php?id=50

我正在使用 bxslider (bxslider.com) 作为缩略图滑块，我最初的计划是简单地编写一些 JavaScript 来将主图像更改为相关的缩略图图像。虽然这是我卡住的地方，因为我想不出一个好的方法来实现这一点。

我已经研究过将所有主要图像设置为 display:none; 的方法。禁止一张图像，然后像 Sohtanaka 在他的教程 (http://www.sohtanaka.com/web-design/css-multiple-image-viewer-thumbnails/) 中所做的那样通过 javascipt 更改其显示属性，我已经研究过使用 JavaScript 更改主图像的 src 位置。

我会说我不是 PHP 或 JavaScript 方面的专家，所以我的代码在任何形式或形式上都没有效率，所以我想专注于简单地解决手头的问题，而不是将所有代码更改为让它更有效率。但是，如果我必须重写一些查询来完成这项工作，那么我会全力以赴。

如何让缩略图和主图像正常工作？

注意：我已经清理了代码并取出了一些简单的样式类以使其更具可读性。如果有好处，我也可以包含 CSS。

这是我的代码：

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

好的，这是一个 JavaScript 问题。为了让自己的生活更轻松，给自己弄一份 jQuery，然后你可以这样做：

// 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);
    });
);