Fancybox Positioning Inside Facebook Canvas iFrame

Question

ОК, поэтому у меня есть приложение для холста iframe с его высотой, установленной на «Устанавливаемый» с помощью вызовов 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 равна 1058 пикселей, а браузер пользователей - только 650 пикселей).

Есть ли способ, чтобы 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 заменить возврата резь; с:

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

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

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

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

Answer 3

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

Answer 4

В Facebook JavaScript API Карт Google предоставляет информацию страницы, то мы могли бы использовать его, так

найти

_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 5

Вот один из способов сделать это путем установки FancyBox относительно положения другого элемента, в моем случае очередь завершения загрузки в очереди, которая отображает ссылку вида после загрузки пользователем изображения.

имеет блочный стиль с набором ID, как так:

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

Затем ссылка, чтобы открыть FancyBox вызывает функцию с именем изображения, шириной и высотой, чтобы установить содержание и размеры. Важной частью является позиционирование. Получив позицию очереди полного div, создав новое объявление класса (причудливое положение), добавив его в блок стиля ДО ТОГО, что fancybox загружает (! Important в классе переопределяет позиционирование из 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' 
    }); 
}