www.pistenstuermer.de

Als ich mich für das Options-Theme von Justin Tadlock entschieden hatte, war relativ schnell klar, dass ich die sogenannte “Features Gallery” auf der Startseite einsetzen möchte. Dies ist die animierte Flash-Grafik, die eine Vorschau ausgewählter Artikel mit Bild bietet. Leider funktioniert diese nicht, wenn man gleichzeitig Lightbox2 einsetzt, da sich die JavaScript-Libraries gegenseitig behindern. Das hat mich einiges an Nerven gekostet, bis ich das herausgefunden hatte. OK, ich hätte natürlich auch gleich in der Theme-Dokumentation nachsehen können.

Statt lightbox setze ich jetzt slimbox ein. Das greift auf das für die Features Gallery ebenfalls benötigte mootools-Framework zu, somit wird der Code dadurch sogar noch schlanker. Und ich finde slimbox sogar erst noch hübscher. Dafür muss slimbox in der Version 1.53 heruntergeladen und in ein js-Verzeichnis des Child-Themes (in meinem Fall Options-light) entpackt werden. Eingebunden wird das ganze dann über die functions.php des Child-Themes:

/*
* Integrate Slimbox for picture popups
* (lightbox breaks features gallery)
*/
add_action('op_head', 'slimbox_js');

function slimbox_js() {
        wp_enqueue_script('mootools', get_bloginfo('template_directory') .'/library/js/mootools.js', false, '1.1.1');
        wp_enqueue_script('slimbox', get_bloginfo('url') .'/wp-content/themes/options-light/js/slimbox.js', array('mootools'), '2.0');
}

add_action('wp_head', 'slimbox_css');

function slimbox_css() {
        wp_enqueue_style('slimbox_css', get_bloginfo('url') .'/wp-content/themes/options-light/js/css/slimbox.css', false, false, 'screen');
        wp_print_styles(array('slimbox_css'));
}

Da ja nun das lightbox-Plugin fehlt, welches sich zusätzlich auch noch um das Hinzufügen von rel=lightbox zu jedem Link gekümmert hat, und ich dafür natürlich zu faul bin, habe ich die entsprechende Funktion noch aus dem lightbox-Plugin geklaut und ebenfalls in die functions.php eingefügt:

/*
* taken from lightbox2 plugin
* function to automatically add "rel=lightbox" to picture links
*/
function autoexpand_rel_wlightbox ($content) {
        global $post;
        $pattern[0] = "/<a(.*?)href=('|\")([A-Za-z0-9\/_\.\~\:-]*?)(\.bmp|\.gif|\.jpg|\.jpeg|\.png)('|\")([^\>]*?)>/i";
        $pattern[1] = "/<a(.*?)href=('|\")([A-Za-z0-9\/_\.\~\:-]*?)(\.bmp|\.gif|\.jpg|\.jpeg|\.png)('|\")(.*?)(rel=('|\")lightbox(.*?)('|\"))([ \t\r\n\v\f]*?)((rel=('|\")lightbox(.*?)('|\"))?)([ \t\r\n\v\f]?)([^\>]*?)>/i";
        $replacement[0] = '<a$1href=$2$3$4$5$6 rel="lightbox['.$post->ID.']">';
        $replacement[1] = '<a$1href=$2$3$4$5$6$7>';
        $content = preg_replace($pattern, $replacement, $content);
        return $content;
}
add_filter('the_content', 'autoexpand_rel_wlightbox');
add_filter('the_excerpt', 'autoexpand_rel_wlightbox');