Hallo liebe Community,
ich denke die meisten von euch kennen das Galerie-Script Lightbox. Ich benutze es nun auch für den Bau meiner neuen Website, die aus einem Hintergrundbild mit einem Frame besteht. Die kleinen Vorschaubilder der Lightbox werden im Frame aufgerufen, doch wenn man dann draufklickt soll sich die große Lightbox-Ansicht über die gesamte Homepage legen und nicht nur im Frame bleiben.
Wenn das möglich ist, dann stehe ich gerade auf dem Schlauch wo genau ich das in der File angeben muss...
CSS-File:
HTML-File:
Ich hoffe, mich kann jemand mir das Brett vor'm Kopf nehmen :->
Liebe Grüße,
Jana64
ich denke die meisten von euch kennen das Galerie-Script Lightbox. Ich benutze es nun auch für den Bau meiner neuen Website, die aus einem Hintergrundbild mit einem Frame besteht. Die kleinen Vorschaubilder der Lightbox werden im Frame aufgerufen, doch wenn man dann draufklickt soll sich die große Lightbox-Ansicht über die gesamte Homepage legen und nicht nur im Frame bleiben.
Wenn das möglich ist, dann stehe ich gerade auf dem Schlauch wo genau ich das in der File angeben muss...
CSS-File:
Code:
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#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-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: #000; }
HTML-File:
HTML:
<html>
<head>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</head>
<body>
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
</body>
</html>
Ich hoffe, mich kann jemand mir das Brett vor'm Kopf nehmen :->
Liebe Grüße,
Jana64