PHP和JavaScript产品/图像查看器

我有一个我正在开发的网页，它在一种图库中显示一种产品的多个图像。但是，我在尝试将缩略图显示为单击时的主图像时遇到了很大的困难

以下是相关页面的链接：

我将bxslider（bxslider.com）用于缩略图滑块，我最初的计划是编写一些JavaScript，将主图像更改为相关的缩略图图像。虽然这是我陷入困境的地方，因为我想不出一个好办法来实现这一点

我研究过一些方法，比如设置所有主要图像显示：无；禁止一个图像，然后像Sohtanaka在他的教程（）中所做的那样，通过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>";

if（isset（$\u GET['id']））
$id=cleanString（$_GET['id']）；
$sql=“从partTable中选择*，其中partID='$id'；
$result=performQuery（$sql）；
$sql2=“从carTable中选择car，其中carID='$result[6]'”；
$result2=performQuery（$sql2）；
$sql3=“从categoryTable中选择类别，其中categoryID='$result[7]'”；
$result3=性能查询（$sql3）；
$sql4=“从imageTable中选择medImg，lrgImg，其中partID='$id'；
$result4=mysql\u查询（$sql4）；
$rows=mysql\u num\u rows（$result4）；
$sql5=“从imageTable中选择smlImg，其中partID='$id'；
$result5=mysql\u查询（$sql5）；
$rows5=mysql\u num\u行（$result5）；
$row=mysql\u fetch\u row（$result4）；
回声“；
对于（$j=1；$j<$rows；$j++）
{
$row=mysql\u fetch\u row（$result4）；
回声“；
}
回声“；
对于（$j=0；$j<$rows5；++$j）
{
$row=mysql\u fetch\u row（$result5）；
回声“；
}
回声“；

好的，这是一个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);
    });
);

---

那么，您发现您尝试的方法有什么问题。您提到您尝试使用了

display:none

并更改了主图像的

src

，但您没有说明为什么不能使用它们。这些想法比实际尝试更多。我想不出一个方法来实际实施这些想法。例如，如果您看到第一个图像包含默认设置为“显示”的顶部主图像，则在For循环中，我获取所有其他图像并将其设置为“显示：无”。我遇到的问题是编写一些Javascript来更改与单击的缩略图相关的主图像上的显示属性。如果单击这些图像时图像没有显示出来，那么问题可能出在superalert（）Javascript函数中。我们能看到代码吗？抱歉superalert（）只是一些测试，看看我在单击图像时是否可以运行一些javascript。我现在已经删除了它，因为它实际上只做了以下操作：警报（“活动”）。好的，下面是一个可能的解决方案。顺便说一句，您的中等图像有一个“”的来源-您可能希望修复多余的点。谢谢halfer，这是一种享受。非常感谢您的详细评论，并将其直接应用于我的文件扩展名等。我想我会在这几天。我已经有了一个jQuery的副本，但我试图使用Javascript，因为我正在尝试更好地使用它。但再次感谢你帮我解决这个问题。没问题。我确实建议留出一些时间来学习jQuery，在原始JS中做一些通常需要很长时间的事情非常快！你好，哈弗，我想知道你是否能帮我解决产品维耶的一个小问题。如果您导航回my page（）并选择一个新的缩略图，然后单击主图像，您会注意到它始终与显示的lrgImg图像相同。“href”attr的更新方式是否与您在标记中更新“src”attr的方式相同？是的，当然；如果您的

标记直接包装主图像，则可以执行

$（“#mainimage'）.parent（）.attr（'href'，'newurl'）

。我将留给你们去解决如何确定新的url:-）这看起来对我来说很好。尝试调整lrgHref的值以查看它是否如您所期望的那样。另外，在浏览器中检查JS控制台，确保没有错误。