PHP and JavaScript Product/Image viewer

Question

I have this web page I'm developing that displays multiple images of one product in a sort of gallery. However I'm having great trouble trying to have the thumbnail images appear as the main image when clicked.

Here's a link to the page in question: http://www.carbondelight.co.uk./prodview.php?id=50

I'm using the bxslider (bxslider.com) for the thumbnail slider, and my initial plan was to simply write some JavaScript that would change the main image to the relevant thumbnail image. Athough this is where I become stuck, as I can't figure out a good way to achieve this.

I have looked at ways like setting all main images to display:none; bar one image and then altering their display attr via javascipt like Sohtanaka does in his tutorial(http://www.sohtanaka.com/web-design/css-multiple-image-viewer-thumbnails/) and I've looked at changing the src location of the main image with JavaScript.

I will say that I'm no pro with PHP or JavaScript so my code is in no way shape or form efficient, so I'd like to focus on simply getting the question at hand solved rather than changing all the code to make it more efficient. However if I have to rewrite some of the queries to make this work then I'm all ears.

How can I get the thumbnails and main images working?

NOTE: I have cleaned up the code and taken out some simple styling classes to make it more readable. And if it's a benefit I can include the CSS as well.

Here's my code:

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>";

So what did you find wrong with the approaches you tried. You mentioned you tried using display:none and changing the src of the main image but you didn't say why you can't use them. — Chaim
– Chaim, Commented Nov 2, 2011 at 11:43
They were more ideas than actual attempts. I couldn't figure out a way toactually implement those ideas. For example if you see the first image contains the top main image which by default is set to display and in the for loop I grab all other images and set them to display:none. The problem I have is writing some Javascript that changes the display attributes on the main images relevent to te thumbnail that was clicked. — daniel blythe
– daniel blythe, Commented Nov 2, 2011 at 12:16
If the images aren't coming up when you click on them, then the issue is likely to be in the superalert() javascript function. Can we see that code? — halfer
– halfer, Commented Nov 2, 2011 at 12:17
Sorry the superalert() was just some testing to see if I could run some javascript when clicking the image. I have removed it now as it didn't do actually do anything other than this: alert("active"). — daniel blythe
– daniel blythe, Commented Nov 2, 2011 at 12:20
OK, one possible solution below. Btw, your medium image has a source of "carbondelight.co.uk./admin/image/proMed/95.jpg" - you may wish to fix the extraneous dot. — halfer
– halfer, Commented Nov 2, 2011 at 13:02

halfer · Accepted Answer · 2011-11-02 13:01:19Z

5

OK, so this is a JavaScript question. To make life easy for yourself, get yourself a copy of jQuery, and then you can do this:

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

answered Nov 2, 2011 at 13:01

halfer

20.2k20 gold badges111 silver badges208 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

daniel blythe Over a year ago

Thank you halfer, this works a treat. Thank you VERY much, for the detailed commenting and for applying it directly to my file extensions etc. I thought I was going to be on this for days. I already have a copy of jQuery but I was trying to use Javascript as I'm trying to get better with it. But again Thank you very much for helping with this problem.

halfer Over a year ago

No probs. I do recommend setting some time aside to learn jQuery, it's very quick to do stuff that normally takes ages in raw JS!

daniel blythe Over a year ago

Hi halfer, I was wondering if you could help meout with a little problem with product veiwer. If you navigate back to my page (carbondelight.co.uk./prodview.php?id=50) and select a new thumbnail and then click the main image you'll notice that its always the same lrgImg image that appears. Could the 'href' attr be updated in the same way you updated the 'src' attr in the <img> tag?

halfer Over a year ago

Yeah, sure; if your <a> tag directly wraps the main image, you can do $('#mainimage').parent().attr('href', 'new-url'). I'll leave you to work out how to determine new-url :-)

halfer Over a year ago

That looks okay to me. Try alert()ing the value of lrgHref to see if it is as you expect. Also, check your JS console in your browser, to ensure you have no errors.

|

Collectives™ on Stack Overflow

PHP and JavaScript Product/Image viewer

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related