Der Fancybox-Wrapper passt sich nicht automatisch an Bilddimensionen an - jquery-plugins, fancybox, Autosize

Ich habe ein Problem mit FancyBox. Es soll die Größe des Wrappers entsprechend den Abmessungen des Bildes automatisch ändern. Das macht 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"
});

Ist noch jemand auf dieses Problem gestoßen?

Vielen Dank im Voraus für jede Hilfe.

Antworten:

4 für die Antwort № 1

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

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

---

17 für die Antwort № 2

Herausgefunden ...

Es war mein CSS-Reset, der vom FancyBox-CSS ausgelöst wurde. Ich habe den Box-Sizing-Stil von DIVs auf "Border-Box" zurückgesetzt.

Der Fix bestand darin, in das FancyBox-CSS zu gehen und die Boxgröße des Wrap-, äußeren und 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 hilft das jemand anderem, der darauf stößt.

---

1 für die Antwort № 3

Ich hatte das gleiche Problem mit beliebigem HTML, das im Popup angezeigt wird. Ich fand, dass dies alles war, was nötig war, um das Problem zu beheben (bei Verwendung von Eric Meyers reset.css):

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

Der fehlerhafte Code in der Datei reset.css war dieser

body
{
line-height: 1;
}

Haftungsausschluss: Nur in IE9 und Chrome getestet - aber es scheint zu funktionieren. Dies gilt für die neueste Version von Fancybox zum Zeitpunkt des Schreibens.

---

1 für die Antwort № 4

Ich fand auch, dass es hilfreich war, den globalen Reset für die Box-Größe loszuwerden:

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

Der nervige Teil ist, alle Gegenstände zu finden, dieIch habe mich auf Border-Box verlassen und es dann für NUR diese Elemente aktiviert. Zum Glück gab es nur 3 ... die ich bisher gefunden habe. Firebug / Developer Tools haben mir jedoch sehr geholfen, es herauszufinden.

---