Es gibt für mich im Web immer wieder Neues zu entdecken, so zum Beispiel das JavaScript/CSS Skript Greybox, ein eindrucksvolles PopUp-Fenster der talentierten Art. Greybox erzeugt Popups, die sich gut in den Browser integrieren und nicht nerven.
Der User muss die Seite nicht verlassen, da sie abgeblendet wird und das PopUp – Fenster sich nicht irgendwo, sondern am oberen Browserrand öffnet und dort kleben bleibt.
Es können ganze Webseiten oder Bilder angezeigt werden. Der Schreiber dieser Greybox gibt zu, dass er von Lightbox JS inspiriert wurde. Trotzdem wirkt das ganze nicht abgekupfert.
Die Greybox gibt es als reine JavaScript Variante, sowie als WordPress – Plugin.
- Download JavaScript Variante von Orangoo Labs – Greybox (Version 5.3)
- Download WordPress – Plugin von aNieto2K (Version 2.0)
Ich habe in meine Webseite die JavaScript Variante von Orangoo Labs integriert. Ihr könnt euch am Ende des Artikels einige Beispiele anschauen.
Installation
- JavaScript downloaden und entpacken.
- Nur den Ordner greybox auf Deinen Webspace hochladen, alle anderen Dateien und Ordner sind Quelldateien oder Dokumentationen.
- Anpassung der header.php (siehe folgende Anweisung)
Zwischen <header>...</header> foldende Zeilen hinzufügen,
wobei der Pfad absolut sein sollte.
<script type="text/javascript">
var GB_ROOT_DIR = "http://deinewebseite.de/greybox/";
</script>
Jetzt müssen noch folgende Scripte und ein Stylesheet hinzugefügt werden. <script type="text/javascript" src="http://deinewebseite.de/greybox/greybox/AJS.js"></script> <script type="text/javascript" src="http://deinewebseite.de/greybox/greybox/AJS_fx.js"></script> <script type="text/javascript" src="http://deinewebseite.de/greybox/greybox/gb_scripts.js"></script> <link href="http://deinewebseite.de/greybox/greybox/gb_styles.css" rel="stylesheet" type="text/css" />
|
Beispiel 1: |
|
Laden einer Webseite im PopUpFenster – zentriert unter Angabe der Breite und Höhe. Versuche den Link: Yahoo in der Greybox 800 x 600 |
<a href="http://de.yahoo.com/" title="Yahoo in the box" rel="gb_page_center[800, 600]"><b>Yahoo in der Greybox 800 x 600</b></a>
|
Beispiel 2: |
|
Laden einer Webseite im PopUpFenster (FullScreen-Modus) Versuche den Link: Google.com |
<a href="http://google.com/" title="Google" rel="gb_page_fs[]">Google.com</a>
|
Beispiel 3: |
|
Laden mehrere Webseiten (Set) im anderen Layout (FullScreen-Modus) Versuche den Link: Zeige die erste Seite von zwei |
<script>
var page_set = [{'caption': 'Google', 'url': 'http://google.com/'},
{'caption': 'WordPress Deutschland', 'url': 'http://wordpress-deutschland.org/'}];
</script>
<a href="#" onclick="return GB_showFullScreenSet(page_set, 1)">Zeige die erste Seite von zwei</a>
|
Beispiel 4: |
|
Laden eines Bildes im PopUp – Fenster (habe die Formate: jpg, png und gif getestet). |
<a href="http://deinewebsite/bild_gross.jpg" title="Titel" rel="gb_image[]"><img src="http://deinewebsite/bild_klein.jpg" border="0"/></a>
|
Beispiel 5: |
|
Laden mehrerer Bilder (Set). |
<script>
var image_set = [{'caption': 'Titel 1', 'url': 'http://deinewebsite/bild_01_gross.jpg'},
{'caption': 'Titel 2', 'url': 'http://deinewebsite/bild_02_gross.jpg'},
{'caption': 'Titel 3', 'url': 'http://deinewebsite/bild_03_gross.jpg'},
{'caption': 'Titel 4', 'url': 'http://deinewebsite/bild_04_gross.jpg'}];
</script>
<a href="#" onclick="return GB_showImageSet(image_set, 1)"><img src="http://deinewebsite/bild_01_klein.jpg" border="0"/></a>
Greybox bietet folgende Funktionen:
GB_show (Untertitel, URL, Höhe, Breite, callback_fn)
Zeigt ein normales GreyBox Fenster.
- Untertitel: Der Untertitel des Fensters.
- URL: URL einer Web site, die du in GreyBox anzeigen möchtest.
- Höhe, Breite: Die Größe des Fensters.
- callback_fn: Eine Funktion, die benannt wird, um das GreyBox Fenster zu schließen.
GB_showFullScreen (Untertitel, URL, callback_fn)
GreyBox Fenster ‘fullscreen’.
- Untertitel: Der Untertitel des Fensters.
- URL: URL einer Web site, die du in GreyBox anzeigen möchtest
- callback_fn: Eine Funktion, die benannt wird, um das GreyBox Fenster zu schließen.
GB_showImage (Untertitel, URL)
Ein Bild in GreyBox zeigen.
- Untertitel: Der Untertitel des Fensters.
- URL: URL einer Web site, die du in GreyBox anzeigen möchtest.
@Kalle
Schön, dass es jetzt bei Dir funktioniert. Hier habe ich Dir noch einige Varianten
(am Beispiel von Google) aufgeschrieben.
Einfach den Code kopieren und Deinen Wünschen entsprechend anpassen.
Greybox Beispiele
Viele Grüße
Hallo !
Ich habe folgendes Problem und steig höchstwahrscheinlich wegen mangelden Wissen nicht dahinter ! Habe das Plugin aktiviert in WordPress, was ja noch problemlos war. Bei meiner Page sollte das Donald Duck Beispiel zum Einsatz kommen. Also das Thumb wird angezeigt aber wenn ich draufklicke kommt nur die grosse version von dem Bild aber nicht in der greybox ! Weiss nicht mehr weiter woran das liegen koennt! Wär für Hilfe dankbar !
@Ivanovic
Gerne würde ich Dir helfen, aber ohne einen Link von Dir, ist das schwierig.
Es könnte viele Gründe haben, warum es auf Deiner Seite nicht funktioniert.
Probiere mal als erstes den WYSIWYG-Editor abzuschalten.
Anschließend klicke auf den folgenden Link und teste, ob es mit diesem Code funktioniert. (natürlich musst Du ihn noch dementsprechend an Deine Bilder-Links anpassen.)
Greybox Beispiel Bild
Viele Grüße
Danke erst mal für die schnelle Antwort. Das Problem hat sich jetzt bei mir auf kurioser Art und Weise gelöst nur das ich jetzt mit diesem Eintrag:
sich die Lightbox angesprochen fühlt, welche ich auch installiert habe. Ka Ahnung warum! Gefällt mir aber auch gut ! taleaetgladius.tk ist der link zu meiner Site. da kannste es ja mal sehen.
Gruss Ivanovic
oh jetzt habe ich nen quelltext angegeben und zeigt ihn nicht an weil ich die links abgeändert habe.
Hallo, eure Kommentare haben mir ja schon weitergeholfen. Aber jetzt stellt sich mir noch ne ganz simple Frage, die ich mir aber nicht beantworten kann. Wo muss ich denn die Links (Bilder, URL`s, etc.) einfügen? In der index des Theme´s?
Gruß stamppad
Servus aus Wien!
Die bisherigen Beiträge haben mich bei der Konfiguration von Greybox schon ein paar Schritte weiter geholfen.
Mein Popup öffnet korrekt nur springt die Seite, von welcher aus ich auf den Greybox-Link klicke, beim öffnen der Greybox immer nach oben. Ich habe bemerkt, dass das z.B. auch hier bei dem Beispiel-Link: “Yahoo in der Greybox” passiert. Bei den anderen Beispiel-Links springt die Seite hinter der Greybox nicht an den Seitenanfang.
Irgendwie werde ich daraus nicht schlau. Vielleicht hat ja von Euch jemand DIE zündende Idee…
LG
Helmut
Hallo! Ich habe das selbe Problem wie Kalle hatte. Soweit alles klar mit der greybox, allerdings sobald ich den guardar cambios button drücke, setzen sich alle einstellungen zurück und es speichert es einfach nicht. weiß echt nicht was ich machen soll …
wow, das ist ja mal ein HAMMER plugin, vielen Dank! werde ich auf jeden fall gleich mal antesten
cheers,
lin