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

How to display Flickr Images via API in a Justified Gallery?

本文关键字：API 显示 Flickr 图像 Justified Gallery      更新时间：2023-09-26

我需要使用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>");
            })
        }
    });

但我只是不明白如何在合理画廊中添加。

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/

相关文章：