18. Mai 2010

Tutorials, WordPress, jQuery

WordPress jQuery Lightbox prettyPhoto ohne Plugin

von Simon [webdemar] - 5 Kommentare

Eine beliebte und weitverbreitete Methode Bilder, Videos oder andere Inhalte einer Website darzustellen ist die sogenannte Lightbox. Diese öffnet den gewünschten Inhalt in einem extra Fenster und verdunkelt derweil den Hintergrund. Im Folgenden möchte ich zeigen, wie man ohne Plugin die jQuery Lightbox prettyPhoto in ein WordPress-Theme einbaut.

jQuery Lightbox prettyPhoto

In vielen meiner Themes ist die jQuery Lightbox prettyPhoto bereits eingebaut. Persönlich finde ich prettyPhoto eines der schickesten jQuery-Lightbox-Plugins (nicht WordPress-Plugin!) und möchte daher zeigen, wie man es auf korrekte Weise und ohne WordPress-Plugin in ein Theme integriert.

Drück mich für eine Demo

Folgender Content kann von prettyPhoto in der Lightox dargestellt werden:

• Einzelbild
• Bildergelerie (mit Navigation)
• Flash
• YouTube-Videos
• Vimeo-Videos
• QuickTime-Videos
• iFrames (externe Websites)
• Inline Content (HTML-Elemente)
• Galerie aus gemischten Inhalten

Herunterladen von prettyPhoto

Zunächst laden wir uns das Original-Skript von der Website des Plugin-Autors Stephane Caron.

komprimierte Version | unkomprimierte Version

Den heruntergeladenen ZIP-Ordner entpacken wir und laden die darin enthaltenen Ordner /css, /images und /js in einen Ordner unseres WordPress-Themes z. B. /wp-content/themes/**dein-theme**/pretty/.

Einbinden von jQuery

Um die prettyPhoto-Lightbox nutzen zu können, müssen wir zunächst die Javascript-Bibliothek jQuery aktivieren bzw. in userem Theme-Header laden.

Jede WordPress-Installation bringt jQuery, da es sehr häufig verwendet wird, von Haus mit. Folgender Aufruf in der functions.php des Themes läd die nötige Datei:

<?php
add_action('wp_enqueue_scripts', 'wdm_scripts');
function wdm_scripts() {
    wp_enqueue_script('jquery');
}
?>

Eine Übersicht aller in WordPress bereits enthaltenen Skripte findet Ihr im WordPress-Codex.

Einbinden von prettyPhoto

Auch um die Skripte von prettyPhoto in den Head-Bereich unseres WordPress-Themes in der functions.php zu laden, behelfen wir uns wie bei dem allgemeinen jQuery-Skript der Funktionen wp_enqueue_script() und wp_enqueue_style().

Es müssen zwei Dateien eingebunden werden. Eine davon ist die Javascript-Datei /wp-content/themes/**dein-theme**/pretty/js/jquery.prettyPhoto.js und die andere ist das Stylesheet /wp-content/themes/**dein-theme**/pretty/css/prettyPhoto.css (s. a. Ordnerstruktur beim Upload).

<?php
add_action('wp_enqueue_scripts', 'wdm_scripts');
function wdm_scripts() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('pretty', get_bloginfo('template_url').'/pretty/js/jquery.prettyPhoto.js', array('jquery'), '2.5.6', false);
    wp_enqueue_style('pretty', get_bloginfo('template_url').'/pretty/css/prettyPhoto.css', false, '2.5.6', 'all' );
}
?>

Im WordPress-Codex gibt es weitere Informationen zu wp_enqueue_script() und wp_enqueue_style().

Konfiguration von prettyPhoto

Alle nötigen Skripte sind bereits eingebunden. Nun muss die jQuery-Lightbox noch gesagt bekommen, wie, wann und wo sie funktionieren soll. Auf der Seite der Dokumentation von prettyPhoto finden wir, dass folgendes Skript in den Head-Bereich eingebunden werden muss:

<script type="text/javascript">
    $(document).ready(function(){
        $("a[rel^='prettyPhoto']").prettyPhoto();
    });
</script>

Achtung! Beim Einbinden in WordPress ist zu beachten, dass jQuery im sogenannten no conflict mode geladen wird. Das ist bei der Konfiguration von prettyPhoto wichtig.

prettyPhoto im no conflict mode

Der Javscript-Aufruf muss daher um sogenannte no conflict wrapper erweitert werden, damit die Lightbox funktioniert:

<script type="text/javascript">
(function($) {
    $(document).ready(function(){
        $("a[rel^='prettyPhoto']").prettyPhoto();
    });
})(jQuery);
</script>

Weitere Informationen zu der Methode der no conflict wrapper gibt es im WordPress-Codex.

Einbinden in der functions.php

Um das Theme nicht direkt in die header.php des WordPress-Themes einzufügen, behelfen wir uns der WordPress-Action wp_head, mit der man in der functions.php den Theme-Header erweitern kann:

<?php
add_action('wp_head','wdm_theme_head');
function wdm_theme_head() { ?>
<script type="text/javascript">
(function($) {
    $(document).ready(function(){
        $("a[rel^='prettyPhoto']").prettyPhoto();
    });
})(jQuery);
</script>
<?php } ?>

Weitere Informationen zu Optionen und der Anpassung von prettyPhoto findet Ihr in der Dokumentation.

Aufruf von prettyPhoto

Mit der obigen Konfiguration der jQuery-Lightbox lässt sich diese mit jedem a-Tag mit rel="prettyPhoto" öffnen. Der zu verwendene Code im Post-Content oder in einem Theme-Template könnte also wie folgt aussehen:

<a href="http://domain.de/dein/bild.jpg" rel="prettyPhoto">Lightbox aufrufen</a>

Drück mich für eine Demo

Weitere Möglichkeiten Inhalte in die prettyPhoto-Lightbox zu laden, findet Ihr in den Demos des Skriptes.

Fazit

Letztlich muss jeder selbst wissen, ob es einfacher ist ein Plugin zu installieren oder das Skript zu Fuß einzubinden. Ich verzichte gerne auf Plugins, wenn diese möglich ist und ich das Wissen habe, den Code selbst einzubauen.

Den ThemeShift-Kunden gefällt dieses eingebaute Feature auf jeden Fall. In Kombination mit WordPress-Funktionen lassen sich mit dieser jQuery-Lightbox umfangreiche und vor allem ansprechende Galerien bauen.

Relevante Links

• jQuery Lightbox prettyPhoto | Dokumentation
• WordPress Codex: wp_enqueue_script()
• WordPress Codex: wp_enqueue_style()
• WordPress Codex: no conflict wrapper

jQuery Plugin, Lightbox, Tutorial