Lightbox Script verschieben

[Jogi]

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