Photo Pingalerie » Greybox http://pingalerie.de Sun, 21 Feb 2010 06:59:16 +0000 de-de hourly 1 http://wordpress.org/?v=3.0 Greybox Plugin fuer WordPress http://pingalerie.de/greybox-plugin-fuer-wordpress/ http://pingalerie.de/greybox-plugin-fuer-wordpress/#comments Wed, 13 Sep 2006 20:12:56 +0000 photo pingalerie http://pingalerie.de/greybox-plugin-fuer-wordpress/ 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)
Schritt 1:
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>
Schritt 2:
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
Beispiel Code:
<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
Beispiel Code:
<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

Beispiel Code:
<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).
Klicke auf das Bild:
Beispiel Code:
<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).
Klicke auf das Bild:
Beispiel Code:
<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.

Weitere interessante Artikel:

© Photo Pingalerie, 2006. | Permalink | ARTIKEL TAGS: , ,

Feed IconDANKE FÜR DAS ABONNIEREN MEINES FEED !

]]> http://pingalerie.de/greybox-plugin-fuer-wordpress/feed/ 48