如何获得json Flickr饲料图像

I'm trying to get json data flicker images, but I'm a bit rusty and can't get it start it properly.

我正试图让json数据闪烁图像,但我有点生疏,无法让它正确启动它。

Would be nice to have a small help so I can get an better idea.

很高兴有一个小帮助,所以我可以得到一个更好的主意。

following snippet:

(function() {

  //changed the callback so that it is defined
  window.cb = function(data) {
    $.each(data.items, function(i, item) {
      $("<img>").attr("src", item.media.m).appendTo("#images");
      if (i === 3) {
        return false;
      }

    });
    console.log(data);
  }

  var tags = "london";
  var script = document.createElement('script');

  script.src = "http://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=cb&tags=" + tags;
  document.head.appendChild(script);


})();

#images {
  height: 185px;
  width: 240px;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
#images img {
  border: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="images"></div>

1 个解决方案

#1

You iterate over data.items and create img tags out of media.m:

你迭代data.items并从media.m创建img标签:

(function() {

  //changed the callback so that it is defined
  window.cb = function(data) {
    console.log(data);
    var $images = $('#images');
    for(var i = 0; i < data.items.length; i++) {
      $('<img/>').attr('src', data.items[i].media.m).appendTo($images);
    }
  };

  var tags = "london";
  var script = document.createElement('script');

  script.src = "http://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=cb&tags=" + tags;
  document.head.appendChild(script);


})();

#images {
  height: 185px;
  width: 240px;
  padding:0;
  margin:0; overflow: auto;}

#images img {
  border:none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="images"></div>