Fancybox Позиционирование Внутри Facebook Холст iFrame

Question

ОК, поэтому у меня есть приложение iframe canvas, высота которого установлена ​​на «Устанавливаемый», а вызовы javascrip sdk в Facebook FB.Canvas.setSize (); и FB.Canvas.setAutoGrow (); .Они работают отлично, так как iframe настроен на определенную высоту пикселя в зависимости от его содержимого.

Проблема в том, что когда я звоню в Fancybox, он позиционирует себя на основе этой высоты.Я знаю, что это именно то, что он должен делать, поскольку fancybox jQuery возвращает окно просмотра следующим образом:

(строка 673 последней версии jquery.fancybox-1.3.4.js ):

_get_viewport = function() {
return [
    $(window).width() - (currentOpts.margin * 2),
    $(window).height() - (currentOpts.margin * 2),
    $(document).scrollTop() + currentOpts.margin
];
},

Но проблема в том, что iframe будет для многих зрителей длиннее окна браузера.Таким образом, Fancybox центрируется в iframe и заканчивается лишь частично видимым для большинства зрителей.(т.е. высота iframe равна 1058px, а пользовательский браузер, скажем, только 650px).

Есть ли способ заставить fancybox просто рассчитать физическую высоту браузера?Или мне нужно изменить некоторые настройки в моем приложении на холсте Facebook, чтобы оно работало?

Мне нравится, что единственная полоса прокрутки - та, что на Facebook (если хотите, родительская).

Все предложения с благодарностью!

Answer 1

Для fancybox 2 попробуйте:

найти:

_start: function(index) {

и заменить на:

_start: function(index) {
    if ((window.parent != window) && FB && FB.Canvas) {
        FB.Canvas.getPageInfo(
            function(info) {
                window.canvasInfo = info;
                F._start_orig(index);
            }
        );
    } else   {
        F._start_orig(index);
    }
},

_start_orig: function (index) {

Затем в функции getViewport replace return rez; с:

if (window.canvasInfo) {
    rez.h = window.canvasInfo.clientHeight;
    rez.x = window.canvasInfo.scrollLeft;
    rez.y = window.canvasInfo.scrollTop - window.canvasInfo.offsetTop;
}

return rez;

и, наконец, в _getPosition функция заменить строку:

} else if (!current.locked) {

на:

} else if (!current.locked || window.canvasInfo) {

Answer 2

Поскольку Facebook js api предоставляет информацию о странице, то мы можем использовать ее, поэтому

найти

    _start = function() {

заменить на

    _start = function() {
        if ((window.parent != window) && FB && FB.Canvas) {
            FB.Canvas.getPageInfo(
                function(info) {
                    window.canvasInfo = info;
                    _start_orig();
                }
            );
        } else   {
            _start_orig();
        }
    },

    _start_orig = function() {

, а также изменить функцию _get_viewport

    _get_viewport = function() {
        if (window.canvasInfo) {
            console.log(window.canvasInfo);
            return [
                $(window).width() - (currentOpts.margin * 2),
                window.canvasInfo.clientHeight - (currentOpts.margin * 2),
                $(document).scrollLeft() + currentOpts.margin,
                window.canvasInfo.scrollTop - window.canvasInfo.offsetTop + currentOpts.margin
            ];
        } else {
            return [
                $(window).width() - (currentOpts.margin * 2),
                $(window).height() - (currentOpts.margin * 2),
                $(document).scrollLeft() + currentOpts.margin,
                $(document).scrollTop() + currentOpts.margin
            ];
        }
    },

Answer 3

У меня была такая же проблема, я использовал 'centerOnScroll': true, и теперь он работает нормально ...

Answer 4

Вот один из способов сделать это, поместив Fancybox относительно позиции другого элемента, в моем случае это Div-файл очереди Uploadify, который отображает ссылку просмотра после того, как пользователь загрузил изображение.

Блок стилей с идентификатором набора выглядит так:

<style id="style-block">
body { background-color: #e7ebf2; overflow: hidden; }
</style>

Затем ссылка для открытия Fancybox вызывает функцию с именем изображения, шириной и высотой, чтобы установить содержимое и размеры. Важной частью является позиционирование. Получив положение очереди, завершив div, сгенерировав новое объявление класса (fancy-position), добавив его в блок стилей ДО загрузки fancybox (! Важный в классе переопределит позиционирование из fancybox), затем добавив новый класс с помощью Параметр wrapCSS в опциях fancybox, он размещает fancybox именно там, где я хочу.

function viewImage(image, width, height) {
    var complete_pos = $('#image_queue_complete').position();
    var css_code = '.fancy-position { top: ' + complete_pos.top.toString() + 'px !important; }';
    $('#style-block').append(css_code);
    var img_src = '<img src="images/' + image + '" width="' + width.toString() + '" height="' + height.toString() + '" />';

    $.fancybox({
        content: img_src,
        type: 'inline',
        autoCenter: false,
        wrapCSS: 'fancy-position'
    });
}

Answer 5

Была такая же проблема.К счастью, fancybox доступен через CSS.Мое решение состояло в том, чтобы перезаписать расположение fancybox в моем файле CSS:

#fancybox-wrap {
    top:    20px !important;
}

Этот код размещает fancybox всегда на 20 пикселей от верхней части iframe.Используйте другой размер, если хотите.! Важный устанавливает это положение, даже если fancybox устанавливает положение динамически во время выполнения.