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" />

<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>

<a href="http://google.com/" title="Google" rel="gb_page_fs[]">Google.com</a>

<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>

<a href="http://deinewebsite/bild_gross.jpg" title="Titel" rel="gb_image[]"><img src="http://deinewebsite/bild_klein.jpg" border="0"/></a>

<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.