Es ist keine gänzliche neue Erscheinung, aber eine sehr hübsche und vor allen Dingen nützliche, wie ich finde: Lightboxen. Im Web versteht man darunter die Möglichkeit, Multimedia-Inhalte als “schwebend über dem Inhalt” zu präsentieren. Dazu muss der Nutzer auf das Bild oder Video klicken, es öffnet sich dann über dem restlichen Inhalt, während dieser abgedunkelt wird.

Der Begriff “Lightbox” bzw. Lichttisch stammt ursprünglich aus dem Druckerei-, Film- oder Foto-Gewerbe. Hier handelt es sich um einen Tisch, der unter der Tischplatte ein Leuchtmittel installiert hat, wobei die Tischplatte meist aus Milchglas o. ä. besteht. So können z. B. Negative betrachtet werden. Vertikal aufgestellt, dienten Sie auch zur Betrachtung von Röntgenbildern.

Im Web werden Lightboxen oft genutzt um Inhalte “besonders” zu präsentieren. Selbstverständlich bietet das offizielle WordPress-Plugin-Verzeichnis eine Unmenge an passenden Lightbox-Plugins, aber oft sind sie überladen. Deswegen möchte ich euch hier eine Möglichkeit vorstellen, mit der ihr eine Lightbox für einzelne Elemente ohne Plugin einrichten könnt.

Lity-Dateien hochladen und einbinden

Zunächst einmal müsst ihr die benötigten Lity-Dateien auf euren eigenen Server hochladen. Herunterladen könnt ihr sie hier. Dann müsst ihr die Javascripte sowie die CSS-Datei im header bzw. footer eures Themes einbinden.

<link href="dist/lity.css" rel="stylesheet">
<script src="vendor/jquery.js"></script>
<script src="dist/lity.js"></script>

Wenn Ihr kein Child-Theme nutzt und auch euer Theme keine Möglichkeit dafür bietet, könnt ihr das Plugin Insert Headers and Footers nutzen. Ihr müsst beim Einfügen der Links nur daran denken die Pfade entsprechend anzupassen.

Lightbox anlegen

Je nach dem für welchen Zweck ihr nun eine Lightbox einrichten möchtet, müsst ihr in einen HTML-Block den entsprechenden Code einfügen:

<!-- Bild -->
<a href="https://farm9.staticflickr.com/8642/16455005578_0fdfc6c3da_b.jpg" data-lity data-lity-desc="Photo of a flower">Image</a>

<!-- Videos per iFrame (YouTube, Vimeo) -->
<a href="//www.youtube.com/watch?v=XSGBVzeBUbk" data-lity>iFrame Youtube</a>
<a href="//vimeo.com/1084537" data-lity>iFrame Vimeo</a>

<!-- Google Map -->
<a href="//maps.google.com/maps?q=1600+Amphitheatre+Parkway,+Mountain+View,+CA" data-lity>Google Maps</a>

<!-- Inline-Inhalt -->
<a href="#inline" data-lity>Inline</a>

<div id="inline" style="background:#fff" class="lity-hide">
Inline content
</div>

Grundsätzlich müssen Links das Attribut data-lity erhalten, damit sie sich in einer Lightbox öffnen.

Fazit

Der Vorteil dieser Methode ist, dass so ganz gezielt einzelne Elemente in einer Lightbox präsentiert werden können. Die Lightbox ist komplett responsive, sie kann über die CSS- und die JS-Datei einfach angepasst werden und sie ist absolut “lightweight” 😉

Wenn ihr allerdings unsicher im Umgang mit Code seid oder aber ganze Galerien mit Hilfe einer Lightbox anzeigen wollt, dann solltet ihr auf eines der zahlreichen Lightbox-Plugins aus dem offiziellen WordPress-Verzeichnis zugreifen.

Diesen Blogartikel teilen:

Verwandte Beiträge:

Amazon VISA Kreditkarte
Werbung

Geschrieben von Thordis

Dipl.-Geogr. Thordis Bonfranchi-Simović arbeitet seit Januar 2004 mit WordPress.

  1. Genau das, was wir gerade für eine Website gesucht haben. Sehr guter und umfassender WordPress-Blog insgesamt! VG

    Antworten

  2. Wie ist es wen man mehrere Bilder anzeigen will?

    Antworten

    1. Mit der oben beschriebenen Methode können nur einzelne Elemente in einer Lightbox präsentiert werden. Ich würde für mehrere Bilder ein passendes Lightbox-Plugin verwenden.

      Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.