Lightbox für WordPress ohne Plugin

Um vergrößerte Bilder in meinen Blogartikeln etwas schöner anzuzeigen, habe ich bis dato das PlugIn „Shadowbox JS“ genutzt. Nun stellen ja PlugIns für das Blog eine gewisse Belastung dar und da wo es geht, versuche ich darauf zu verzichten. Durch einen sehr guten Beitrag von Simon auf webdemar, konnte ich vorgenanntes PlugIn nun ablösen und die Darstellung von Bildern direkt in das integrieren.

Simon hat die Hintergründe und die Art der Einbindung in diesem Beitrag sehr ausführlich und detailliert beschrieben. Ich möchte das hier etwas abkürzen und vereinfachen und noch ein paar Tipps geben, wo Probleme bei der Einbindung entstehen können.

Runter- und Hochladen

Für die Darstellung der Lightbox wird das Script „jQuery Lightbox prettyPhoto“ von Stephane Caron genutzt. Dies kann hier als gezipte Version heruntergeladen werden. Nachdem ihr das Teil auf eurer Festplatte gespeichert und entpackt habt, solltet ihr innerhalb eures Themes einen aussagekräftigen Ordner anlegen (Beispiel: /wp-content/themes/dein_themename/pretty/).

In diesen angelegten Ordner werden dann die 3 Ordner /css, /images und /js aus dem entpackten Zip hoch geladen.

Code in die function.php

Damit das Script entsprechend genutzt werden kann, müssen in der function.php eures Themes noch ein paar Aufrufe untergebracht werden. Sofern euer Theme keine function.php hat, legt euch mit einem Editor eurer Wahl eine entsprechende Datei an. In diese function.php müssen folgende Aufrufe hinterlegt werden:

<?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' );
}
?>
<?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 } ?>

Wichtig dabei ist, dass keine Leerzeilen vorhanden sind. Sofern schon etwas in der function.php drin steht, den Code genau darunter setzen (ohne Leerzeile). Dann die Datei speichern und sofern noch nicht vorhanden auf die Hauptebene eures Themes laden (/wp-content/themes/dein_themename/function.php).

Aufruf der Lightbox

Im Grunde könnt ihr alles über die Lightbox anzeigen lassen, was ihr wollt:

  • Fotos, Bilder und Grafiken (als Einzelbild und als Galerie)
  • Videos von Youtube
  • Flash
  • externe Seiten in unterschiedlicher Größe
  • Inline Content bzw. HTML-Elemente
  • gemischte Inhalte

In den entsprechenden a-Tag muss rel="prettyPhoto" mit eingebunden werden, damit die Lightbox angezeigt wird.

Beispiel für ein Einzelbild

Demo

Code:

<a rel="prettyPhoto" href="http://www.irgendeine-seite.de/images/bild.jpg">Linktext oder Grafik</a>

Beispiel für Youtube-Video Aufruf

Demo

Code:

<a rel="prettyPhoto" href="http://www.youtube.com/watch?v=G6F_iP-F7Fw">Linktext oder Grafik</a>

Beispiel für den Aufruf einer Webseite (970 x 500 Pixel)

Demo

Code:

<a rel="prettyPhoto[iframes]" href="http://www.irgendeine-webseite.de?iframe=true&amp;width=970&amp;height=500">Linktext oder Grafik</a>

Beispiel für den Aufruf einer Webseite (100%)

Demo

Code:

<a rel="prettyPhoto[iframes]" href="http://www.irgendeine-webseite.de?iframe=true&amp;width=100%&amp;height=100%">Linktext oder Grafik</a>

Beispiel für den Aufruf von Inline Content

Demo

Code:

<a rel="prettyPhoto" href="#inline-1">Demo</a>
<div id="inline-1" class="hide" style="display:none;">
irgend ein Text</div>

Weitere Beispiele findet ihr auf der Scriptseite. Tiefer gehende Informationen zum Einbinden des Scriptes findet ihr bei webdemar.

Vielen Dank an dieser Stelle nochmal an Simon für seinen ausführlichen Beitrag.

VN:F [1.9.20_1166]
War der Beitrag ok? Dann gib ein paar Sterne.
Bewertung: 5.0 / 5 (1 Bewertung abgegeben)
Lightbox für WordPress ohne Plugin, 5.0 out of 5 based on 1 rating

11 Kommentare Schreibe einen Kommentar

  1. Pingback: Chris D

  2. @Martin: Danke für Deinen Kommentar.

    Was genau findest Du zu kompliziert? Die einmalige Implementierung oder die eigentliche spätere Anwendung?

    Was ich gerade schön an der Geschichte finde ist, dass ich eben kein Plugin einsetzen muss, da sich der Einsatz von Plugins ja auch immer etwas auf die Performance des Blogs auswirkt.

    Aber ich gebe Dir insofern recht, dass es sehr viele tolle Plugins für eine Lightbox gibt, die einem auf unkomplizierte Art diesen Mehrwert bieten. Das ist gerade für denjenigen gut, der sich nicht so tief in die Materie „versinken“ möchte.

    Gruß Stephan

  3. Naja ich mag es halt gerne einfach und simpel. Bevor ich anfange manuell einen Code in eine php Datei einzufügen und dann das ganze noch per Zusatz aufrufen zu müssen, überlasse ich das lieber einen Plugin .

    Du hast schon recht das manches Plugin etwas Performance braucht aber in dem Falle ist das kaum so.

  4. Hi Martin

    Wenn ich den Code in meine bereits vorhanden functions.php vom TwentyEleven-Theme einbaue kommt sofort ein fehler beim Aufruf der Seite und auch des Backends.

    Hast noch einen Tipp?

    • Hallo Kai,
      kann mal vorkommen mit dem Namen.

      Hast Du darauf geachtet, dass keine Leerzeilen zwischen den bereits vorhandenen Einträgen und dem neuen Eintrag in der function.php vorhanden sind?

      Wenn ja, probier mal den Code an den Anfang der function.php zu setzen.

      Möglicherweise heißt der Ordner, in den Du die Dateien hochgeladen hast anders oder liegt an einer anderen Stelle, dannm usst Du den Pfad im Code entsprechend anpassen.

  5. Ich habe drauf geachtet das keine Leerzeile dazwischen ist.

    Der Pfad zum Verzeichnis sieht so aus:
    / wp-content / themes / twentyeleven / pretty

    Sollte doch dann eigentlich mit deinem Code passen.

    habe jetzt den Code nach ganz oben eingefügt. jetzt kommt erstmal keine Fehlermeldung, aber funzen tut das irgendwie noch nicht mit der Lightbox.

    Übrigens funzt dein „Subscribe“ nicht. habe keine Mail bekommen das du geantwortet hast.

    • Mmmmhhmmm … mit dem Pfad ist ok, sofern im pretty-Ordner die entsprechenden Dateien vorhanden sind. So weit ich das auf Deiner Seite gesehen habe ist der rel-Tag auch korrekt untergebracht.

      Hast Du möglicherweise noch ein Plugin installiert und aktiviert, welches ursprünglich die selbige Funktion hat?

      Ich habe gesehen, dass Du beim ersten Screenshot von wp-seo harte Absätze hinterlegt hast. Wahrscheinlich damit der nachfolgende Text unter dem Bild steht. Das kannst Du eleganter durch einen Inline-Style lösen. Dort dann einfach clear=both hinterlegen, damit erst nach dem Element weiter gemacht wird.

      Danke für den Hinweis mit „Subscibe“ – ich schau gleich mal. Hast Du die Double-Op-In Mail bekommen und bestätigt?

  6. Ja habe die Die Bestätigungsmail bekommen. jetzt habe ich auch eine Mail bekommen über deine Antwort.

    Ich habe mal geschaut und habe eh nicht viele Plugin laufen. Aber ist auch keines Dabei, welches für Grafiken oder so verantwortlich sein könnte.

    Merkwürdig. Möchte halt auch mit so wenig möglich an Plugins installieren.

    • Das kann ich verstehen.

      So aus der Ferne habe ich jetzt keinen weiteren Plan.

      Aber vielleicht findest Du hier noch einen Hinweis. Der Simon hat das sehr ausführlich beschrieben.

Schreibe einen Kommentar