Оболочка Fancybox неправильно подбирает размеры к размерам изображения - PullRequest
Новая
       21

Оболочка Fancybox неправильно подбирает размеры к размерам изображения

8 голосов
/ 19 октября 2010

У меня проблема с FancyBox. Предполагается автоматическое изменение размера оболочки в соответствии с размерами изображения. Это не так. В частности, он слишком маленький.

Вот код FancyBox jQuery, который я использовал: 

$("a[rel=photo_gallery]").fancybox({
    'type'              : 'image',
    'padding'           : 10,
    'autoScale'         : true,
    'cyclic'            : true,
    'overlayOpacity'    : 0.7,
    'overlayColor'      : '#000000',
    'transitionIn'      : 'fade',
    'transitionOut'     : 'fade',
    'titlePosition'     : 'over',
    'titleShow'         : false,
    'resize'            : 'Auto'
});

Кто-нибудь еще сталкивался с этой проблемой?

Заранее спасибо за любую помощь.

Ответы [ 4 ]

17 голосов
/ 19 октября 2010

Разобрался ...

Это был мой сброс CSS, который был запущен FancyBox CSS.Я изменил стиль определения размеров блоков DIV на 'border-box'.

Исправление состояло в том, чтобы перейти в FancyBox CSS и объявить размер блока переноса, внешнего и внутреннего DIV как 'content-box'.

Вот так: 

#fancybox-wrap {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 20px;
z-index: 1101;
display: none;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
-safari-box-sizing: content-box;
box-sizing: content-box;
}

#fancybox-outer {
position: relative;
width: 100%;
height: 100%;
background: #FFF;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
-safari-box-sizing: content-box;
box-sizing: content-box;
}

#fancybox-inner {
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 1px;
padding: 0;
margin: 0;
outline: none;
overflow: hidden;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
-safari-box-sizing: content-box;
box-sizing: content-box;
}

Надеюсь, это поможет кому-то еще, кто столкнется с этим.

4 голосов
/ 09 ноября 2013

Выше не работал у меня (FB 3beta).

Это мое решение: 

.fancybox-wrap, .fancybox-wrap *{
    -moz-box-sizing: content-box !important;
    -webkit-box-sizing: content-box !important;
    -safari-box-sizing: content-box !important;
    box-sizing: content-box !important;
}
1 голос
/ 03 сентября 2014

Я также обнаружил, что избавление от глобального сброса для определения размеров ящика помогло: 

/*
*,
input[type="search"] {
-webkit-box-sizing: border-box;
-moz-box-sizing:    border-box;
box-sizing:         border-box;
*/

Раздражающая часть находит все элементы, которые полагались на рамку, а затем включает его для ПРОСТОПредметы.К счастью для меня было только 3 ... которые я нашел до сих пор.Firebug / Developer Tools очень помогли понять это.

1 голос
/ 03 февраля 2013

У меня была такая же проблема с произвольным отображением HTML во всплывающем окне. Я обнаружил, что это все, что было необходимо для исправления (при использовании reset.css Эрика Мейера): 

.fancybox-overlay
{
    line-height: normal;    
}

Код ошибки в файле reset.css был таким 

body 
{
    line-height: 1;
}

Отказ от ответственности: протестировано только в IE9 и Chrome, но, похоже, работает. Это для любой последней версии fancybox на момент написания.

...