nicht angemeldet
Lightbox Script verschieben
Hallo liebe Forumsgemeinde,
ich möchte das Lightbox Script (http://dynamicdrive.com/dynamicindex4/lightbox2/index.htm) zur Anzeige von Bildern auf einer Website verwenden. Das Script ist so konzipiert, dass es sich immer absolut mittig im Browser öffnet. Das dürfte den meisten Leuten Gefallen, bei mir ist es jedoch wichtig, dass sich das Bild-Fenster vom linken Rand aus 180px entfernt öffnet und nicht mittig.
Ich habe mir daher die CSS-Datei angesehen und etwas angepasst.
Hier einmal der Link zur Originalversion:
http://www.vfl-tegel.de/lightbox/1/
und die passende CSS-Datei
#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: 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; 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;
}
/* Min-Width */
.lbWidth { /* most browsers */
position: absolute;
top: 0px; left: 0px;
width: 100%;
min-width: 790px;
}
* html .lbContent { /* IE6 */
margin-left: -790px;
position:relative;
}
* html .lbMinWidth { /* IE6 */
padding-left: 790px;
}
/* Clearfix */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
und hier kommt die von mir geänderte Version:
http://www.vfl-tegel.de/lightbox/2/
und die geänderte CSS, wobei nur #OuterImageContainer und #imageDataContainer verändert wurden:
#lightbox{
position: absolute;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}
#lightbox a img{ border: none; }
#outerImageContainer{
position: absolute;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
left:180px;
}
#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{
position:absolute;
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
left:180px;
}
#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;
}
/* Min-Width */
.lbWidth { /* most browsers */
position: absolute;
top: 0px; left: 0px;
width: 100%;
min-width: 790px;
}
* html .lbContent { /* IE6 */
margin-left: -790px;
position:relative;
}
* html .lbMinWidth { /* IE6 */
padding-left: 790px;
}
/* Clearfix */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
Die Änderungen sorgen dafür, dass das Bild tatsächlich 180pixel vom linken Rand entfernt wird, allerdings wird die sich am Ende öffnende Leiste mit dem Close Element jetzt nicht mehr unten an das Bild angehängt, sondern es öffnet sich oben in das Bild hinein. Kann da jemand den Fehler sehen?
Vielen Dank von Jogi
-
Hallo,
Das Script ist so konzipiert, dass es sich immer absolut mittig im Browser öffnet. Das dürfte den meisten Leuten Gefallen, bei mir ist es jedoch wichtig, dass sich das Bild-Fenster vom linken Rand aus 180px entfernt öffnet und nicht mittig.
hab gerade ein eigenes, sehr viel schlankeres "Box-Script" angepasst, allerdings passend zur Ausbau-Seite auch mittig.
Mittig positioniert wird ja für neuere/aktuelle Browser oft über margin, den von dir gewünschten Abstand kannst du so auch realisieren. Die betr. Elemente sollten in deinem Fall outerImageContainer und imageDataContainer sein.
Grüsse
Cyx23