jQuery图库

Question

I have implemented a photo album which present a series of image thumbnails (of 200px) in a Web page but I also want to allow the user to display full-size views of the pictures by clicking on the thumbnail. The full-size view should be displayed in the same page by hiding the thumbnail index. So once the user closes the full size image, the thumbnail index is displayed again. I have the following code that reads all the pictures from a JSON file and append them to the div#images and apply CSS to them with img {height:200px, width:200px}.

var imageList;
$.getJSON('images.json', function(data) {
    imageList = data;
    for (var i = 0; i < imageList.length; i++) {
        $('<img>').attr({src: imageList[i].img_src, 
                    title: imageList[i].title}).appendTo('#images');    
    }
});

I am new in jQuery and want to do the task above so any answer on how to do it would be appreciated. Thank you in advance.

Answer 1

Please try this:

Replace <img> as img.

change this,

$('<img>').attr({src: imageList[i].img_src, 
                    title: imageList[i].title}).appendTo('#images'); 

use this,

$('img').attr({src: imageList[i].img_src, 
                title: imageList[i].title}).appendTo('#images'); 

Answer 2

Take a look at what I'm doing here and reverse engineer it to suit your needs: http://oregonadventuretours.com/

Notice how I'm just showing and hiding a div with more content in it, in your case, it would be the larger photo.