Il wrapper Fancybox non esegue il ridimensionamento automatico delle dimensioni dell'immagine

Question

Ho riscontrato un problema con FancyBox. Dovrebbe ridimensionare automaticamente il wrapper in base alle dimensioni dell'immagine. Non lo sta facendo. Specificamente è troppo piccolo.

Ecco il codice Fancybox jQuery che ho usato:

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

Qualcun altro ha mai eseguito in questo problema?

Grazie in anticipo per qualsiasi aiuto.

Answer 1

Sopra non ha funzionato per me (FB 3beta).

Questa è la mia soluzione:

.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

capito ...

Era la mia ripristino CSS che veniva scattato-up da parte del Fancybox CSS. Ho ripristinato lo stile di ridimensionamento della casella di DIV in 'border-box'.

La soluzione era quella di passare al CSS FancyBox e dichiarare il riquadrato di riquadri wrap, outer e DIV interno come "content-box".

Come così:

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

Speriamo che vi aiuterà a qualcun altro che corre in questo.

Answer 3

Ho avuto lo stesso problema con l'HTML arbitrario visualizzato nel popup. Ho trovato questo era tutto ciò che era necessario per risolvere il problema (quando si utilizza reset.css di Eric Meyer) è questo:

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

Il codice incriminato nel file reset.css stato questo

body 
{ 
    line-height: 1; 
} 

di responsabilità: Testato solo su IE9 e Chrome, ma sembra funzionare. Questo è per qualunque sia l'ultima versione di fancybox al momento della scrittura.

Answer 4

Ho anche scoperto che sbarazzarsi del reset globale per box-dimensionamento ha aiutato:

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

La parte fastidiosa è trovare tutti gli elementi che fa affidamento su border-box e quindi abilitandolo per JUST quegli articoli. Fortunatamente per me c'erano solo 3 ... che ho trovato finora. Firebug/Developer Tools ha aiutato molto a capirlo però.