Permalink

6

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.

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

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 &quot;jQuery Lightbox For Native Galleries&quot; 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 = &quot;95%&quot;;
	$maxHeight = &quot;95%&quot;;

	?&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
	jQuery(document).ready(function($){
&lt;?php for($i = 0; $i &lt; count($image_types); $i++) { ?&gt;
		$('a[href$=&quot;.&lt;?php echo $image_types[$i]; ?&gt;&quot;]').colorbox({maxWidth:&quot;&lt;?php echo $maxWidth; ?&gt;&quot;, maxHeight:&quot;&lt;?php echo $maxHeight; ?&gt;&quot;});
&lt;?php } ?&gt;
	});
&lt;/script&gt;&lt;?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.

Autor: Artur

Der technikinteressierte und bibeltreue Christ Artur Weigandt bloggt über Datenschutz, Webprogrammierung, sicheren Umgang mit dem Internet und die Bibel. Er arbeitet an der christlichen Community youthweb.net mit, programmiert Webapplikationen und beteiligt sich bei diversen Open Source Projekten.

6 Kommentare

  1. Hallo, danke für die gute Arbeit! Leider funktioniert es bei mir (noch) nicht wie erhofft. Auf der Seite

    http://www.anderswohnen-nuernberg.de/gaestewohnung/

    zeigt das Plugin jquery-lightbox-for-native-galleries, was es kann, nämlich die drei Galerie-Bilder schön in einer Lightbox darzustellen. Nun habe ich Deinen oben unter „Alle Bilder in der Lightbox anzeigen“ angelisteten Code-Schnippsel in die functions.php übernommen in der Hoffnung, auch einzelne Bilder wie das im Artikel

    http://www.anderswohnen-nuernberg.de/2011/07/08/ordentliche-generalversammlung-der-anderswohnen-eg-2/

    gezeigte in der Lightbox geöffnet zu bekommen, allein es passiert nix dergleichen: Beim Anklicken des Fotos geht es solo auf, ohne alle Effekte. Wo liegt mein Denkfehler bzw. was mache ich falsch?

    P.S.: Bei deaktiviertem Plugin wird das Sonnenblumen-Bild beim Anklicken wie gehabt auf einer eigenen Seite angezeigt…

    Dank & Gruß,
    Ralph

    • Hallo Ralph,
      danke für deinen Kommentar. Ich denke, ich habe die Lösung gefunden.
      Ich habe im Artikel leider nicht explizit darauf hingewiesen, aber die Bilder müssen direkt mit dem Bilderpfad verlinkt sein. Das erreichst du am einfachsten, in dem du im Editor auf dein Bild klickst, Bild bearbeiten wählst und dann bei URL auf „Mit Bild verlinken“ klickst. Erst dann erkennt das Plugin das Bild und zeigt es in der Lightbox an.
      Ich werde das im Artikel nachtragen.

      Vielen Dank.

  2. Ein Detail ist mir gerade noch aufgefallen: Anders als bei Galerien wird beim Öffnen von Einzelbildern leider kein Beschriftungstext angezeigt, auch wenn beim in der Mediathek hinterlegte Bild sämtliche Bemerkungs- und Beschriftungsfelder ausgefüllt sind. Ist das etwas, was wir dem Plugin anlasten müssen oder ein Effekt, den Du prinzipiell mit Deinem Code-Schnipsel in den Griff kriegen könntest? Wäre natürlich schon schön und wünschenswert, wenn vorhandene Erläuterungstexte bei Einzelbildern nicht unterschlagen werden würden…

    Dank & Gruß,
    Ralph

    • Hallo Ralph,
      das Plugin jquery-lightbox-for-native-galleries nimmt sich leider nur den Titel der kVerlinkung und zeigt ihn unter der Lightbox an. In den Bildeigenschaften muss man dazu im Reiter “erweiterte Einstellungen” unter “Erweiterte Linkeinstellungen” das Feld „Titel“ ausfüllen.

      Ich probiere gerade aus, ob man hier eine JavaScript-Lösung ansetzen kann.

      • Hallo Artur,

        danke auch für diesen Tipp! Ich mußte eine ganze Weile nach den von Dir genannten “Erweiterte Linkeinstellungen” der Bildeigenschaften suchen. Die waren für mir bis dato gänzlich verborgen geblieben, weil ich bewußt nur den HTML-Editor und nicht den visuellen Editor benutze. Über den visuellen WYSIWYG-Editor habe ich schließlich gefunden, was Du meinst: nach dem Ausfüllen des (gefühlt fünften) Titelfeldes des einen Bildes habe ich den gewünschten Text jetzt auch tatsächlich wie erhofft in die Lightbox gekriegt. Danke für die zielführende Hilfestellung, doch wirklich intuitiv und benutzerfreundlich ist die WordPresse an dieser Ecke nicht…

        Herzlichen Gruß,
        Ralph