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.

Ähnliche Beiträge:

1. Multisites unter WordPress 3.0
2. Sicherheitslücke in WordPress