循环浏览缩略图列表并使用 Flickr API 和 Jquery 将它们链接到更大的图像

Question

我只是想简单地显示一些来自 Flickr 的缩略图，然后 link 将它们显示为更大的图像。
缩略图部分可以正常工作，但我无法 "wrap" 缩略图link 到更大的图像。
我从其他地方得到了一段代码，links 缩略图到他们自己的来源并且有效。

//var url is set above https://api.flickr.com/services/rest/? bla bla

// loop through the photos
var src;
$.getJSON(url + "&format=json&jsoncallback=?", function(json_received){
    $.each(json_received.photoset.photo, function(i,item){
        thumbnail = "https://farm"+ item.farm +".static.flickr.com/"+ item.server +"/"+ item.id +"_"+ item.secret +"_q.jpg";

        large = "https://farm"+ item.farm +".static.flickr.com/"+ item.server +"/"+ item.id +"_"+ item.secret +"_b.jpg";

        $("<img/>").attr("src", thumbnail).appendTo("#images");

        //add links - now the thumbnails are linked to themselves
        $("img").each(function() {
                 $(this).wrap("<a href='" + this.src + "'/>");
                });
    });
});

我尝试了 $(this).wrap("<a href='" + large + "'/>");，但随后所有图像都 link 编辑到图像列表中的最后一张大图像。
所以我必须附上 "large" 以某种方式对每张图片的价值。
这是我第二次使用 Jquery，所以请耐心等待 :)

Answer 1

附加到#images之前用锚标记包裹图像然后附加它。

您可以使用 .wrapInner() 并改为执行类似的操作

var $img = $("<img/>").attr("src", thumbnail);
$("<a href='" + large + "'/>").wrapInner($img).appendTo("#images");

循环浏览缩略图列表并使用 Flickr API 和 Jquery 将它们链接到更大的图像

looping through the list of thumbnails and linking them to larger images using Flickr API and Jquery

jquery

flickr