Плагин jQuery fancybox не в центре сафари или хрома, а в Firefox - PullRequest
Новая
       50

Плагин jQuery fancybox не в центре сафари или хрома, а в Firefox

1 голос
/ 26 марта 2010

Я только что установил fancybox на свой сайт, и он отлично работает в Firefox, но когда я пробую его в Chrome и Safari, fancybox не центрируется в окне браузера.

Есть идеи?

Вы можете посмотреть демонстрацию по адресу:

http://kotyy.com/kotyy/lindseyandasp/test2.xhtml

Ответы [ 5 ]

7 голосов
/ 04 августа 2010

У меня была такая же проблема, используя лайтбокс 1.3.1 и jquery 1.4.2.

После недолгого просмотра кода я обнаружил проблему в функции fancybox_get_viewport. Он определяет текущий видовой экран, используя $ (window) .width () и $ (window) .height (). Проблема в том, что в Chrome и Safari эта функция возвращает ширину и высоту документа. В Opera тоже см. http://updatepanel.net/2009/02/20/getting-the-page-and-viewport-dimensions-using-jquery/

Обойти это легко. Используйте window.innerHeight ? window.innerHeight : $(window).height();

Вот модифицированная функция, замените ее в jquery.fancybox-1.3.1.js: 

fancybox_get_viewport = function() {
    return [ (window.innerWidth ? window.innerWidth : $(window).width()), 
         (window.innerHeight ? window.innerHeight : $(window).height()),
         $(document).scrollLeft(), $(document).scrollTop() ];
},
......
7 голосов
/ 15 сентября 2011

Ответ выше не работал для меня. Я просто использовал $.fancybox.center(true);, чтобы исправить проблему при открытии fancybox. Раньше только иногда это было бы центром. Или это будет в центре после того, как я изменил размер окна просмотра. Редактировать : Я полагаю, что эта ошибка немного отличается от рассматриваемой, поскольку она возникает в Firefox, IE, Chrome, во всем. 

$('a.whatever').fancybox({
  //Your options here...
  onComplete: function(links, index) {
    //leave this at the bottom
    $.fancybox.center(true);
  }
});
2 голосов
/ 18 июня 2013

Я также использую Fancybox 1.3.4 и, чтобы решить, я сделал что-то похожее на то, что было предложено выше, однако в 1.3.4 функция немного отличалась - на случай, если возникнут вопросы, почему я не использую Fancybox 2 - это просто из-за новой лицензии. Надеюсь, это поможет: 

_get_viewport = function() {
    return [
        (window.innerWidth?window.innerWidth:$(window).width()) - (currentOpts.margin * 2),
        (window.innerHeight?window.innerHeight:$(window).height()) - (currentOpts.margin * 2),
        $(document).scrollLeft() + currentOpts.margin,
        $(document).scrollTop() + currentOpts.margin
    ];
},
0 голосов
/ 30 марта 2018

В последней версии (3) добавить 

 parentEl: 'html'

в опциях. Я использую специальный двухпанельный макет магазина с веб-сайта, и он не центрируется, потому что контейнер загружается в корпус и зависит от его высоты. Добавление его в тег html вместо этого исправляет это.

0 голосов
/ 26 марта 2010

Ненавижу отвечать на мой собственный вопрос, но, возможно, это поможет другому. Я добавил обертку к своему контенту, и теперь она отлично работает.

...