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.
Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.
Genau das, was wir gerade für eine Website gesucht haben. Sehr guter und umfassender WordPress-Blog insgesamt! VG
Wie ist es wen man mehrere Bilder anzeigen will?
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.
Hallo,
Ist es möglich die Größe der Box anzupassen? Denn wenn ich Seiten oder pdf o.Ä. einbinde, ist der Inhalt größer als die Box und man muss viel scrollen. Ich würde gerne das so einstellen, dass die Box eine max-width hat und sich mit der Einschränkung beliebig vergrößert. Meine bisherigen Versuche blieben aber ohne Erfolg.
Vielen Dank für den tollen Beitrag!