PHP和JavaScript产品/图像查看器

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