jQuery图库

Question

我实现了一个相册，该相册在网页中显示一系列图像缩略图（200像素），但我也想允许用户通过单击缩略图来显示图片的全尺寸视图。 通过隐藏缩略图索引，应在同一页面中显示完整视图。 因此，一旦用户关闭了全尺寸图像，便会再次显示缩略图索引。 我有以下代码，该代码从JSON文件中读取所有图片，并将它们附加到div＃images上，并使用img {height：200px，width：200px}将CSS应用于它们。

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

我是jQuery的新手，想做上面的任务，所以对如何做的任何回答将不胜感激。 先感谢您。

Answer 1

请尝试以下方法：

Replace <img> as img.

改变这个

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

用这个，

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

Answer 2

看看我在这里做什么，然后对其进行反向工程以满足您的需求： http : //oregonadventuretours.com/

请注意，我是如何显示和隐藏包含更多内容的div，在您的情况下，它将是较大的照片。