Lightbox-Effekt für Bildergalerien

0

Vorgestern bin ich auf eine interessante Möglichkeit gestoßen, Bildergalerien und allgemein Bilder sehr nutzerfreundlich zugänglich zu machen. Die Rede ist vom Lightbox-Effekt. Während man auf meiner Website vorher beim Klick auf ein Galeriebild auf eine neue Seite weitergeleitet wurde, auf der das Vorschaubild einer Bildergalerie vergrößert abgebildet war, öffnet sich jetzt eine sogenannte Lightbox. Das ist ein Layer, der sich vor die Seite schiebt, diese dadurch abdunkelt und nur das aktuelle Bild in vergrößerter Form zeigt. Zudem bietet die Lightbox die Möglichkeit per Navigationszeile, Tastatur oder Scrollrad zwischen den einzelnen Galeriebilder zu navigieren.

Probieren Sie die neue Funktion doch einfach an der nachfolgenden Bildergalerie aus. Dann sollte klar werden, welchen großen Vorteil eine Lightbox gegenüber einer einzelnen Attachment-Seite mit nur einem Bild darstellt. (Bei den Bildern handelt es sich um die bei Windows 7 mitgelieferten Beispielbilder.)

1) Pluginvariante der Lightbox

Am einfachsten ist die Umsetzung einer Lightbox für WordPress mithilfe eines Plugins. Empfehlenswert ist zum Beispiel das Plugin Fancybox for WordPress. Um den Lightbox-Effekt nutzen zu können, installieren und aktivieren Sie das Plugin und erstellen anschließend eine WordPress-Bildergalerie. Zu beachten ist hierbei, dass Sie auf die einzelnen Bilddateien und nicht auf die Attachment-Seite verweisen müssen. Das geschieht mit dem folgenden Shortcode, spezieller desses link-Attribut.

[gallery link="file"]

Allerdings werden Sie recht schnell feststellen, dass die Plugin-Lightbox nicht mehr ganz dem aktuellen Stand der Technik entspricht und auch nicht alle Feastures bietet, die die Lightbox in meinem Theme unterstützt.
Das liegt daran, dass ich auf meiner Seite die zweite Version der Fany-Lightbox verwende. Hierbei handelt es sich allerdings nicht um ein normales WordPress-Plugin, sondern nur um ein Tool, das man in den Code eines bestehenden Projekts einbinden muss. Wie das funktioniert, werde ich im Folgenden zeigen.

2) Einbau der Lightbox in das Projekt

Zunächst einmal lädt man sich die Projektdateien von der oben verlinkten Homepage herunter, entpackt diese und kopiert sie in ein Verzeichnis des aktuellen Projekts bzw. WordPress-Themes. Nun müssen die enthaltenen Javascript und CSS-Dateien noch zum Projekt hinzugefügt werden, was über entsprechende link-Attribute im Dokumentenheader geschieht.

<!-- jQuery Bibliothek -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<!-- Scroll-Plugin (optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Lightbox Scripts -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.0" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.0"></script>

<!-- Optionale Hilfs-Skripts für Buttons, Thumbnails, etc. -->
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.3" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.3"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.3"></script>

<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.6" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.6"></script>

Baut man die Lightbox in ein WordPress-Theme ein, sollte man auf die direkte Verlinkung im Header verzichten und stattdessen auf die Enqueuing-Engine von WordPress in Form der beiden Funktionen wp_enqueue_script() und wp_enqueue_style() zurückgreifen.

Ist dieser Arbeitsschritt abgeschlossen, muss das Plugin nur noch initialisiert werden. Dazu wird das nachfolgende Javascript direkt in den Dokumentenheader eingefügt.
Beispielhaft habe ich bereits einige Einstellungen vorgenommen, wie zum Beispiel die Unterstützung für das Mausrad und das automatische Weiterblättern zu aktivieren. Außerdem habe ich die maximale Breite und Höhe, die Position des Bildtitels und die Außen- und Innenabstände der Lightbox festgelegt. Die letzte Option beforeLoad fügt automatisch den Galerietitel zur Lightbox hinzu. Hier wird also anstatt des Bildtitels die Bildbeschreibung (Caption) angezeigt.

Weitere Beispiele für die Anpassung der Lightbox finden Sie ebenfalls in der Dokumentation.

<script type="text/javascript">
	/* <![CDATA[ */
	$(document).ready(function(){
		$("a[href$='.jpg'],a[href$='.png'],a[href$='.gif']").attr('rel', 'gallery').fancybox({
							
			padding: 9, //Breite des weißen Rands in Pixel
			maxWidth: 1200, //maximale Breite
			maxHeight: 700, //maximale Höhe
			margin: [45,20,20,20], //Außenabstand in Pixel				
			mouseWheel: true, //Scrollen mit dem Mausrad erlauben
			autoPlay: true, //automatisch weiterblättern
			helpers: {
				title: { type: 'inside' }, //Position des Bilduntertitels
			},
			beforeLoad: function(){ //Fügt Galerie-Untertitel zum Lightbox-Titel hinzu
				var caption = $(this.element).closest('.gallery-item').find('.wp-caption-text').html();
				this.title = caption;
			}
		});
	});
	/* ]]> */
</script>

Damit ist die Lightbox in ihr Projekt eingebaut und sollte sich beim Klick auf ein beliebiges Bild öffnen und dieses in einem größerem Format anzeigen.

3) Lightbox im LB-Projects Theme

Die nächste Version (3.2) meines WordPress-Themes wird mit der Lightbox ausgestattet sein. Über die Standard-Funktionalitäten hinweg, kann man sämtliche Einstellungen bequem im Admin-Panel des Themes vornehmen.
Auf den folgenden Bildern sieht man die Einstellungsmöglichkeiten, die momentan unterstützt werden. Eventuell kann sich hier bis zum finalen Release der Version 3.2 allerdings noch einiges ändern.

Übersicht über alle zur Verfügung stehenden Galerie-Optionen

Auch die Animations-Effekte lassen sich ändern.

Hinterlasse eine Antwort

Ihre Email-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert.

*

Zu diesem Artikel sind bisher keine freigegebenen Kommentare vorhanden.