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/

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

1 个答案: