Question

我已经实现了一个相册，它在网页中显示了一系列图像缩略图（200px），但我还想让用户通过点击缩略图显示图片的全尺寸视图。通过隐藏缩略图索引，应在同一页面中显示全尺寸视图。因此，一旦用户关闭完整尺寸图像，则再次显示缩略图索引。我有以下代码从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，在您的情况下，这将是更大的照片。

jQuery照片库

2 个答案: