3

たとえば、Facebookのカバーソースとoffset_yをグラフAPIから取得できます-

https://graph.facebook.com/Inna

私はこれを手に入れます-

"cover": {
      "cover_id": "10151356812150381",
      "source": "http://sphotos.xx.fbcdn.net/hphotos-snc7/s720x720/419277_10151356812150381_302056140380_23114100_97822830_n.jpg",
      "offset_y": 54
   }

しかし、これについて実際のFacebookページを見ると、トップオフセットが-135pxであることがわかります。それは54からどのように計算されますか？

Facebookと同じオフセットで、誰かのカバー写真を自分のWebサイトに表示したいと思います。だから私は基本的にやっています-

<div class="ed-cover">
            <img src=""/>
    </div>

CSS-

.ed .ed-cover
{
    height:315px;
    overflow:hidden;
    position:relative;
}

.ed .ed-cover img
{
    width:100%;
    position:absolute;    
}

JS-

FB.api(artist, function (data) {
                        $('.ed-cover img').attr('src', data.cover.source).css("top", -1 * data.cover.offset_y);
                    });

しかし、ここでの「top」プロパティのCSSオフセットは、54に戻り、実際のオフセットが-135pxであるため、正しくありません。

4

6 に答える 6

8

それは本当にあなたのために働くのですか？多くの画像 (横向きと縦向き) でテストしましたが、% を使用すると、位置が常にわずかに異なります。これは私にとってはうまくいきます：

$.fn.positionate_cover = function (offset_y) {
    var cover_w = 850;
    var cover_h = 315;
    var img_w = $(this).width ();
    var img_h = $(this).height ();
    var real_img_h = (cover_w * img_h / img_w) - cover_h;

    $(this).css ({ top: parseInt (real_img_h * offset_y / 100 * -1) + "px" });
};

$(".ed-cover img")
    .attr ("src", data.cover.source)
    .positionate_cover (data.cover.offset_y)
;
于 2012-05-03T15:44:40.263 に答える
5

はい、私は実際に自分で答えを見つけました。Facebookが送信するオフセットはパーセンテージです！

以下は完璧に機能しました-

    FB.api(artist, function (data) {
                            $('.ed-cover img').attr('src', data.cover.source)
.css("top", (-1 * data.cover.offset_y) + '%');
                        });
于 2012-05-02T21:57:16.513 に答える
2

このjqueryプラグインをネットで見つけました。プラグインは正しいオフセットで画像を正しく取得します

ここにリンクがありますhttp://restyr.com/getting-facebook-cover-photo-with-offset-y-using-fbgetcover-jquery-plugin/

オフセットをパーセンテージとして使用しているように見えます

于 2012-07-01T14:13:47.490 に答える
0

Facebook API によって返される負のパーセンテージ オフセットのみを設定すると、80% のケースで機能する可能性があります。ただし、100% 正しい位置を取得する唯一の方法は、Claudios ソリューションを使用することです。

于 2013-02-25T13:05:38.893 に答える