Question

我正在开发这个网页，在一个图库中显示一个产品的多个图像。但是，在点击时将缩略图显示为主图像时，我遇到了很大的麻烦。

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

我正在使用bxslider（bxslider.com）作为缩略图滑块，我的初步计划是简单地编写一些JavaScript，将主图像更改为相关的缩略图。虽然这是我陷入困境的地方，但我无法找到实现这一目标的好方法。

我已经研究过设置所有主要图像的方式：none;选择一个图像，然后通过javascipt改变他们的显示attr，就像Sohtanaka在他的教程（http://www.sohtanaka.com/web-design/css-multiple-image-viewer-thumbnails/）中所做的那样，我已经看过用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);
    });
);

PHP和JavaScript产品/图像查看器

1 个答案: