Contenedor de Fancybox que no se auto-dimensiona correctamente en las dimensiones de la imagen

Question

Tengo un problema con FancyBox. Se supone que cambia automáticamente el tamaño de la envoltura de acuerdo con las dimensiones de la imagen. No está haciendo eso. Específicamente es muy pequeño.

Aquí está el código FancyBox jQuery que he usado:

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

Tiene cualquier persona nunca con este problema?

Gracias de antemano por cualquier ayuda.

Answer 1

anterior no funcionó para mí (FB 3beta).

Esta es mi solución:

.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

lo descubrió ...

era mi CSS reset que estaba siendo disparado en marcha por el FancyBox CSS. Restablecé el estilo de tamaño de caja de DIV a 'caja de borde'.

La solución consistía en entrar en el CSS de FancyBox y declarar el tamaño del cuadro del DIV wrap, outer e inner como 'cuadro de contenido'.

así:

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

Esperemos que le ayudará a otra persona que se encuentra con esto.

Answer 3

Tuve el mismo problema con el HTML arbitrario que se muestra en la ventana emergente. He encontrado que esto era todo lo que era necesario para solucionarlo (cuando se utiliza reset.css de Eric Meyer) es la siguiente:

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

del código en el archivo reset.css fue este

body 
{ 
    line-height: 1; 
} 

responsabilidad: Probado solo en IE9 y Chrome, pero parece funcionar. Esto es para lo que sea que sea la última versión de fancybox al momento de escribir.

Answer 4

También encontré que deshacerse del reajuste global para caja de tamaño ayudó:

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

La parte molesta es encontrar todos los artículos que confiaban en border-box y luego habilitándolo solo para esos elementos. Afortunadamente para mí solo había 3 ... que he encontrado hasta ahora. Firebug/Developer Tools ayudó mucho a resolverlo.