WordPress: Einzelne Bilder in der Lightbox anzeigen

In diversen Projekten nutze ich die WordPress-eigene Bildergalerie-Funktion. Zusammen mit dem Plugin jQuery Lightbox For Native Galleries werden die Bilder dann auch schön in einer Lightbox angezeigt und können einfach betrachtet werden.

Nun habe ich in meinem Blog häufig nur ein einzelnes Bild im Artikel und würde das gerne ebenfalls in der Lightbox anzeigen lassen. Oder das Bild liegt gar nicht auf meinem Server und ich verlinke nur darauf. Hier möchte ich nicht unbedingt, dass der Besucher meine Seite verlassen muss, um sich das Bild anzusehen. Wie lässt sich das realisieren?

Nun, das geht ebenfalls mit dem oben erwähnten Plugin jQuery Lightbox For Native Galleries.

Einzelnes Bild in der Lightbox anzeigen

Wenn dem <a>-Tag die css-Klasse class="lightbox" zugewiesen wird, wird das verlinkte Bild ebenfalls in der Lightbox angezeigt.

<a class="lightbox" href="http://www.wlabs.de/wp-content/files/2011/03/1-mini-qube.jpg">
	<img class="aligncenter size-thumbnail wp-image-1424" title="Mini-Qube" src="http://www.wlabs.de/wp-content/files/2011/03/1-mini-qube-150x150.jpg" alt="" width="150" height="150" />
</a>

Das sieht dann so aus:

Das kann man entweder im HTML-Editor per Hand eintragen, oder man trägt es in das Feld CSS-Klasse bei den Bildeigenschaften im Reiter „erweiterte Einstellungen“ unter „Erweiterte Linkeinstellungen“ ein. Hier sollte man auch das Feld Titel ausfüllen, damit das Bild in der Lightbox auch eine Beschriftung erhält.

Im Grunde ist es egal, was innerhalb des <a>-Tags steht. Solange dem <a>-Tag die CSS-Klasse lightbox zugewiesen ist, wird das Bild in der Lightbox angezeigt. So lässt sich also auch Text und alles andere verlinken. Ein Beispiel:

Hier ein Bild ansehen.

Hier muss aber noch erwähnt werden, dass man bei Textlinks die CSS-Klasse class="lightbox" nur im HTML-Editor eintragen kann.

Leider gibt es zu dem Plugin keine ausreichende Dokumentation. Die Möglichkeit mit der CSS-Klasse findet man nur in der Plugin-Beschreibung im Plugin-Repository, oder wenn man sich durch die Kommentare auf der Autor-Seite wühlt.

Alle Bilder in der Lightbox anzeigen

Wer standardmäßig einzelne verlinkte Bilder in der Lightbox angezeigt haben möchte, kann auch diesen Code in die functions.php seines Themes schreiben:

/*********************************
Description:  Zeigt bestimmte Bildformate immer in der Lightbox an,
wenn das Plugin "jQuery Lightbox For Native Galleries" installiert ist.
Author:       Artur Weigandt
Author URI:   http://www.wlabs.de
*********************************/
add_action('wp_footer', 'wl_all_images_in_lightbox');
function wl_all_images_in_lightbox()
{
	//Ist das jQueryLightboxForNativeGalleries-Plugin installiert?
	if(!class_exists('jQueryLightboxForNativeGalleries'))
		return;

	//Bild-Typen angeben, die in der Lightbox angezeigt werden sollen
	$image_types = array('jpg', 'jpeg', 'gif', 'png');

	//Abmasse der Lightbox
	$maxWidth = "95%";
	$maxHeight = "95%";

	?>
<script type="text/javascript">
	jQuery(document).ready(function($){
<?php for($i = 0; $i < count($image_types); $i++) { ?>
		$('a[href$=".<?php echo $image_types[$i]; ?>"]').colorbox({maxWidth:"<?php echo $maxWidth; ?>", maxHeight:"<?php echo $maxHeight; ?>"});
<?php } ?>
	});
</script><?php
}

Update (13.08.2011):

Damit ein Bild in der Lightbox angezeigt wird, muss immer direkt auf das Bild verlinkt werden (die URL muss also mit jpg, png, etc. enden). Das erreicht man am einfachsten, indem man im Editor auf das Bild klickt, Bild bearbeiten wählt und dann bei URL auf “Mit Bild verlinken” klickt.

[/Update]

So spart man sich immer die Angabe der CSS-Klasse. Außerdem werden so auch alle Bilder in älteren Artikeln automatisch in der Lightbox angezeigt.

Weitere Bilderformate können einfach angegeben werden, indem man das Array $image_types erweitert.

Die Funktion verträgt sich auch mit der normalen Bildergalerie-Funktion:

Mehr zum Thema Bildergalerien in WordPress kann man auch bei elmastudio.de finden.

Findest du diese Möglichkeit nützlich? Oder nutzt du vielleicht eine andere Möglichkeit?

Wenn du Fragen oder Anregungen hast, würde ich mich über einen Kommentar freuen.