WordPress: Lightbox ganz einfach

12.08.2012 in: Javascript, Webdesign und WordPress • Ein Kommentar

Eins vorweg: Ich mag Lightboxen nicht. Manche Kunden sehen das anders, und für diesen Fall bringt WordPress schon ein kleines Script mit, das wir ganz einfach aktivieren können. Es heißt Thickbox und wird mit einer Zeile in der functions.php des Themes aktiviert:

add_action( 'wp_enqueue_scripts', 'add_thickbox' );

Fertig. Jetzt lädt WordPress im Frontend jQuery und Thickbox. Alle Bilder in einem Link mit der CSS-Klasse thickbox werden in einer Lightbox geöffnet. Alle Links mit dem gleichen Wert für das Attribut rel werden zu einer Gruppe zusammengefaßt; sie können also durchgeblättert werden, ohne daß der Besucher die Lightbox verläßt. Da es ein Core-Script ist, sind die Texte alle schon übersetzt.

Freilich muß man die Klasse und das Attribut immer noch manuell hinzufügen. Das ist ein bißchen aufwendig, deshalb habe ich mir dafür ein Plugin geschrieben, das beides auf einen Streich erledigt:

<?php # -*- coding: utf-8 -*-
/**
 * Plugin Name: T5 Add Thickbox Support
 * Plugin URI:  http://toscho.de/?p=1997
 * Description: Enables the Thickbox script for the theme.
 * Version:     2012.08.12
 * Author:      Thomas Scholz <[email protected]>
 * Author URI:  http://toscho.de
 * License:     MIT
 * License URI: http://www.opensource.org/licenses/mit-license.php
*/
add_action( 'wp_enqueue_scripts', 'add_thickbox' );
add_action( 'wp_footer', 't5_thickbox_jquery' );
/**
 * Print JavaScript to make linked images thickboxy.
 *
 * @return void
 */
function t5_thickbox_jquery()
{
?>
<script>
jQuery( 'a img.size-medium, a img.attachment-thumbnail' )
    .parent()
    .addClass( 'thickbox' )
    .attr( 'rel', 'page' );
</script>
<?php
}

GitHub: https://gist.github.com/2215512

Das ist ganz gut, wenn man eine schnelle Lösung braucht oder mit dem Kunden zusammen ausprobieren möchte, ob eine Lightbox überhaupt für diese Website taugt. Im Ernstfall möchte man vielleicht bessere Scripte verwenden, die beispielsweise auch per Tastatur bedienbar sind, denn Thickbox kann das nicht. Zum Gruppieren der Bilder eignen sich das data-Attribut oder eine zweite CSS-Klasse besser als rel. Und das JavaScript gehört natürlich in eine separate Datei.

Ein Kommentar

1. Anonymous am 29.08.2012 · 17:25

   Danke!
   Reicht für meine Zwecke vollkommen aus.
   Bin außerdem kein Freund von Plugins.
   tom