Owijarka Fancybox nie automatycznie dopasowuje rozmiar do wymiarów obrazu

Question

Mam problem z FancyBox. Ma automatycznie zmienić rozmiar opakowania zgodnie z wymiarami obrazu. To nie robi tego. W szczególności jest za mały.

Oto kod jQuery Fancybox Użyłem:

$("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' 
}); 

Czy ktoś kiedykolwiek napotkasz ten problem?

Z góry dziękuję za pomoc.

Answer 1

Powyżej nie działa dla mnie (FB 3beta).

To jest moje rozwiązanie:

.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; 
} 

Answer 2

Zdobione ...

To był mój Reset CSS który został wyzwolony-up przez fancybox CSS. Zresetowałem styl rozmiarów skrzynek DIV do 'border-box'.

Poprawka polegała na przejściu do kodu CSS FancyBox i zadeklarowaniu, że rozmiar ramki wewnątrz, na zewnątrz i wewnątrz DIV jest "treścią".

tak:

#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; 
} 

Mamy nadzieję, że pomoże ktoś inny, który działa w ten.

Answer 3

Miałem ten sam problem z arbitralnym wyświetlaniem HTML w popupie. Znalazłem to było wszystko, co było konieczne, aby ją naprawić (przy użyciu reset.css Eric Meyer) jest taka:

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

Kod wykraczająca w pliku reset.css było to

body 
{ 
    line-height: 1; 
} 

Zastrzeżenie: Testowane tylko w IE9 i Chrome - ale wygląda na to, że działa. Jest to zgodne z najnowszą wersją fancybox w momencie pisania.

Answer 4

Ja również okazało się, że pozbycie się globalnego resetu do box-zaklejania pomógł:

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

Irytujące część jest znalezienie wszystkich przedmiotów, które zostały ufających na obramowaniu, a następnie włączając go TYLKO dla tych pozycji. Na szczęście dla mnie było tylko 3 ... które znalazłem do tej pory. Firebug/Developer Tools bardzo pomogły mu to rozgryźć.