✔ Eine Art von Frame?

N

noise1987

Grünschnabel
Hallo zusammen,

wie es wohl immer moderner wird, gibt es bei einer Vielzahl von Webseiten neuerdings die Möglichkeit z.B. bei Bildern - das wenn man diese vergrößern möchte, das der Hintergrund erdunkelt und im "Vordergrund" das Bild bzw. eine Galerie etc. erscheint. Kann man dies auch nutzen um eine komplette Seite anzeigen zulassen (z.B. Gästebuch, Forum etc.) Wenn ja, wie?

Bitte entschuldigt mich wenn das evtl nichts mit HTML zutun haben sollte, allerdings weiß ich nicht unterwelchem Stichwort ich suchen muss bzw. in welchen Bereich es gehört.

Liebe Grüße
Noise
 
Hi,

noise1987 hat gesagt.:
Bitte entschuldigt mich wenn das evtl nichts mit HTML zutun haben sollte, allerdings weiß ich nicht unterwelchem Stichwort ich suchen muss bzw. in welchen Bereich es gehört.
Zum Vergrößern anklicken....

die Dinger heißen z.B. Lightbox, Lytebox, Slimbox, Fancybox, Thickbox, usw.
Einige davon sind auch dafür ausgelegt, beliebigen Content anzuzeigen. Google einfach mal danach und schau sie Dir an.

Da dies mit reinem HTML nicht möglich, sondern mit Javascript realisiert ist, nehm ich Dich mal mit nach nebenan. ;)

LG
 
Hallo zusammen, viele Dank für die flotten Antworten!
Jetzt habe ich mehr oder weniger die "ganze Nacht" getüftelt, allerdings erziele ich dabei keinen Erfolg, obwohl es mir eigentlich garnicht so schwer vorkommt.

Ich benutze in diesem Fall die Fancybox (http://fancybox.net/home)

Unter Usage wird erklärt, wie man wo - was hinzukopieren hat.

1. Include nessesary JS files

Code: 
<script type="text/javascript" src="path-to-file/jquery.js"></script> 
<script type="text/javascript" src="path-to-file/jquery.fancybox.js"></script>

Optional, add if you wish to use fancy transitions as jQuery by default supports only "swing" and "linear"
Code: 
<script type="text/javascript" src="path-to-file/jquery.easing.js"></script>

2. Add FancyBox CSS file
Don`t forget to change image paths if CSS file is not in the same directory as images used by FancyBox

Code: 
<link rel="stylesheet" href="path-to-file/fancybox.css" type="text/css" media="screen">
Zum Vergrößern anklicken....


Alle relevanten Daten habe ich zunächst in den Ordner kopiert.

Im <head>
JS -> in Quellcode eingefügt, Pfad angepasst
CSS-> ebenfalls eingefügt, angepasst


Nun im Body einen Link mit deren Vorgaben erstellt:
<a href="http://www.google.com?iframe">This goes to iframe</a>

or

<a class="iframe" href="http://www.google.com">This goes to iframe</a>
Zum Vergrößern anklicken....

In dem Fall habe ich, da ich es selbst schon nicht schaffte (der Link wurde als _self ausgegeben, einfach aus dem Quelltext der "Herstellerseite" aus dem Beispiel den iframe Link herauskopiert.

Code: 
<td><a class="group" href="http://www.google.lv/webhp?ie=UTF-8&iframe"><img alt="" src="/data/9_s.jpg" /></a></td>

Damit funktioniert dies allerdings auch nicht.


Was bedeutet das class="" ? In der Anleitung steht das dort iframe verwendet werden soll, in deren eigenen Quelltext steht aber group - habe beides ausprobiert.

Könnt ihr mir weiterhelfen?
 
Zuletzt bearbeitet:
noise1987 hat gesagt.:
Code: 
<td><a class="group" href="http://www.google.lv/webhp?ie=UTF-8&iframe"><img alt="" src="/data/9_s.jpg" /></a></td>

Damit funktioniert dies allerdings auch nicht.
Zum Vergrößern anklicken....
Das Verweisziel wird in der Fancybox geladen, wenn zusätzlich im Dokumentheader das folgende Script eingebunden ist:
Code: 
<link rel="stylesheet" type="text/css" href="../jquery.fancybox/jquery.fancybox.css" media="screen" />
<script type="text/javascript" src="../jquery.fancybox/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../jquery.fancybox/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="../jquery.fancybox/jquery.fancybox-1.2.1.pack.js"></script>
<script type="text/javascript">
                $(document).ready(function() {
                        $("a").fancybox();
                });
</script>

In der Beispiel-Seite http://fancybox.net/example ist hierfür eine externe JS-Datei eingebunden -> http://fancybox.net/js/custom.js

Dieses Script ist aber auch im Quellcode der Beispiel-Seite von http://fancybox.googlecode.com/files/jquery.fancybox-1.2.1.zip enthalten.

mfg Maik
 
Ah... habe das wohl leider übersehen... habe mich schon gefragt wie bei klick auf den link erkannt werden soll das die Fancybox damit gemeint ist...

Aber super, funktioniert jetzt :-)

Vielen Dank für Eure hilfe :-)

Liebe Grüße
Noise
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück