Вопрос по facebook, javascript, facebook-graph-api, css – Как вычислить api обложку графа Facebook смещение в пиксель?

3

Я могу получить источник обложки facebook и offset_y из графика API, например -

https://graph.facebook.com/Inna

Я понимаю это -

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

Но когда я смотрю на настоящую страницу Facebook для этого, я вижу верхнее смещение -135px. Как это рассчитывается из 54?

Я хочу, чтобы кто-то разместил фото обложки на моем сайте с тем же смещением, что и в Facebook. Так что я в основном делаю -

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

CSS -

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

.ed .ed-cover img
{
    width:100%;
    position:absolute;    
}
</code>

JS -

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

Но здесь смещение CSS для "top" свойство неверно, как я вернусь 54 и реальное смещение -135px;

Ваш Ответ

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)
;
Error: User Rate Limit Exceededpositionate_coverError: User Rate Limit ExceededloadError: User Rate Limit Exceeded
Error: User Rate Limit Exceeded MoXplod
0

возвращаемое API Facebook, оно может работать в 80% случаев. Однако единственный способ получить 100% правильное положение - это использовать решение Клавдия.

2

правильным смещением

вот ссылкаhttp://restyr.com/getting-facebook-cover-photo-with-offset-y-using-fbgetcover-jquery-plugin/

Похоже, что он использует смещение в процентах

1

Исходя из моего опыта, смещение составляет% невидимой части изображения (то есть той части, которая не помещается в окне).

Например: смещение = 51 размер обложки для фейсбука (веб) = 851X315 размер масштабированного изображения = 851X1135 top = -420px.

Итак, вершина = 51% * (1135-315).

Я попробовал это со многими фотографиями покрытия различных размеров.

0

        private $_cropX = 850;
        private $_cropY = 315;
        private $_origignalHeight;
        private $_origignalWidth;

 $scale = $this->caclScale($cover->cover->source);
        $thumb = \PhpThumb_Factory::create($imagePath);

                            $real_img_y = ($this->_cropX * $this->_origignalHeight / $this->_origignalWidth) - $this->_cropY;

                            $real_img_x = ($this->_cropY * $this->_origignalWidth / $this->_origignalHeight) - $this->_cropX;

                            $offset = $this->_authSession->offset;


                            $offset_x=($real_img_x * $offset['x'] / 100);



                            $offset_y=($real_img_y * $offset['y'] / 100);

                            $thumb->crop($offset_x, $offset_y, $this->_cropX, $this->_cropY);

                            $thumb->save($imagePath);


    private function caclScale($url) {
            $originalFileSizeParams = @exif_read_data($url);
    //            //$originalFileSize = $originalFileSizeParams['FileSize'];
    //            Zend_Debug::dump($originalFileSizeParams);
    //            die();

            $this->_origignalHeight = $originalFileSizeParams['COMPUTED']['Height'];
            $this->_origignalWidth = $originalFileSizeParams['COMPUTED']['Width'];

            if ($this->_origignalWidth < $this->_cropX) {
                $scale = ($this->_cropX * 100) / $this->_origignalWidth;
            } else {
                $scale = 100;
            }
            return $scale;
        }
5

я действительно нашел ответ сам. Смещение, которое отправляет Facebook, указывается в процентах!

Следующее работает отлично -

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

Похожие вопросы