Fancybox-Wrapper stimmt nicht automatisch auf Bildgröße ab

Question

Ich habe ein Problem mit FancyBox. Es sollte die Größe des Wrappers in Übereinstimmung mit den Abmessungen des Bildes automatisch anpassen. Das tut es nicht. Insbesondere ist es zu klein.

Hier ist der FancyBox jQuery Code, den ich verwendet habe:

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

Hat jemand jemals in dieser Frage laufen?

Vielen Dank im Voraus für jede Hilfe.

Answer 1

Oben hat bei mir nicht funktioniert (FB 3beta).

Dies ist meine Lösung:

.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

es heraus ...

Es war mein CSS zurückgesetzt, die von der FancyBox CSS ausgelöst-up wurde. Ich habe den Box-Sizing-Stil von DIV's auf 'border-box' zurückgesetzt.

Die Lösung bestand darin, in das FancyBox-CSS zu wechseln und die Boxgröße des Wraps, des äußeren und des inneren DIV als "content-box" zu deklarieren.

Wie so:

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

Hoffentlich jemand anderes, das läuft in diese helfen.

Answer 3

Ich hatte das gleiche Problem mit beliebigen HTML-Anzeigen im Popup. Ich fand das war alles, was notwendig war, um es zu beheben (wenn Eric Meyers reset.css verwendet wird), ist dies:

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

Der Code säumige in der reset.css Datei war

body 
{ 
    line-height: 1; 
} 

Haftungsausschluss: Getestet nur in IE9 und Chrome - aber es scheint zu funktionieren. Dies ist für was immer die neueste Version von Fancybox zum Zeitpunkt des Schreibens ist.

Answer 4

Ich fand auch das half für Box Verkleinerung des globalen Reset Loswerden:

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

Das lästige Teil alle Elemente findet, die unter Berufung wurden auf der Rahmen-Box und dann für JUST diese Elemente aktivieren. Zum Glück für mich gab es nur 3 ... die ich bisher gefunden habe. Firebug/Developer Tools haben viel dazu beigetragen, es herauszufinden.