✔ lightbox: nextlabel und prevlabel positionieren?

Status
Nicht offen für weitere Antworten.
T

Teufelskerl1977

Mitglied
Möchte gerne beim Einsatz von Lightbox den Prevlabel und Nextlabel so positionieren, dass er zwar dauerhaft sichtbar ist aber nicht "über" dem Bild steht.

Das Label soll quasi außerhalb des Bildcontainers stehen.

Hier der CSS Code
Code: 
#lightbox{
	position: absolute;
	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: 20;
	}
#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, #prevLink:hover, #prevLink:visited:hover { background: url(../lightbox/images/prevlabel.png) left 55% no-repeat; }
#nextLink, #nextLink:hover, #nextLink:visited:hover { background: url(../lightbox/images/nextlabel.png) right 55% no-repeat; 

}


#imageDataContainer{
	font: 10px Century Gothic, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%;	
	border-top: 1px solid #666;
	}

#imageData{	padding:0 10px; color: #666; }
#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;
	}
 
Dann werf mal einen Blick in den Code von lightbox.js, wie sich die Lightbox im einzelnen zusammensetzt, in welchem Container sich die beiden Nav-Buttons befinden, und überleg dir, in welchem sie deiner Vorstellung nach untergebracht werden müssten:
lightbox.js hat gesagt.:
Javascript: 
        // Code inserts html at the bottom of the page that looks similar to this:
        //
        //  <div id="overlay"></div>
        //  <div id="lightbox">
        //      <div id="outerImageContainer">
        //          <div id="imageContainer">
        //              <img id="lightboxImage">
        //              <div style="" id="hoverNav">
        //                  <a href="#" id="prevLink"></a>
        //                  <a href="#" id="nextLink"></a>
        //              </div>
        //              <div id="loading">
        //                  <a href="#" id="loadingLink">
        //                      <img src="images/loading.gif">
        //                  </a>
        //              </div>
        //          </div>
        //      </div>
        //      <div id="imageDataContainer">
        //          <div id="imageData">
        //              <div id="imageDetails">
        //                  <span id="caption"></span>
        //                  <span id="numberDisplay"></span>
        //              </div>
        //              <div id="bottomNav">
        //                  <a href="#" id="bottomNavClose">
        //                      <img src="images/close.gif">
        //                  </a>
        //              </div>
        //          </div>
        //      </div>
        //  </div>
Zum Vergrößern anklicken....

Demnach müsstest du den Script-Code umschreiben. Und ob das zum gewünschten Ergebnis führt, vermag ich nicht beurteilen.

mfg Maik
 
Sorry, verstehe ich mal wieder nicht. Den Code den ich oben gepostet habe, steht in meiner css Datei auf der mein HTML basiert. Also das css der lightbox ist in meine "Layout-css" integriert. Dort muss ich doch die Eigenschaften angeben können...oder?

Denke das hier was geändert werden müsste, oder
#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, #prevLink:hover, #prevLink:visited:hover { background: url(../lightbox/images/prevlabel.png) left 55% no-repeat; }
#nextLink, #nextLink:hover, #nextLink:visited:hover { background: url(../lightbox/images/nextlabel.png) right 55% no-repeat;

}
Zum Vergrößern anklicken....

Es geht ja um die Positionierung der beiden png Dateien
 
Wie gesagt, schau dir den Code der JS-Datei lightbox.js genauer an, die die Lightbox generiert.

Hier ist es nicht damit getan, im Stylesheet die Positions-Einstellungen umzuschreiben, um die Nav-Buttons links und rechts außen des Bildcontainers #imageContainer platzieren zu können. Der Block #hoverNav müßte hierfür zumindest erstmal aus dem Block #imageContainer herausgenommen und in den übergeordneten Block #outerImageContainer eingesetzt werden.

Für einen der beiden "Prev/Next"-Buttons wäre es ein Leichtes, da sich #hoverNav mit einem negativen left/right-Wert wie gewünscht außerhalb des Bildcontainers positionieren lässt, nur verschiebt sich damit der gegenüberliegende Button trotz negativem left/right-Wert weiter nach rechts/links über das Bild, denn der umschliessende Block #hoverNav besitzt eine relative Breitendefinition (100%), die sich durch die Breite des geladenen Bildes ergibt.

[edit]
Zum Gucken:
  • Linksbündig
Code: 
#hoverNav{
	position: absolute;
	top: 0;
	left: -55px;
	height: 100%;
	width: 100%;
	z-index: 20;
	}
#imageContainer>#hoverNav{ left: -55px;}

#prevLink { left: -55px; float: left;}
#nextLink { right: -110px; float: right;}
  • Rechtsbündig
Code: 
#hoverNav{
	position: absolute;
	top: 0;
	right: -55px;
	height: 100%;
	width: 100%;
	z-index: 20;
	}
#imageContainer>#hoverNav{ right: -55px;}

#prevLink { left: -110px; float: left;}
#nextLink { right: -55px; float: right;}
[/edit]

mfg Maik
 
Mir ist da eben etwas eingefallen ;-)

Code: 
#outerImageContainer{
	position: relative;
	/*background-color: #fff;*/
	width: 250px;
	height: 250px;
	margin: 0 auto;
	padding: 0 55px;
	}

#imageContainer{
	padding: 10px;
	background-color: #fff;
		}


Die Sache hat nur einen Haken: Der fließende / weiche Überblendeffekt der Lightbox ist jetzt flöten :p

mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück