Facebook专辑图片网址

时间:2013-02-16 00:04:58

标签: jquery facebook-graph-api

我试图获取响应图片网址,以便将其附加为背景。它可以工作,但它为每一个附加相同的图像。这是我的代码:

    getUserAlbums : function(){
    FB.api('/me/?fields=id,name,albums', function(response) {
        var albums = response.albums.data;
        var frame = "";
        console.log(albums);
        _.each(albums, function(album) {

            FB.api('/'+album.cover_photo+"/picture?type=album", function(response) {
                var url = response.data;
                _.each(url, function(bg) {
                    console.log(url);
                    $("li.album").css({backgroundImage:"url("+bg.replace("_s.jpg", "_a.jpg")+")"});
                });
            });

            frame += '<li class="album"><img src="images/fb_frame.png"/></li>';

            $('ul#albums').append(frame);

        });

    });
}

即时通讯使用下划线顺便说一下“_.each”是什么。 这里真正的问题是,当附加照片时,它会显示每张专辑的相同照片,这意味着我的循环会被覆盖,但我不明白为什么。

2 个答案:

答案 0 :(得分:0)

我想通了,我不得不改变我追加数据的方式:

    FB.api('me/?fields=albums', function(response) {
        var albums = response.albums.data;
        _.each(albums, function(album, i) {
            FB.api('/'+album.cover_photo+"/picture?type=album", function(res) {
                var frame = $('<li class="album"><img src="images/fb_frame.png"/></li>').appendTo('ul#albums');
                frame.css({backgroundImage:'url('+res.data.url.replace('_s.jpg', '_a.jpg')+')'});
            });
        });
    });

答案 1 :(得分:0)

你不需要将_s.jpg替换为a_jpg。签出照片对象的图像字段。从这里你可以选择图片。

   me/?fields=id,name,albums.fields(photos.fields(images))

"albums": {
    "data": [
      {
        "id": "xxxxxx", 
        "created_time": "2011-04-01T03:17:15+0000", 
        "photos": {
          "data": [
            {
              "images": [
                {
                  "height": 1107, 
                  "width": 2048, 
                  "source": "https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-prn1/s2048x2048/xxxx_n.jpg"
                }, 
                {
                  "height": 330, 
                  "width": 610, 
                  "source": "https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-prn1/XXXX_n.jpg"
                }, 
                {
                  "height": 330, 
                  "width": 610, 
                  "source": "https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-prn1/xxxxx_n.jpg"
                }, 
                {
                  "height": 324, 
                  "width": 600, 
                  "source": "https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-prn1/s600x600/xxxxxxxxx_n.jpg"
                }, 
                {
                  "height": 259, 
                  "width": 480, 
                  "source": "https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-prn1/s480x480/xxxxxxxx_n.jpg"
                }, 
                {
                  "height": 173, 
                  "width": 320, 
                  "source": "https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-prn1/s320x320/xxxxxxx_n.jpg"
                }, 
                {
                  "height": 97, 
                  "width": 180, 
                  "source": "https://fbcdn-photos-a.akamaihd.net/hphotos-ak-prn1/xxxxxx_a.jpg"
                }, 
                {
                  "height": 70, 
                  "width": 130, 
                  "source": "https://fbcdn-photos-a.akamaihd.net/hphotos-ak-prn1/xxxxxxxx_s.jpg"
                }, 
                {
                  "height": 70, 
                  "width": 130, 
                  "source": "https://fbcdn-photos-a.akamaihd.net/hphotos-ak-prn1/s75x225/xxxxxx_s.jpg"
                }
              ], 
              "id": "4274066575883", 
              "created_time": "2013-02-09T10:43:54+0000"
            },