Lapje
Threadersteller
Dabei seit: 17.06.2003
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 09.05.2006 06:20
Titel Probleme mit Iframe und Lightbox |
|
|
Morgen allerseits...
Habe ein Problem welches ich die Nacht über versucht habe zu lösen, aber keinen Schritt weiter gekommen bin.
Folgendes:
> h i e r <
Wenn ihr dort auf MOUNTAINBIKES geht und auf das Bild vom ersten Rad klick (BAD BEAST) dann wird ein großes Bild des Rades gezeigt. Beide Bilder kommen aus einer Datenbank und werden per PHP abgefragt. Das ganze habe ich per JS (Lightbox) gelöst. Dieses Script legt das Bild "über" den eigentlichen Frame. Das Problem dabei ist jetzt nur dass das Bild über den iframe in der Mitte gelegt wird. Ich möchte es aber über die komplette Seite legen. Also quasi oberste Ebene. Ich habe schon Sachen wie "target" und diverse "div"-Tags ausprobiert, aber keines hat den erwünschten Erfolg gebracht.
Der momentane PHP-Code sieht übrigens so aus:
Code: | echo '<a href="images/bikes/' . $datensatz["rad_mb_link_bild"] . '_gross.jpg" rel="lightbox" border="0"><img src="images/bikes/' . $datensatz["rad_mb_link_bild"] . '.jpg" width="250" height="150" border="0"></a>'; |
Eine andere Idee wäre die LIGHTBOX so umzuschreiben dass sie genau in das Iframe passt. Das würde auch schon ausreichen. Aber da weiss ich genau ob Angaben dafür in den JS-Dateien oder in der CSS-Datei liegen. Ich poste das ganze einfach mal:
Code: | #lightbox{
position: absolute;
top: 0px;
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: 50px;
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(../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(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
}
#imageData{
padding:0 10px;
}
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; }
#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 */
}
|
WIe gesagt, ich bin mit meinem Latein am Ende. Es würdemich nicht mal wundern wenn die Lösung recht einfach wäre. Daher habe ich das ganze jetzt mal hier gepostet, da ich denke dass es sich um ein reines HTML-Prob handelt.
besten dank
Lapje
Zuletzt bearbeitet von Lapje am Di 09.05.2006 07:22, insgesamt 3-mal bearbeitet
|
|