In WordPress ist Thickbox bereits integriert. Thickbox ist in JavaScript geschrieben und erlaubt es, Bilder besonders hervorzuheben. Es gibt für WordPress viele sogenannte Lightbox-Plugins, die wahre Ressourcen-Fresser sind. Nach langem Suchen im Netz habe ich mehrere Codeschnipsel gefunden, die Thickbox ohne Plugin für das Frontend aktiviert. Der Code in der functions.php bewirkt die Integration von Thickbox im Frontend, das Anzeigen des fehlenden Icon „close.png“ sowie den Support von Bildern mit der Endung jpg, jpeg, png, gif, bmp und ico.
Installation
Vor dem schliessenden PHP Tag ?> folgenden Code einfügen:
// Interne WP Thickbox
add_thickbox();
/* Anzeige Icons */
function load_tb_fix() {
echo "\n" . '<script type="text/javascript">tb_pathToImage = "' . get_option('siteurl') . '/wp-includes/js/thickbox/loadingAnimation.gif";tb_closeImage = "' . get_option('siteurl') . '/wp-includes/js/thickbox/tb-close.png";</script>'. "\n";
}
add_action('wp_footer', 'load_tb_fix');
/* Klasse in Bilder */
function add_class_thickbox($content) {
$content = preg_replace('/<a(.*?)href="(.*?).(jpg|jpeg|png|gif|bmp|ico)"(.*?)><img/U', '<a$1href="$2.$3" $4 class="thickbox"><img', $content);
return $content;
}
add_filter('the_content', 'add_class_thickbox', 2);
Fazit
Leider wird Thickbox nicht mehr weiterentwickelt. Eine passende Alternative ist Shadowbox JS und dem passenden WordPress Plugin Shadowbox JS vom Autor Sivel.
Hallo,
vielen Dank für das wundervolle Snippet. Danach habe ich eine Ewigkeit gesucht. Funktioniert super, vor allem aber deutlich schneller als jedes Plugin.
Entschuldige den Doppel-Kommentar… gibt es noch eine Möglichkeit Bilder im Post zu koppeln? Die Thickbox kann doch eigentlich auch mehrere Bilder durchschalten mit vor und zurück wenn sie im gleichen Post sind.
Hallo Mike,
sorry die verspätete Antwort.
Das Thema ist schon etwas älter, ich benutze seit geraumer Zeit das Plugin WP jQuery Lightbox. Die Verlinkung kann mit einem Klick eingestellt werden, Bilder im Artikel werden gebündelt.
Vielleicht hilfst du mir trotzdem. Dass habe ich gefunden:
http://www.jinweijie.com/javascript/thickbox-add-previous-and-next-button-on-image-like-lightbox/comment-page-1/#comment-6906
leider klappts nicht. Habe dann versucht den next-button in die function von dir einzubaunen… ohne Erfolg. Wäre echt genial, wenn du helfen könntest.
@Mike
Ich möchte nochmals alles bei mir einbauen und testen. Leider fehlt mir die Zeit bzw. bin mit dem anderen Plugin sehr zufrieden … sorry!
Hi Ivan,
sehr schöner, zielführender Code und tatsächlich lässt sich so sehr leicht ThickBox global aktivieren, sprich ist auf allen Seiten verfügbar. Wenn es aber ans Optimieren der Webseite geht und man bei Yahoos YSlow oder Googles Page Speed gut abschneiden möchte, sollte man das JavaScript und CSS für ThickBox nur dann laden, wenn es auch gebraucht wird, also die aktuelle Seite ThickBox verwendet. In diesem Fall hilft mein wirklich sehr schlanker Plugin (WordPress ThickBox Plugin) weiter 😉