L'encapsuleur Fancybox n'est pas dimensionné correctement en fonction des dimensions de l'image

Question

Je rencontre un problème avec FancyBox. Il est supposé redimensionner automatiquement le wrapper en fonction des dimensions de l'image. Ce n'est pas ça. Plus précisément, c'est trop petit.

Voici le code FancyBox jQuery Je l'ai utilisé:

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

Quelqu'un at-il déjà rencontré ce problème?

Merci d'avance pour toute aide.

Answer 1

ci-dessus.

C'est ma solution:

.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

figured it out ...

Il était mon reset CSS qui a été déclenché par le-FancyBox CSS. J'ai réinitialisé le style de dimensionnement des boîtes de DIV à «border-box». Le correctif consistait à aller dans le CSS FancyBox et à déclarer que le dimensionnement de la boîte de dialogue DIV, enveloppe externe et interne était «boîte de contenu».

comme ceci:

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

Espérons que cela aidera quelqu'un d'autre qui se jette dans cela.

Answer 3

J'ai eu le même problème avec l'affichage HTML arbitraire dans le popup. J'ai trouvé c'était tout ce qu'il fallait pour y remédier (lors de l'utilisation de reset.css de Eric Meyer) est le suivant:

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

Le code incriminé dans le fichier reset.css était ce

body 
{ 
    line-height: 1; 
} 

Avertissement: Testé uniquement dans IE9 et Chrome - mais il semble fonctionner. Ceci est pour quelle que soit la dernière version de fancybox au moment de l'écriture. Ci-dessus ne fonctionnait pas pour moi (FB 3beta) ci-dessus

Answer 4

Je trouve aussi que se débarrasser de la remise à zéro globale pour box-sizing aidé:

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

La partie ennuyeuse est de trouver tous les éléments qui ont été fiés sur border-box et en l'activant pour JUST ces éléments. Heureusement pour moi il n'y avait que 3 ... que j'ai trouvé jusqu'ici. Firebug/Developer Tools a beaucoup aidé à comprendre.