Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I'm very new to PHP and jquery, and am trying to set up an image gallery with thumbnails that when clicked, display a larger image in the div above them.

So far, I have this:

$(function() {
 $('.thumbnail').click(function(e){
  e.preventDefault();
 $("#large").attr('src',"http://something.com/image.jpg");
 });
});

What I want to do is change the image source to be from an array of images. When someone clicks thumbnail A, for instance, I want it to load the corresponding large image A into the div above the thumbnails. I have two arrays, one for the thumbnails and one for the larger images. Seems like a pretty basic thing to do, but like I said, I am totally new at this!

Thanks!

share|improve this question

3 Answers

up vote 0 down vote

Your javascript code looks correct. Can I see your html code.

<html>
    <head>
        <title>Test</title>
        <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    </head>
    <body>
        <div id="container">
            <img id="large" src="" />

        </div>
        <div id="thumbnail-container">
            <img class="thumbnail" src="large.PNG" width="50" height="50" alt="test1"/>
            <img class="thumbnail" src="large2.PNG" width="50" height="50" alt="test2"/>

        </div>
        <script>
            $(function() {
 $('.thumbnail').click(function(e){
  e.preventDefault();
 $("#large").attr('src',$(this).attr('[REPLACE_WITH_YOUR_LARGE]'));
 });
});
        </script>

    </body>
</html>

And I simply use your js code on the sample above.

share|improve this answer
up vote 0 down vote

You need to pass the array to your javascript first, store in a javascript array, and with proper index (javascript only accept number index), and load it with click event.

there is two way(from my knowledge) to do this.

1) At ur index page, after you load your JS file, you echo <script>loading_function("array_in_string")</script>;, and process the string in JS and store into array.

2) using Ajax, call to server and request for the full list.

share|improve this answer
up vote 0 down vote

In the HTML of the thumbnail images, add a data-tag such as

<img src="image.jpg" data-full-imgpath="http://..." class="thumbnail" />
<img src="image2.jpg" data-full-imgpath="http://..." class="thumbnail" />

Then change your JS to this:

$(function() {
    $('.thumbnail').click(function(e){
        e.preventDefault();
        var imgPath = $(this).data("full-imgpath");
        $("#large").attr('src',imgPath);
    });
});
share|improve this answer
The image sources of my thumbnails and large images are located in an external php file that I've included in each page. The php file has a bunch of arrays for different products (I'm creating an online store): $products[101] = array( "name" => "Object 3", "imglarge" => array("images/products/image1.jpg", "2", etc), "thumb" => array("images/thumbs/thumb1.jpg", "images/thumbs/thumb2.jpg", etc) ); Each product has several product photos (in thumbnail form and in large), so they are not located in the HTML. How do I include the images from these arrays in my jquery? – user2805440 Sep 23 at 1:53
Sorry I'm having trouble with the markdown formatting--I feel like an idiot! – user2805440 Sep 23 at 1:54

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.