Question

我试图简单地显示来自Flickr的一些缩略图并将它们链接到较大的图像。
缩略图部分正在工作，但我不能用缩略图“包裹”指向较大图像的链接。我从其他地方得到了一段代码，将缩略图链接到他们自己的源代码，并且有效。

//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 + "'/>");但是所有图像都链接到图像列表中的最后一个大图像。
所以我必须以某种方式将“大”值附加到每个图像。
这是我第二次使用Jquery，所以忍受我：）

Answer 1

在追加到#images之前，用锚标记包装图像，然后附加它。

您可以使用.wrapInner()并执行此类操作

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

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

1 个答案: