Блог

У меня есть веб-страница, которую я разрабатываю, которая отображает несколько изображений одного продукта в виде галереи. Однако у меня возникают большие проблемы при попытке отобразить миниатюры изображений в качестве основного изображения при нажатии.

Вот ссылка на страницу, о которой идет речь: http://www.carbondelight.co.uk./prodview.php?id=50

Я использую bxslider (bxslider.com ) для слайдера миниатюр, и мой первоначальный план состоял в том, чтобы просто написать некоторый JavaScript, который изменил бы основное изображение на соответствующее уменьшенное изображение. Хотя именно здесь я застрял, так как не могу найти хороший способ добиться этого.

Я рассмотрел такие способы, как установка всех основных изображений для отображения: нет; удалить одно изображение, а затем изменить их отображение с помощью javascipt, как это делает Сохтанака в своем учебнике (http://www.sohtanaka.com/web-design/css-multiple-image-viewer-thumbnails /) и я рассмотрел возможность изменения местоположения src основного изображения с помощью JavaScript.

Я скажу, что я не профессионал в 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>";
  

Хорошо, итак, это вопрос 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);
    });
);