javascript - jQuery 照片库

Question

我已经实现了一个相册，它在网页中显示了一系列图像缩略图(200 像素)，但我还希望允许用户通过单击缩略图来显示图片的全尺寸 View 。全尺寸 View 应通过隐藏缩略图索引显示在同一页面中。因此，一旦用户关闭全尺寸图像，缩略图索引就会再次显示。我有以下代码从 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');