Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

PHP

Posted by Elizabeth Eisenstein
Elizabeth Eisenstein
128 Points

Click Thumbnail, Display Large Image

Hi everyone

I am currently trying to make an image gallery for a product details page of my online store. I am new to PHP and so far have succeeded at just displaying an array of thumbnail images below a statically placed larger image. I'd like it that when you click one of the thumbnails, the full-size version of the image is displayed above it. I have all the full size images and thumbnails in their own arrays within each individual product array. How to go about this? It seems like a simple thing, I just have no idea where to start!

Here's what I have so far:

<div>
<img src="<?php echo $product["imglarge"]; ?>" alt="<?php echo $product["name"]; ?>" >
<br>
<?php foreach($product["thumb"] as $thumb=>$value){ 
   echo "<img src='".$value."' alt='".$value."'>"; }   ?></div>

Any help is much appreciated :)

1 Answer

John Locke
John Locke
15,479 Points
John Locke
John Locke
15,479 Points

Hi Elizabeth:

You'll have to add an onclick event in jQuery to echo out the larger image.

Elizabeth Eisenstein
Elizabeth Eisenstein
128 Points

Thanks John. Unfortunately I have barely any experience with jquery/javascript, and don't really know how to do that. I've got as far as putting this in my header:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#productimage").click(function(){
alert("The paragraph was clicked.");
});
});

</script>

Obviously I don't want an alert to pop up, I just don't know what the correct thing to put there is. Is there a treehouse video that discusses this? Or a good tutorial somewhere?

Thanks again for your help.