Facebox aus iFrame über ganze Seite legen

B

borsti87

Grünschnabel
Hallo,

ich möchte gerne eine auf jQuery basierende Facebox aus einem iFrame heraus öffnen, so das sich die Facebox über die ganze Seite legt und nicht nur über den iFrame.
Wie kann ich das lösen?

Gruß
Borsti87
 
Hi Maik,

die Lytebox würde mir da schon ganz gut gefallen, doch wie bekomme ich es hin das sie sich in der Größe dem Inhalt der zu öffnenden HTML-Seite anpasst, wie es die Facebox macht?

Ergänzung:
wobei optisch gefällt mir die Facebox doch noch eine ganze Ecke besser!
Gibt es den da keine Möglichkeit die aus einem iFrame zu laden?

Mfg
borsti87
 
Zuletzt bearbeitet:
Hi,

binde das facebox-PlugIn in das Dokument ein, in das der iFrame eingebettet ist.

Im iFrame-Dokument rufst du die Methode facebox aus dem Hauptdokument auf.

Beispiel (Bild öffnen):
Code: 
<button onclick="top.jQuery.facebox({image: 'bild.gif'}); return false;">show</button>

Die Möglichkeit AJAX-Inhalte zu öffnen findest du zu Beginn des facebox-JS unter "Usage".

Ciao
Quaese
 
Hi,
borsti87 hat gesagt.:
Hi wie meinst du das mit der faxebox Methode im iFrame us dem Hauptdokument aufrufen?
Zum Vergrößern anklicken....

So, wie Quaese es dir erläutert, und anhand seines Codebeispiels demonstriert hat :)

  • index.html (Hauptdokument)
HTML: 
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script src="facebox.js" type="text/javascript"></script>
<link href="facebox.css" media="screen" rel="stylesheet" type="text/css">
</head>
<body>
    <iframe src="iframe_doc.html"></iframe>
</body>
</html>
  • iframe_doc.html (iFrame-Dokument)
HTML: 
<html>
<body>
    <form>
        <button onclick="top.jQuery.facebox({image: 'bild.gif'}); return false;">show</button>
    </form>
</body>
</html>
Code: 
* Usage:

* ...

*  You can also use it programmatically:
*
*    jQuery.facebox('some html')
*
*  The above will open a facebox with "some html" as the content.
*
*    jQuery.facebox(function($) {
*      $.get('blah.html', function(data) { $.facebox(data) })
*    })
*
*  The above will show a loading screen before the passed function is called,
*  allowing for a better ajaxy experience.
*
*  The facebox function can also display an ajax page or image:
*
*    jQuery.facebox({ ajax: 'remote.html' })
*    jQuery.facebox({ image: 'dude.jpg' })
*
Zum Vergrößern anklicken....

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück