如何通过 API 在 Justified Gallery 中显示 Flickr 图像？

Question

我需要使用 Miromannino Justified Gallery (http://miromannino.github.io/Justified-Gallery/)，但我需要它来显示从 Flickr 检索到的图像。

我获得了使用 Ajax 通过 API 从 Flickr 检索照片的代码：

$.ajax({
        url: "https://api.flickr.com/services/rest/",
        data: {
            method: "flickr.photos.search",
            api_key: "671aab1520e2cb69e08dd36a5f40213b",
            tags: "beach,fashion",
            format: "json",
            nojsoncallback: 1
        },
        success: function (response) {
            $.each(response.photos.photo, function (index, value) {
                $("#mygallery").append("<div><img src='http://farm" + value.farm + ".staticflickr.com/" + value.server + "/" + value.id + "_" + value.secret +".jpg'></div>");
            })
        }
    });

但我就是不明白如何在 Justified Gallery 中添加。

Answer 1

JustifiedGallery 希望每张图片都包含在 <a> 标记中。最后，您必须在最后致电.justifiedGallery()。这是修改后的代码：

$.ajax({
    url: "https://api.flickr.com/services/rest/",
    data: {
        method: "flickr.photos.search",
        api_key: "671aab1520e2cb69e08dd36a5f40213b",
        tags: "beach,fashion",
        format: "json",
        nojsoncallback: 1
    },
    success: function (response) {
        $.each(response.photos.photo, function (index, value) {
            console.log(value);
          var url = 'http://farm' + value.farm + '.staticflickr.com/' + value.server + '/' + value.id + '_' + value.secret + '.jpg';
          var a = $('<a>').attr({href: url});
          var img = $('<img>').attr({src: url});
          a.append(img);
          $("#mygallery").append(a);
        });
        $('#mygallery').justifiedGallery();
    }
});

它正在运行：https://jsfiddle.net/tghw/raf1m6bL/