WordPress bringt mit der Gallery Funktion ein einfaches und nützliches Tool mit sich, um Bilder ganz einfach in einer Gelerieansicht darzustellen. Doch wer die Bilder in einer vergrößerten Ansicht anbieten möchte, der hat die Wahl einer separaten Media-Seite oder man nutzt für Bildeffekte ein entsprechendes Javascript Plugin. Wie man ganz einfach ohne Plugin einen schönen Bildeffekt mit der Fancybox “zaubert”, möchte ich Euch hier kurz erklären.
1. Voraussetzungen
Als ersten benötigen wir das jQuery-Plugin Fancybox, das wir ja später nutzen möchten. Die aktuellste Version gibt es auf der Fancybox-Projektseite zum Download. Datei herunterladen und lokal auf dem Rechner entpacken und speichern.
Fancybox nach dem Download entpacken
Als nächstes übertragen wir die Dateien auf den Web-Server. Wir entscheiden uns, einen Unterordner in unserem Theme-Ordner anzulegen. Dies ist wichtig, da wir die Fancybox später über die Functions.php unseres Themes ansprechen werden. Dazu aber später mehr.
Weiter in der Installation… In unserem Theme-Ordner habe ich mir einen Unterordner angelegt namens “js” (Javascripte) und dort den Fancybox-Ordner hochgeladen. In meinem Beispiel lautet der komplette Pfad also;
..wp-content/themes/twentyten/js/Fancybox
In diesem Ordner müssen folgende Dateien vorhanden sein:
- der Ordner fancybox
- jquery-1.4.3.min.js
- style.css
Der Ordner “example” und die index.html brauchen wir später nicht.
Damit haben wir den Grundstein für unseren Bildereffekt gelegt. Jetzt müssen wir ihn nur noch im Theme aufrufen und für die Bilder aktivieren.
2. Einbindung der Fancybox in das WordPress Theme
Zum Aufruf der Fancybox öffnen wir uns – wie oben schon erwähnt – die Functions.php unseres Themes. Hier registrieren wir nun die Fancybox in unserem Theme. Dazu schreiben wir folgenden Code in die Functions.php:
1 2 3 4 5 6 7 8 9 10 | //Load the jQuery Fancy-Plugin for dynamic images function content_fancy(){ $path = get_bloginfo('template_directory'); if (!is_admin()) { wp_register_script('fancy', $path.'/js/Fancybox/fancybox/jquery.fancybox-1.3.4.js', false, '', true); wp_enqueue_script('jquery'); wp_enqueue_script('fancy'); } } add_action('init', 'content_fancy'); |
Dieses Script lädt beim Aufruf Eures Blogs das Fancybox.js (Javascript) in den Footer Eurer Seite, was ein Vorteil in puncto Ladezeit bedeutet. Beachtet aber, dass der Aufruf wp_footer() im Theme vorhanden sein muss!!
Wer das Script lieber im Kopfbereich der Seite laden möchte (Header) der ersetzt in der Zeile
1 | wp_register_script('fancy', $path.'/js/Fancybox/fancybox/jquery.fancybox-1.3.4.js', false, '', true); |
das letzte true gegen ein false. Mehr Informationen hierzu findet Ihr in der Doku zu dieser Funktion.
Ein Blick in den Quellcode Eures Blogs sollte nun zeigen, dass das Script geladen wurde.
3. Aufruf des Fancybox-Effekts bei Bildern
Nun haben wir das Script in unserem Theme registriert, und rufen es beim Laden der Seite auf. Jetzt müssen wir noch dafür sorgen, dass die Fancybox auch weiß, dass sie Bilder “zoomen” soll. Dazu öffnet Ihr jetzt die Footer.php Eures Themes.
Hier rufen wir nun die jQuery-Box auf;
1 2 3 4 5 6 7 8 | <script type="text/javascript"> //<![CDATA[ jQuery.noConflict(); jQuery(document).ready(function() { jQuery("a[href$=.jpg],a[href$=.png],a[href$=.gif]").attr('rel', 'gallery').fancybox(); }); //]]> </script> |
Das bedeutet:
Wenn das HTML-Grundgerüst der Seite geladen wurde, dann suche nach Links, die auf .jpg, .png oder .gif-Dateien verweisen und erstelle – wenn möglich – eine “Blätterfunktion” mit diesen Bildern.
Wichtig:
Wenn Ihr in der Functions.php – wie oben beschrieben – das Script im Footer aufruft, dann muss das jQuery-Script darunter aufgerufen werden!! Also bindet es nach dem wp_footer() in die Footer.php ein! Ansonsten funktioniert die Fancybox später nicht…
Als letztes müssen wir noch das Aussehen der Fancybox aufrufen. Dazu öffnen wir nun die Header.php Eures Themes. Hier tragt Ihr nun folgende Zeile ein, um die style.css der Fancybox zu laden:
1 | <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/js/Fancybox/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" /> |
Alle Änderungen Eurer Theme-Dateien speichern und auf den Webserver zurück laden. Das war´s. Jetzt werden alle Bilder, die auf sich selbst verlinken, mit dem Fancybox-Effekt geladen…
Und so sieht´s dann fertig aus…
-
- Ein Schiff im Hafen
-
- Eine Möwe im Flug…
-
- …und die ist am Bauch blau… :)
Die Bilder öffnen sich in der Fancybox und lassen sich einfach “weiter blättern”.
Viel Spaß beim Ausprobieren…
Weitere Möglichkeiten findet Ihr auf der Fancybox-Projektseite. Natürlich kann man die Fancy- style.css noch entsprechend dem Theme anpassen…