✔ Lightbox Problem...

[SonMiko]

Hallo zusammen,

ich habe - wie Ihr Euch denken könnt - ein kleines Problem mit meiner Lightbox auf meiener Page. Die Seite ist folgendermaßen aufgebaut:
Kopf-Bereich, Mittel-Bereich, Fuß-Bereich.
Im Kopfvereich verwende ich eine Flash-Navigation - der eine oder andere kann jetzt schon das Problem erahnen: in einem Unterpunkt komme ich zur Lightbox, diese öffnet sich allerdings immer unter der SWF-Datei, also von der Hirarchie.
Active-X Elemente werde immer ganz nach oben gelegt, das ist normal.
Um aber trotzdem meine Bilder normal anzeigen zu können könnte man doch theoretisch das Problem umgehen indem man der Lightbox in der CSS-Datei sagt, dass die Bilder sich nicht im Zentrum des Monitors aufbauen sollen, sondern jedes Mal die Höhe der oben liegenden SWF-Datei abgezogen werden soll (278px).
Kann mir jemand sagen wie ich das anstellen soll?

Hier der CSS-Code:

/*
LIGHTBOX STYLES
*/

#lightbox{
	position: absolute;
	top: 40px;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	}

#imageContainer{
	padding: 10px;
	}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
	}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(<?=$mgConf['pathtoscript']?>lightbox/images/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(<?=$mgConf['pathtoscript']?>lightbox/images/prevlabel.gif) left 15% no-repeat; background-position:top left; }
#nextLink:hover, #nextLink:visited:hover { background: url(<?=$mgConf['pathtoscript']?>lightbox/images/nextlabel.gif) right 15% no-repeat; background-position:top right }


#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	}

#imageData{
	padding:0 10px;
	color:#111;
	}
#imageData #imageDetails{ width: 60%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: auto; float: right;  padding-bottom: 0.7em;	}	
#imageData #continueSlideshow{ float:right; padding:0 10px 10px 0; }
#imageData #continueSlideshow img{ cursor:hand; cursor:pointer; }

#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	filter:alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
	}
	

.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}

* html>body .clearfix {
	display: inline-block; 
	width: 100%;
	}

* html .clearfix {
	/* Hides from IE-mac \*/
	height: 1%;
	/* End hide from IE-mac */
	}	

-->

Für Hilfe wäre ich wie immer sehr dankbar .

Besten Gruß Euch allen und ein schönes Wochenende wünsche ich,

Euer,


Mike

 

[Maik]

Hi,

möglicherweise lässt sich das Problem der "Hierarchie" (Schichtposition) so lösen:

<embed wmode="transparent"...>

<object ...>
   <param name="wmode" value="transparent">
</object>

mfg Maik

 

[SonMiko]

Hi Maik,

erstmal danke für die Antwort.
Wie darf ich den Lösungsansatz denn verstehen -
spielst du auf das SWF-Objekt und die Transparenz an?
Das dürfte soweit ich weiß nicht funktionieren - da die Inhalte die ich dann in Form von Vektoren auf der Bühne in Flash platziert habe, nicht transparent sind.

Eigentlich suche ich lediglich einen Lösungsansatz womit ich die Platzierung der sich öffnenden Ebenen in der Lightbox, um einen Höhenwert (278) herab zu setzen.

Dann würden sich die Bilder nämlich immer unterhalb der SWF Datei öffnen - so müsste ich nicht versuchen durch Ebenen zu verlagern oder die scheinbar kaum modifizierbaren Z-Werte eines Active-X Elementes anzupassen...

Also ich suche wie gesagt eine Lösung wie ich das Bild der Lightbox anders platzieren kann. Hast Du da einen Vorschlag? Es soll nur etwas herab gesetzt werden.
Vielleicht "padding-top:278px" oder sowas...

 

[Maik]

Das gleiche Problem ergibt sich beispielsweise, wenn ein Dropdown-Menü (in der Schichtposition) über einer Flash-Anwendung geöffnet werden soll: die Submenüs werden nämlich von ihr zunächst überdeckt, auch dann, wenn mit CSS und z-index eine höhere Schichtposition für das Menü festgelegt ist - mit obigen Erweiterungen ist das Problem jedoch gelöst.

Wenn du mit dem SWF-Object arbeitest, würde dann die Erweiterung für den JS-Code folgendermaßen lauten:

so.addParam("wmode", "transparent");

"so" ist hier der Name der Variablen - also bitte umbenennen, falls sie bei dir anders lautet.

Sollte dir das nicht weiterhelfen, musst du eben die Startposition der Lightbox ändern:

#lightbox{
	position: absolute;
	left: 0;
        top: 278px !important; /* top-Positionsangabe incl. !important-Regel */
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

mfg Maik

 

[SonMiko]

Hi Maik,

nochmal danke für die Hilfe.
Schöner ist dann wohl tatsächlich die erste Lösung - aber das kriege ich auf die Schnelle nicht hin. Vorrübergehend nutze ich also die Zweite, allerdings werde ich bei Zeit die zweite Alternative anwenden.

Dank Dir und besten Gruß,


Mike