kleines Lightbox Problem

breakablewoman · 30. Oktober 2007

Hallo!

Ich habe ein kleines Problem mit der Lightbox 2, vorab das Script funktioniert einwandfrei... das einzige Problem was ich nun auf meiner Seite habe ist, dass ich ein iframe eingebaut habe.. d.h. die links funktionieren alle so, dass sie sich in dem iframe öffnen.

Das Lightbox Script soll von dem iframe geöffnet werden und zwar in der gesamten Größe (also, so groß wie das Bild eben ist) der index.html, denn das iframe hat nur etwa 1/3 der Breite wie die index.html (im Prinzip der Bildschirm). - Mein Problem dabei ist, dass es das nicht tut und das Bild somit nur in dem 1/3 größen iframe geöffnet wird und man somit nicht alles "frei" sehen kann.

Gibt's dafür ne Lösung, kann ich das irgendwie so verändern, dass es eben auf der index.html angezeigt wird Ich wäre um schnellmögliche Antwort dankbar!

Ist ein Projekt für die Schule, was morgen eigentlich fertig sein soll und ich Idioten hab mit solch' einem Problem, jetzt am Ende, absolut nicht gerechnet

Hilfe!

Danke schon einmal im Voraus,
Gruß Julia

Quaese · 30. Oktober 2007

Hi,

eine Möglichkeit wäre, sämtliche Lightbox-Dateien im Elterndokument einzubinden. Die erforderlichen Links
werden ebenfalls eingebunden - allerdings vesteckt.

Im iFrame-Dokument werden die notwendigen Links ebenfalls eingebunden - allerdings rufen sie über IDs ihre
Äquivalente im Elterndokument auf und starten somit den erforderlichen Lightbox-Effekt.

Elterndokument:

Code:

<html>
<head>
<meta name="author" content="Quaese">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen">

</head>
<body>
<iframe src="iframe_doc.html"></iframe>
<!-- Versteckte Lightbox-Links -->
<div style="display: none;">
  <!-- Kann im iFrame-Dokument über die ID "link_01" aufgerufen werden -->
  <a href="../bilder/fussball4.jpg" id="link_01" rel="lightbox" title="Soccer"><img src="../bilder/fussball4.jpg" width="60" height="61" border="0" alt=""></a>
  <a href="../bilder/fussball1.jpg" id="link_02" rel="lightbox[soccer]" title="Soccer"><img src="../bilder/fussball1.jpg" width="60" height="61" border="0" alt=""></a>
  <a href="../bilder/fussball2.jpg" id="link_03" rel="lightbox[soccer]" title="Soccer"><img src="../bilder/fussball2.jpg" width="60" height="61" border="0" alt=""></a>
  <a href="../bilder/fussball3.jpg" id="link_04" rel="lightbox[soccer]" title="Soccer"><img src="../bilder/fussball3.jpg" width="60" height="61" border="0" alt=""></a>
</div>
</body>
</html>

iFrame-Dokument (iframe_doc.html):

Code:

<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div>
  <!-- Ruft im Elterndokument den Lightbox-Effekt zum Element mit der ID "link_01" auf -->
  <a onclick="top.document.getElementById('link_01').onclick(); return false;" href="#"><img src="../bilder/fussball4.jpg" width="60" height="60" border="0" alt=""></a>
</div>
<div>
  <a href="../bilder/fussball1.jpg" onclick="top.document.getElementById('link_02').onclick(); return false;"><img src="../bilder/fussball1.jpg" width="60" height="60" border="0" alt=""></a>
  <a href="../bilder/fussball2.jpg" onclick="top.document.getElementById('link_03').onclick(); return false;"><img src="../bilder/fussball2.jpg" width="60" height="60" border="0" alt=""></a>
  <a href="../bilder/fussball3.jpg" onclick="top.document.getElementById('link_04').onclick(); return false;"><img src="../bilder/fussball3.jpg" width="60" height="60" border="0" alt=""></a>
</div>
</body>
</html>

Funktioniert bei mir im IE 6+7, im FF 1.5+2, sowie im Opera 9.

Vielleicht hilft dir das weiter.

Ciao
Quaese

kleines Lightbox Problem

breakablewoman

Quaese

Moderator

Neue Beiträge