Hallo,
ich benutzte Lightbox Vers. 2.0.4
Dabei habe ich ein kleines Problem. Wenn die Bilder vergrößert werden ist das Overlay viel zu groß sprich der Rahmen. Beim Beispiel des Herstellers war das Overlay nur ca. 15px rand.
Was mache ich bei mir falsch?
Hier der CSS Code
CSS
body
{margin-top: 0px; margin-left: 0px; margin-right: 0px;margin-bottom: 0px; padding:0px; height:100%;
background-image:url(images/sword_mit_inklusive.jpg);background-attachment:fixed;
background-repeat:no-repeat;background-position:160px 100% ;
background-color:#000;font-size: 100%;line-height: 125%;
font-family: arial, helvetica, tahoma ,verdana, sans-serif;}
h1{font-size: 17pt;line-height: 125%;
font-family: georgia,times,arial, helvetica, tahoma ,verdana, sans-serif;color:#A65E60;
margin-bottom:25px;margin-top:0px;
letter-spacing:1px;
font-style:italic;}
}#aussen{height:100%;
min-height: 100%;
height: auto !important;
}
#nav {background-image:url(images/backmen.png)!important;
;background-image:url(images/backmen.jpg);background-repeat:repeat;
height:100%;padding:20px 0px 0px 0px;
margin: 0px 0px 0px 0px;
vertical-align:middle;
width:200px;
border: 1px solid #800000;
position: absolute;
top: 0px;
left: 80px;
color:#fff;
_filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
#main {height:100%;
padding:20px 25px 20px 45px;
margin: 0px 70px 0px 300px;
vertical-align:top;
border: 1px solid #78324D;
background-image:url(images/back.png)!important;
background-image:url(images/back.jpg);
_filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
color:#A65E60;
}
#main p {text-align:justify;color:#;margin: 0px; }
/* menue links*/
#menu1 a , #menu1 a:visited , #menu1 a:active {display:block;
font-size: 13pt;line-height: 125%;
font-family: arial, helvetica, tahoma ,verdana, sans-serif;
color:#400000;
line-height:28px;
text-decoration:none ;
text-align:right;
width:200px;
}
#menu1 a:hover{
color:#fff;
text-decoration:none ;
background-image:url(images/cube1.png)!important;
background-image:url(images/cube1.gif);
}
/* scrolleiste internet explorer ab vers.5.5 */
body
{scrollbar-arrow-color: #000000; scrollbar-base-color: #ffffff;
scrollbar-highlight-color : #000000; scrollbar-shadow-color : #ffffff;
SCROLLBAR-TRACK-COLOR: #e6e6e6;}
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: 80%; height: 80%;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #380001; 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-image: url(data:image/gif;base64,AAAA); /* 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; overflow: auto; width: 100% ; }
#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; outline: none;}
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #380001; }Und hier der HTML Code:
HTML
<link rel="stylesheet" href="format.css" type="text/css">
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<td align="center" width="175" height="125"><a href="images/atsb00000.jpg" rel="lightbox[roadtrip]" ><img style="border: 0px solid ; width: 60px; height: 90px;" src="images/atsa00000.jpg" width: 60px; height: 90px; ></a></td>
<td align="center" width="175" height="125"><a href="images/atsb00001.jpg" rel="lightbox[roadtrip]" ><img style="border: 0px solid ; width: 60px; height: 90px;" src="images/atsa00001.jpg"></a></td>