Danke für das Hilfe Angebot. Doch ich habe das ganze nun mit Highslide gelöst. Dort war die Funktion für meine Sache eleganter gelöst und auch sehr einfach einzubinden.
Danke nochmal
Danke für das Hilfe Angebot. Doch ich habe das ganze nun mit Highslide gelöst. Dort war die Funktion für meine Sache eleganter gelöst und auch sehr einfach einzubinden.
Danke nochmal
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
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; }
Alles anzeigen
Und hier der HTML Code:
<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>
Alles anzeigen