Ihr bewährter Begleiter.
(Bilder von pixelcreatures)
Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.
Mehr Funktionen, mehr Möglichkeiten.
= Ihr Erfolgsrezept
Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.
Der Classic-Editor für alle.
Erleben Sie es.
Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.
Der Advanced Editor für kreative Köpfe.
Advanced Editor Tools
Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.
Die Lightbox ist ein unverzichtbares Element zur Darstellung von Bildern auf Websites. Oft genügt es, Bilder in einem etwas vergrößerten Format darzustellen und hervorzuheben. Manchmal werden Bilder auch in einer Galerie präsentiert, die dann fortlaufend betrachtet werden soll. Eine Lightbox ermöglicht dies alles mit minimalem Aufwand und einer geringen Dateigröße. Besonders für Websites, die auf Performance optimiert sind, ist dies von großem Vorteil. Auch für Websites, die bereits mit JavaScript überladen erscheinen, bietet eine leichte Lightbox-Lösung eine elegante Lösung.
Für "WP Featherlight" haben wir eine "Diashow mit Abspielen und Zeitvorwahl" entwickelt, eine Erweiterung, die die Lightbox noch besser macht. Diese Funktion ermöglicht es den Nutzern, Bilder automatisch abzuspielen und sogar die Zeit zwischen den Bildern anzupassen. Zur besseren Übersichtlichkeit der Bildanzahl ist zudem ein Bildzähler integriert. Dadurch erhöht sich die Benutzerfreundlichkeit und Flexibilität der Lightbox. 🧡
Wir haben uns verschiedene Lightbox-Plug-ins angesehen und möchten nun eines davon vorstellen: WP Featherlight – A Simple jQuery Lightbox. Das Besondere an diesem Plug-in ist seine Einfachheit, denn diese Lightbox entfaltet erst durch die Erfahrung ihr wahres Potenzial. Das Plug-in bewährt sich in technischen Herausforderungen und lässt sich dabei des CSS noch anpassen. Auch wenn keine Einstellungen verfügbar sind.
Das Bild "Eule" in der Lightbox öffnen: Abbildung von GPJ.
Plug-in WP Featherlight.
Für "WP Featherlight" sind keine Einstellungen erforderlich, sodass Sie es installieren können, ohne etwas konfigurieren zu müssen. Falls Sie auf bestimmten Seiten oder Beiträgen keinen Lightbox-Effekt wünschen, können Sie ihn direkt im Editor im Widget "Veröffentlichen" deaktivieren. Das kann von Nutzen, sein, um die Plug-in-Scripte nicht zu laden, wenn man die Lightbox der Seite nicht anwendet.
Inhaltsverzeichnis
Lightbox, wie selbst erstellt!
Hier präsentieren wir die Lightbox WP Featherlight, die wir an unsere eigenen CSS-Vorlieben angepasst haben. Doch nicht nur das Aussehen hat uns überzeugt, auch die technischen Aspekte machen dieses Plug-in besonders.
WP Featherlight, die Funktionsweise
Die Sache ist sehr gut durchdacht.
- Die Lightbox funktioniert sowohl für Einzelbilder1 als auch für Galerien.
- Wenn eine Galerie definiert ist und Einzelbilder auf der Seite vorhanden sind, werden die Einzelbilder auch als solche dargestellt und nicht als Teil der Galerie.
- Wenn mehrere Galerien auf der Seite vorhanden sind, werden sie in der Lightbox getrennt angezeigt, nicht kontinuierlich. – Ein großartiges Feature.
- Die Navigationsbuttons für Vor- und Zurück in der Galerie sind jeweils am Rand platziert, sodass man entspannt durch die Galerie navigieren kann, ohne versehentlich die Lightbox zu schließen oder dem Weiter-Button folgen muss. Da Bilder oft unterschiedliche Größen haben, ändert sich der Bildbereich, aber die Buttons bleiben immer an derselben Stelle.
- Tastatursteuerung: Mit 'Enter' wird die Lightbox geöffnet und mit 'Esc' geschlossen. Galerien können mittels der Pfeiltasten vorwärts und rückwärts navigiert werden.
1) Vor- und Zurück-Pfeile auch bei Einzelbildern – wenn es gewünscht ist, dass alle Bilder der Seite in einer Galerie zusammengefasst werden: Hierzu ist unter 'Einzigartige Feinabstimmungen' der entsprechende Code zu finden.
Die oben genannten Punkte sind bereits beeindruckend.
Innovation, die in jeder Lightbox leuchtet
– technisch und intuitiv.
- Die Lightbox kann durch Klicken auf den entsprechenden Button oder außerhalb des Bildbereichs geschlossen werden. So wird ein versehentliches Schließen durch Klicken auf das Bild vermieden.
- Die Integration von Cursors ist ebenfalls bemerkenswert, da Nutzer stets über ihre Interaktionen informiert bleiben. Dadurch wird der Schließen-Button fast überflüssig und könnte sogar weggelassen werden, aber gemäß den "Best Practices" gehört er dazu.
- Die Lightbox verwendet Bildunterschriften, die jedem Bild vorangestellt sind und nicht den Alt-Text als Beschriftung.
- In der Lightbox wird die Bildunterschrift diskret angepasst, falls sie nicht in die Breite des Bildes passt. Anstatt sie einfach umzubrechen oder abzuschneiden, wird sie geschickt durch Auslassungspunkte gekürzt. Bei Mouseover kann man die gesamte Bildunterschrift einblenden. Dies trägt zu einem eleganten Erscheinungsbild bei.
Die automatische Diashow ist nicht integriert, aber wir bieten diese Option an, wie aus den folgenden Beispielen hervorgeht.
Die erste WP-Galerie auf der Seite
– klar definiert in der Lightbox Featherlight!
Es ist erwünscht gern mit Audio!
Bilder und Audio von jplenio!
Einzigartige Feinabstimmungen
Unsere Anpassungen sind rein Geschmackssache, aber sie gefallen uns und wenn du Interesse hast, kannst du sie hier sehen. Mithin ein paar Variationen.
Alle Bilder der Seite in einer Galery?
Die Bilder auf dieser Website werden gemäß den Vorgaben des Plug-ins wiedergegeben, wie oben in WP Featherlight beschrieben.
Häufig wird auch gefragt, ob die Vor- und Zurück-Pfeile auch bei Einzelbildern angezeigt werden können, um alle Bilder der Seite in einer Galerie zusammenzufassen. Dies kann durch das folgende JavaScript erreicht werden. Bitte beachte die unten aufgeführten Informationen und es gibt auch eine einfachere Methode unserer Empfehlung.
/* WP Fetherlight alle Bilder in einer Galerie */
jQuery(document).ready(function($) {
// Füge nur Bildern, die auf die Mediendatei verlinken, eine gemeinsame Galerie-Klasse hinzu
$('a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"]').each(function() {
if ($(this).find('img').length) {
$(this).attr('data-featherlight', 'image');
$(this).attr('data-featherlight-group', 'gallery');
}
});
// Initialisiere Featherlight für die Bilder
$('a[data-featherlight="image"]').featherlightGallery({
previousIcon: '', // "previous" character
nextIcon: '', // "next" character
galleryFadeIn: 100, // fadeIn speed when slide is loaded
galleryFadeOut: 300 // fadeOut speed before slide is loaded
});
});
/* Ende WP Fetherlight alle Bilder in einer Galerie */Im obigen Code sind auch Bilder der Widgets enthalten. Wenn Bilder von Widgets aus der Galerie ausgeschlossen werden sollen, können diese mit dem folgenden Code innerhalb der Classe .entry-content ausgeschlossen werden:
/* WP Fetherlight alle Bilder inner '.entry-content' in einer Galerie */
jQuery(document).ready(function($) {
// Füge nur Bildern, die auf die Mediendatei verlinken, eine gemeinsame Galerie-Klasse hinzu
$('.entry-content a[href$=".jpg"], .entry-content a[href$=".jpeg"], .entry-content a[href$=".png"], .entry-content a[href$=".gif"]').each(function() {
if ($(this).find('img').length) {
$(this).attr('data-featherlight', 'image');
$(this).attr('data-featherlight-gallery', 'gallery'); // Gruppe für alle Bilder hinzufügen
}
});
// Initialisiere Featherlight für die Bilder in der Gruppe 'gallery'
$('[data-featherlight-gallery="gallery"]').featherlightGallery({
previousIcon: '', // "previous" character
nextIcon: '', // "next" character
galleryFadeIn: 100, // fadeIn speed when slide is loaded
galleryFadeOut: 300 // fadeOut speed before slide is loaded
});
});
/* Ende WP Fetherlight alle Bilder in einer Galerie */
Der JS Code, der alle Bilder in einer Galerie zusammenfasst, kann nicht gleichzeitig mit dem Code für die automatische Diashow verwendet werden, da dies nicht funktioniert. Genauer gesagt bedeutet das: Obwohl der automatische Diashow-Code mit WP Featherlight verknüpft ist, werden die entsprechenden Steuerelemente für die automatische Diashow nicht visuell dargestellt.
Alternativ und Empfehlung
Alternativ kann auch ohne zusätzliches JavaScript <div class="gallery">...</div> verwendet werden, um alle Bilder innerhalb dieses Blocks als Galerie zusammenzufassen.
<div class="gallery">...</div>Siehe WP Featherlight: Vor und zurück durch alle Bilder.
Hiermit ist auch der Code für die automatische Diashow funktionell. Wenn zwischen den Einzelbildern Galerien definiert sind, werden diese ebenfalls einbezogen. Der Bildzähler wird dabei zurückgesetzt und zeigt die Anzahl der jeweiligen Galerie an.
Es bleibt immer nur die Lightbox, so wie sie sein sollte.
Das Overlay
Das Overlay der Farbe und die Opazität ist einfach anpassbar, das ist der ganze Bereich hinter dem Bild:
/* Overlay Lightbox Featherlight */
.featherlight:last-of-type {
background: rgba(0, 0, 0, 0.8);
}
Die Ecken des Bildes
Die Ecken des Bildes können folgendermaßen angepasst werden:
/* Ecken des Bildes Lightbox Featherlight */
.featherlight-content {
border-radius: 1vw;
}
.featherlight .featherlight-image {
border-radius: 1vw;
}
Ein paar Worte zu den abgerundete Ecken (border-radius): Der Border-Radius kann in verschiedenen Browsern unterschiedlich sein. Zum Beispiel wird der Border-Radius in Safari und Firefox oft größer dargestellt als in Chrome, Opera und Edge.
Früher waren Browser-Präfixe wie '-webkit-', '-moz-', '-ms-' und '-o-' üblich, um eine konsistente Darstellung zu gewährleisten. Heutzutage reicht jedoch oft die Standard-Definition wie border-radius: 0.2vw; aus, da moderne Browser diese Präfixe nicht mehr anwenden.
Die Größe der Lightbox
Die Größe der Lightbox für das Bild und die Auflösung werden beibehalten:
/* Größe von Bild in der Lightbox */
.featherlight .featherlight-image {
max-width: 80vw;
max-height: 80vh;
width: auto;
height: auto;
}
Für iFrames sollte das dann auch so angepasst werden, sonst entsteht ein schwarzer Rand:
/* Größe von Inhalt für iFrame-Lightbox */
.featherlight-iframe .featherlight-content {
max-width: 80vw;
max-height: 80vh;
width: auto;
height: auto;
}Am Ende des Beitrags bindet sich ein Beispiel für iFrame in der Lightbox, siehe Eija, …
Rahmen um die Lightbox
Einen Rahmen durch Box-Schatten, ohne das Bildverhältnis zu beeinträchtigen und Ecken abgerundet:
/* Box-Schatten als Rahmen und Ecken abgerundet Lightbox Featherlight */
.featherlight .featherlight-image {
box-shadow: 0 0 0 30px rgba(255, 255, 255, 1);
border-radius: 0.2vw;
}
Kreative Schatteneffekte für die Lightbox
Mit dem Suchbegriff 'box-shadow' finden sich Beispiele von »Sehr gut«! Allerdings kann man immer nur einen anwenden.
/* Helle und dunkle Schatten zur Hervorhebung */
.featherlight .featherlight-image {
box-shadow: 6px 6px 8px rgba(255, 255, 255, 1),
-6px -6px 8px rgba(0, 0, 0, 0.15);
}
/* Einfache helle und dunkle Schatten */
.featherlight .featherlight-image {
box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.2),
-6px -6px 8px rgba(255, 255, 255, 0.8),
6px 6px 12px rgba(0, 0, 0, 0.1),
-6px -6px 12px rgba(255, 255, 255, 0.5);
}
/* Bunte Schatten für dramatischen Effekt */
.featherlight .featherlight-image {
box-shadow: 4px -4px 15px 0px #ff1f1f,
12px -11px 7px 0px #ff9376,
20px -5px 7px 0px #ffe264,
20px 6px 7px 0px #f6ff33,
13px 12px 17px 0px #ff9527,
2px 17px 17px 0px #ff0000,
-9px 21px 18px 0px #fff212,
-9px 6px 11px 0px #ff0808,
-11px -9px 11px 0px #fffa17,
-11px -9px 11px 0px #fffa17,
-32px -23px 0px -5px rgba(0, 0, 0, 0);
}
/* Gestapelte bunte Schatten für intensiven Effekt */
.featherlight .featherlight-image {
box-shadow: 8px 0px 0px 0px #dcd0c0,
0px 8px 0px 0px #b1938b,
-8px 0px 0px 0px #4e4e56,
0px 0px 0px 8px #da635d,
-32px -23px 0px -5px rgba(0, 0, 0, 0);
}
/* Extrovertierte, scharfe, gestapelte Schatten */
.featherlight .featherlight-image {
box-shadow: 10px 0 0 #f0f0f0,
20px 0 0 #000,
30px 0 0 #f0f0f0,
0 10px 0 #f0f0f0,
10px 10px 0 #000,
20px 10px 0 #f0f0f0,
30px 10px 0 #000,
0 20px 0 #000,
10px 20px 0 #f0f0f0,
20px 20px 0 #000,
30px 20px 0 #f0f0f0,
0 30px 0 #f0f0f0,
10px 30px 0 #000,
20px 30px 0 #f0f0f0,
30px 30px 0 #000,
-32px -23px 0px -5px rgba(0, 0, 0, 0);
}
/* Box-Schatten in verschiedenen Richtungen */
.featherlight .featherlight-image {
box-shadow: 0px 0px 0px 5px #fff,
0px 10px 27px -8px #141414,
0px -10px 27px -8px #a31925,
5px 5px 15px 5px rgba(0, 0, 0, 0);
}
/* Scharfer Schatten mit betonten Ecken */
.featherlight .featherlight-image {
box-shadow: 0px 20px 0px -10px #ffffff,
0px -20px 0px -10px #ffffff,
20px 0px 0px -10px #ffffff,
-20px 0px 0px -10px #ffffff,
0px 0px 0px 10px #ff0000,
5px 5px 15px 5px rgba(0, 0, 0, 0);
}
/* Weiche gestapelte Schatten */
.featherlight .featherlight-image {
box-shadow: 0 45px 65px rgba(0, 0, 0, 0.5),
0 35px 22px rgba(0, 0, 0, 0.16);
}
/* Scharfter Schatten hell und dunkel */
.featherlight .featherlight-image {
box-shadow: 8px 8px #fff, -8px -8px #ccc;
}Oder sollte man doch mehr als einen Rahmen definieren? Ja, was für Laptops und Desktops geeignet ist, könnte für Displays von mobilen Geräten ungeeignet sein. Zum Beispiel mit Nachtmodus:
/* Rahmen für die Lightbox */
@media only screen and (max-width: 767px) {
.featherlight .featherlight-image {
box-shadow: 6px 6px 8px rgba(255, 255, 255, 0.9),
-6px -6px 8px rgba(0, 0, 0, 0.15);
}
}
@media only screen and (min-width: 768px) {
.featherlight .featherlight-image {
border-radius: 5px;
box-shadow: 8px 8px #fff, -8px -8px #ccc;
}
[nighteyeplgn="active"] .featherlight .featherlight-image {
border-radius: 5px;
box-shadow: 8px 8px #999, -8px -8px #666;
}
}Zum Nachtmodus ist es hilfreich, sich mit den Grautönen und besondere deren Kurzschreibweise zu befassen, siehe im Beitrag Farbgestaltung in CSS.
Die Bildbeschriftung anpassen
Die Bildbeschriftung anpassen und zentrieren:
/* Bildbeschriftung Lightbox Featherlight */
.featherlight .featherlight-content .caption {
color: #838485;
font-size: 1.15em;
font-weight: 300;
line-height: 1.5;
text-align: center;
top: auto;
bottom: 10;
left: 0;
right: 0;
transform: none;
}
Die Buttons anpassen
Die Buttons, für das nächste und vorherige Bild in der Größe verändern, die Opazität variieren und zum Beispiel im Goldenen-Schnitt setzten:
/* Buttons für nächstes und vorheriges Bild Lightbox Featherlight */
.featherlight-next,
.featherlight-previous {
width: 55px;
opacity: 0.4;
top: 60%;
}
Das Schließen-Icon und deren Hintergrund anpassen:
/* Schließen-Icon und Hintergrund Lightbox Featherlight */
.featherlight-close-icon.featherlight-close {
-webkit-background-size: 75%;
background-size: 60%;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 10%;
/*display:none;*/
}
Unschärfeeffekt bei Mouseover
Der Unschärfeeffekt beim Mouseover kann Benutzer dazu anregen, Bilder in der Lightbox zu öffnen. Zusätzlich zum Unschärfeeffekt könnte ein separater Cursor erstellt werden, der speziell für die Lightbox angepasst ist.
Die Interaktion mit den Cursors ist sehr gut gelöst. Falls gewünscht, kann für das Mouseover der Bilder auch ein eigener Cursor erstellt werden, der entsprechend in der Lightbox angepasst ist. Der SVG-Cursor in diesem Beispiel hat eine Größe von 30px. Diese Größe sollte direkt im SVG festgelegt werden:
<svg viewBox="0 0 10.532 10.513" width="30px" height="30px" xmlns="http://www.w3.org/2000/svg">
Somit folgendem CSS wird der Unschärfeeffekt und die neuen Cursors visuell:
/* Cursor für Featherlight-Bilder */
[data-featherlight] img {
cursor: url('../cursor-zoom-30.svg'), auto;
}
/* Cursor für Lightbox */
.featherlight {
cursor: url('../cursor-zoom-out-30.svg'), auto;
}
/* Unschärfeeffekt bei Mouseover */
[data-featherlight] img {
transition: filter 0.3s ease;
}
[data-featherlight] img:hover {
filter: blur(2px);
}Der Cursor (cursor-zoom-out) für die Lightbox ist hier nur der Vollständigkeit halber aufgeführt und wird nicht verwendet, da ein größerer Cursor in der Lightbox eher disruptiv wirkt.
Psychologie zum Unschärfeeffekt
Der Unschärfeeffekt beim Mouseover kann aus mehreren Gründen dazu führen, dass Benutzer dazu angeregt werden, Bilder in der Lightbox zu öffnen. Hier sind einige mögliche Erklärungen:
- Neugierde: Wenn das Bild unscharf wird, weckt dies möglicherweise die Neugierde des Betrachters, um zu sehen, wie das Bild in seiner scharfen und detaillierten Form aussieht. Dies könnte dazu führen, dass sie das Bild öffnen, um es genauer anzusehen.
- Interaktion: Der Unschärfeeffekt kann als eine Art Interaktion wahrgenommen werden. Wenn Benutzer mit dem Mauszeiger über das Bild fahren und es unscharf wird, fühlen sie sich aktiv involviert und möchten möglicherweise mehr erkunden, indem sie das Bild öffnen.
- Visuelle Hervorhebung: Der Unschärfeeffekt kann das Bild visuell hervorheben und es von anderen Inhalten auf der Seite abheben. Dadurch wird das Bild auffälliger, was die Wahrscheinlichkeit erhöhen kann, dass Benutzer es öffnen.
Insgesamt kann der Unschärfeeffekt eine subtile, aber wirkungsvolle Möglichkeit sein, Benutzer dazu zu ermutigen, Bilder in der Lightbox zu öffnen, indem er ihre Neugierde weckt, eine Interaktion bietet und das Bild visuell hervorhebt.
Und neugierig, was der Autor von WP Featherlight so macht?
Lightbox und Dunkelmodus
Die Bilder in der Lightbox werden von Dunkelmodus mit einem Filter versehen, der mit kleinem CSS richtiggestellt werden kann. Das !important kann verbindlich sein, außer es wird im Customizer abgeseichert.
/* Standard Lightbox Styling - Verhindert Dunkelmodus-Effekte */
[nighteyeplgn="active"] .featherlight-content img {
filter: none !important;
}🧡 WP Featherlight mit Abspiel-Buttons
Eine automatische Diashow erlaubt es, die Bilder oder Inhalte automatisch durchlaufen zu lassen. Das lässt sich mit JavaScript und einer gewissen Menge an CSS einrichten.
Beim Öffnen der Lightbox ist die grundlegende Einstellung, dass der Benutzer die Weiter- und Zurück-Buttons betätigen kann. Die automatische Diashow kann durch den Start-Button gestartet werden, wobei die Vorgabezeit zwischen den Bildern standardmäßig auf sechs Sekunden eingestellt ist.
Erlebe leichte Eleganz: Mit WP Featherlight plus Diashow tanzen die Bilder im Takt – ein Dank an die Brillanz von WP Featherlight!
Durch die Buttons zur Inkrementierung und Dekrementierung ist die Zeitdauer zwischen 1 und 30 Sekunden eingestellt, wobei der Start-Button erneut betätigt werden muss, um die Änderung zu übernehmen. Jede Änderung der Zeitdauer führt dazu, dass die Diashow gestoppt wird und die Bilder nicht übersprungen werden. Dadurch wird ein entspanntes Benutzererlebnis gewährleistet.
Die Show kann durch den Stopp-Button jederzeit angehalten und mit dem Start-Button wieder fortgesetzt werden. Diese Funktionsweise ermöglicht es dem Benutzer, die Diashow ganz nach seinen Wünschen und Bedürfnissen anzupassen und dabei die Kontrolle über den Ablauf zu behalten. Nach dem Schließen der Lightbox und erneutem Öffnen ist die letzte Zeit eingestellt.
Die Diashow stoppt automatisch, wenn die Seite nicht sichtbar ist (z.B. wenn der Bildschirm ausgeschaltet wird, der Laptop zugeklappt wird oder man den Browser-Tab wechselt). Die Diashow bleibt gestoppt, bis sie manuell wieder gestartet wird. Dies gewährleistet, dass der Ablauf der Diashow nicht gestört oder irritiert ist, wenn man zur Seite zurückkehrt.
Dieser JavaScript-Code blendet die Diashow-Buttons automatisch aus, wenn keine Mausbewegung stattfindet, und blendet sie wieder ein, wenn der Benutzer den Cursor bewegt oder das Display auf mobilen Geräten berührt. Dasselbe findet bei einer Tastaturinteraktion statt. Dadurch wird dem Benutzer ein ruhigeres Bild der Diashow geboten.
WP Featherlight Tastatursteuerung: Mit 'Enter' wird die Lightbox geöffnet und mit 'Esc' geschlossen. Galerien können mittels der Pfeiltasten vorwärts und rückwärts navigiert werden.
Intuitive Bedienung für nahtloses Diashow-Vergnügen.
Tastatursteuerung samt Abspiel-Buttons
- Enter-Taste:
- Öffnet die Lightbox, wenn sie geschlossen ist.
- Pfeiltasten:
- Arrow Up / Arrow Down: Navigiert durch die verfügbaren Buttons in der Lightbox (zirkulär) und
- Arrow Left / Arrow Right: Ermöglichen die Navigation in Galerien vorwärts (rechts) und rückwärts (links).
- Leertaste (Space):
- Simuliert einen Klick auf das aktuell fokussierte Element (z.B. Start-, Stop- oder Zeit-Buttons).
- Escape-Taste (Esc): Schließt die LIghtbox.
Diese Steuerungen verbessern die Benutzerfreundlichkeit, indem sie eine einfache Navigation und Interaktion mit der Lightbox inklulsive Abspiel-Buttons ermöglichen.
Folgendes ist nun ein Schmankerl durch unser Helferlein mit einer allgemeinen Danksagung an ChatGPT von uns.
- Das JavaScript umfasst grundlegende Funktionen, die Ein- und Ausblendung sowie die Tastaturnavigation.
- Im nächsten Abschnitt findet sich das CSS unserer Lightbox, das auch für den Nachtmodus optimiert ist und bei Bedarf leicht angepasst werden kann.
Unsere Lightbox: das JavaScript
Grundlegend ist das im Zusammenspiel der Codes des Entwicklungsabschnitts:
- Script Unicode-Zeichen im JS (3)
- Steuerung für Desktop und mobile Geräte (B) und
- Script zur Erweiterung der Tastaturbedienung.
Da das Plug-in selten Updates benötigt, könnte man das nach einer möglichen Komprimierung (z.B. mit Toptal), direkt in die Datei WP Featherlight js > wpFeatherlight.pkgd.min.js des Plug-ins unterhalb des bestehenden Codes hinzuzufügen. Bedenke, dass nach eventuellen Plug-in-Updates diese Änderungen erneuert werden müssen.
wp-featherlight-diashow-funktion.js
/**
* Dieses Script steuert die Diashow-Funktionalität in einer Lightbox-Galerie von WP Featherlight und ermöglicht die Interaktion sowohl mit Maus, Tastatur als auch Touchscreen.
* Es bietet Funktionen zum automatischen Abspielen der Diashow, zum Anzeigen eines Bildzählers, sowie zur Steuerung über Tastatur und Maus.
*/
/**
* Hauptfunktionen im Überblick:
*
* - **Diashow-Steuerung:**
* - Automatisches Weiterklicken in der Diashow.
* - Anpassbare Abspielgeschwindigkeit mit Buttons zur Erhöhung/Verkürzung der Zeitintervalle.
* - Starten und Stoppen der Diashow per Button.
*
* - **Bildzähler:**
* - Zeigt den aktuellen Fortschritt in der Galerie an.
* - Aktualisiert sich bei jedem Bildwechsel, auch bei Nutzung der Tastaturnavigation.
*
* - **Tastaturnavigation:**
* - Pfeiltasten: Navigation zwischen den Buttons.
* - Leertaste: Aktiviert den aktuell fokussierten Button.
* - Automatische Einblendung der Buttons bei Tastatureingaben.
*
* - **Mausinteraktionen:**
* - Buttons werden bei Mausbewegungen oder Klicks eingeblendet.
* - Automatisches Ausblenden der Buttons nach einer bestimmten Zeit ohne Interaktion.
*
* - **Touch-Unterstützung:**
* - Buttons werden bei Berührung auf mobilen Geräten eingeblendet.
*
* - **Lightbox-Integration:**
* - Schließt die Diashow bei Verlassen der Lightbox.
* - Aktualisiert die Anzeige basierend auf der aktuellen Position in der Galerie.
*
* - **Page Visibility API:**
* - Pausiert die Diashow automatisch, wenn die Seite in den Hintergrund wechselt.
*/
/* --- Diashow-Button-Steuerung für Desktop und Mobil, Bildzähler stets sichtbar; Tastaturnavigation kompatibel --- */
jQuery(document).ready(function($) {
var interval = 6000; // Zeitintervall für das automatische Weiterklicken (in Millisekunden)
var intervalId; // Variable zur Speicherung der Interval-ID für das Starten und Stoppen der Diashow
// Funktion zum Klicken des Weiter-Buttons
function clickNext() {
var nextButton = $(".featherlight-next");
if (nextButton.length > 0) {
nextButton.trigger("click");
}
}
// Funktion zum Starten der Diashow
function startSlideshow() {
if (intervalId) {
return; // Falls die Diashow bereits läuft, beende die Funktion
}
clickNext();
intervalId = setInterval(clickNext, interval);
}
// Funktion zum Stoppen der Diashow
function stopSlideshow() {
clearInterval(intervalId);
intervalId = null; // Setze Interval-ID auf null, um anzuzeigen, dass die Diashow gestoppt ist
}
// Funktion zum Inkrementieren der Abspielzeit
function incrementTime() {
stopSlideshow();
if (interval < 30000) {
interval += 1000;
}
updateTimeDisplay();
}
// Funktion zum Dekrementieren der Abspielzeit
function decrementTime() {
stopSlideshow();
if (interval > 1000) {
interval -= 1000;
}
updateTimeDisplay();
}
// Funktion zum Aktualisieren der Anzeige der aktuellen Abspielzeit
function updateTimeDisplay() {
var seconds = interval / 1000;
var formattedSeconds = seconds < 10 ? "0" + seconds : seconds;
$("#current-time-display").html(formattedSeconds + "<span class='seconds-label'>s</span>");
}
// Funktion zum Hinzufügen der Start- und Stop-Schaltflächen und des Incrementer/Decrementer in die Lightbox
function addSlideshowButtons() {
if ($("#slideshow-buttons").length === 0) {
var slideshowControls = $("<div id='slideshow-buttons'>" +
"<button id='start-slideshow-button' title='Start Slideshow'>▶</button>" +
"<button id='increment-time-button' title='Diashow-Zeit'>▾</button>" +
"<span id='current-time-display'>6</span>" +
"<button id='decrement-time-button' title='Diashow-Zeit'>▿</button>" +
"<button id='stop-slideshow-button' title='Stop Slideshow'>〓</button>" +
"<div class='featherlight-counter'></div>" +
"</div>");
$(".featherlight").append(slideshowControls);
slideshowControls.find("#start-slideshow-button").on("click", function() {
if (interval > 0) {
startSlideshow();
}
});
slideshowControls.find("#stop-slideshow-button").on("click", function() {
stopSlideshow();
});
slideshowControls.find("#increment-time-button").on("click", function() {
incrementTime();
});
slideshowControls.find("#decrement-time-button").on("click", function() {
decrementTime();
});
}
}
// Funktion zum Überprüfen, ob das Element Teil einer Galerie ist
function isGallery(element) {
return $(element).closest(".gallery").length > 0;
}
// Funktion zur Berechnung des aktuellen Bildindexes
function getCurrentImageIndex(gallery, currentImage) {
var $images = gallery.find("[data-featherlight]");
var index = $images.toArray().indexOf(currentImage[0]);
return index;
}
// Funktion zum Aktualisieren des Bildzählers
function updateImageCounter(gallery, currentIndex) {
var $images = gallery.find("[data-featherlight]");
var totalImages = $images.length;
var currentImageIndex = currentIndex + 1;
$(".featherlight-counter").text(currentImageIndex + "/" + totalImages);
}
// Funktion zum Verarbeiten von Bildwechsel-Ereignissen
function handleImageChange() {
var featherlight = $.featherlight.current();
if (featherlight) {
var gallery = featherlight.$currentTarget.closest(".gallery");
var currentImage = featherlight.$currentTarget;
var currentIndex = getCurrentImageIndex(gallery, currentImage);
updateImageCounter(gallery, currentIndex);
}
}
// Event-Listener für das Öffnen der Lightbox
$(document).on("click", "[data-featherlight]", function() {
if (isGallery(this)) {
var gallery = $(this).closest(".gallery");
addSlideshowButtons();
updateTimeDisplay();
var initialIndex = getCurrentImageIndex(gallery, $(this));
updateImageCounter(gallery, initialIndex);
// Bildwechselereignisse verarbeiten
$(document).off("featherlight:afterContent").on("featherlight:afterContent", handleImageChange);
// Überwachen von Bildwechselereignissen für Tastaturnavigation
$(document).off("keydown").on("keydown", function(event) {
if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
setTimeout(handleImageChange, 300); // Verzögerung hinzufügen, um sicherzustellen, dass der Bildwechsel abgeschlossen ist
}
});
}
});
// Event-Listener für das Schließen der Lightbox
$(document).on("click", ".featherlight-close", function() {
stopSlideshow();
});
// Zusätzliche Event-Listener für Weiter- und Zurück-Button in der Galerie
$(document).on("click", ".featherlight-next, .featherlight-previous", function() {
setTimeout(handleImageChange, 300); // Verzögerung hinzufügen, um sicherzustellen, dass der Bildwechsel abgeschlossen ist
});
// Page Visibility API nutzen, um die Diashow zu pausieren, wenn die Seite nicht sichtbar ist
document.addEventListener("visibilitychange", function() {
if (document.hidden) {
stopSlideshow();
}
});
});
document.addEventListener("DOMContentLoaded", function() {
let featherlightOpen = false;
let currentFocusElement = null;
// Funktion zum Setzen des Fokus auf das Element
function setFocus(element) {
if (element) {
element.focus();
currentFocusElement = element;
}
}
// Funktion zur Handhabung der Tasteneingaben
function handleKeyboardNavigation(event) {
const featherlight = document.querySelector(".featherlight");
const featherlightCloseButton = document.querySelector(".featherlight-close");
const startSlideshowButton = document.querySelector("#start-slideshow-button");
const incrementTimeButton = document.querySelector("#increment-time-button");
const decrementTimeButton = document.querySelector("#decrement-time-button");
const stopSlideshowButton = document.querySelector("#stop-slideshow-button");
if (featherlight) {
if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
// Bildwechsel mit Verzögerung verarbeiten
setTimeout(handleImageChange, 300);
} else if (event.key === " " && currentFocusElement) {
// Leertaste simuliert einen Klick auf den aktuellen Button
currentFocusElement.click();
event.preventDefault();
} else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
const buttons = Array.from(document.querySelectorAll(
"#start-slideshow-button, #increment-time-button, #decrement-time-button, #stop-slideshow-button"
));
const currentIndex = buttons.indexOf(currentFocusElement);
let newIndex = -1;
if (event.key === "ArrowDown") {
newIndex = (currentIndex + 1) % buttons.length;
} else if (event.key === "ArrowUp") {
newIndex = (currentIndex - 1 + buttons.length) % buttons.length;
}
if (newIndex >= 0 && newIndex < buttons.length) {
setFocus(buttons[newIndex]);
event.preventDefault();
}
}
}
}
// Überwache das Öffnen und Schließen der Lightbox
document.addEventListener("keydown", handleKeyboardNavigation);
document.addEventListener("featherlight-opened", function() {
featherlightOpen = true;
const startSlideshowButton = document.querySelector("#start-slideshow-button");
if (startSlideshowButton) {
setFocus(startSlideshowButton);
}
});
document.addEventListener("featherlight-closed", function() {
featherlightOpen = false;
currentFocusElement = null;
// Nach dem Schließen den Fokus auf das Body-Element setzen, um die Leertaste zu reaktivieren
document.activeElement.blur();
document.body.focus();
});
});
// gallery-navigation-handler
jQuery(document).ready(function($) {
var buttonVisibilityDuration = 4000;
var hideTimeout;
var lastMouseX = 0;
var lastMouseY = 0;
var movementThreshold = 50;
function showButtons() {
$("#slideshow-buttons button, #current-time-display").css("opacity", 1);
resetHideTimeout();
}
function hideButtons() {
$("#slideshow-buttons button, #current-time-display").css("opacity", 0);
}
function resetHideTimeout() {
clearTimeout(hideTimeout);
hideTimeout = setTimeout(hideButtons, buttonVisibilityDuration);
}
function handleMouseMove(event) {
var deltaX = Math.abs(event.pageX - lastMouseX);
var deltaY = Math.abs(event.pageY - lastMouseY);
if (deltaX > movementThreshold || deltaY > movementThreshold) {
showButtons();
lastMouseX = event.pageX;
lastMouseY = event.pageY;
}
}
$(document).on("mousemove", handleMouseMove);
$(document).on("featherlight-opened", function() {
showButtons();
resetHideTimeout();
});
$(document).on("featherlight-closed", function() {
clearTimeout(hideTimeout);
});
});
// gallery-navigation-handler
jQuery(document).ready(function($) {
var buttonVisibilityDuration = 4000;
var hideTimeout;
var lastMouseX = 0;
var lastMouseY = 0;
var movementThreshold = 50;
function showButtons() {
$("#slideshow-buttons button, #current-time-display").css("opacity", 1);
resetHideTimeout();
}
function hideButtons() {
$("#slideshow-buttons button, #current-time-display").css("opacity", 0);
}
function resetHideTimeout() {
clearTimeout(hideTimeout);
hideTimeout = setTimeout(function() {
hideButtons();
}, buttonVisibilityDuration);
}
// Mausinteraktionen
$(document).on("mousemove", function(event) {
var mouseX = event.pageX;
var mouseY = event.pageY;
var deltaX = Math.abs(mouseX - lastMouseX);
var deltaY = Math.abs(mouseY - lastMouseY);
if (deltaX > movementThreshold || deltaY > movementThreshold) {
showButtons();
lastMouseX = mouseX;
lastMouseY = mouseY;
}
});
$(document).on("click", "[data-featherlight]", function() {
showButtons();
});
$(document).on("mouseleave", ".featherlight-content", function() {
resetHideTimeout();
});
$(document).on("touchstart", function() {
showButtons();
});
// Tastaturinteraktionen
document.addEventListener("keydown", function(event) {
var isLightboxOpen = document.querySelector(".featherlight-content") !== null;
if (isLightboxOpen && ["ArrowUp", "ArrowDown", " "].includes(event.key)) {
showButtons();
}
if (isLightboxOpen && event.key === "Enter") {
event.preventDefault();
}
});
hideButtons();
// Diashow stoppen, wenn '.featherlight-next' oder '.featherlight-previous' geklickt wird
$(".featherlight-next, .featherlight-previous").on("click", function() {
clearInterval(intervalId); // Stoppt die Diashow
});
});
/* - Ende Diashow-Button-Steuerung für Desktop und Mobil, Bildzähler stets sichtbar; Tastaturnavigation kompatibel - */Um sicherzustellen, dass die Abspiel-Buttons bei Mouseover sichtbar bleiben und die Ein- und Ausblendung sanfter erfolgt, kann folgendes CSS verwendet werden:
#slideshow-buttons button,
#slideshow-buttons #current-time-display {
transition: opacity 0.5s ease;
}
#slideshow-buttons:hover button,
#slideshow-buttons:hover #current-time-display {
opacity: 1 !important;
}Obiges CSS ist folgendem Abschnitt dabei.
Unsere Lightbox: das CSS
Wir bieten unsere Lightbox in der hier gezeigten Form an. Das Besondere daran ist, dass sie einen hellen statt des üblichen dunklen Hintergrunds hat. Um dies zu ermöglichen, mussten neben den neu erstellten Abspiel-Buttons auch die Buttons von WP Featherlight angepasst werden. Diese Buttons sind SVGs und lassen sich in dieser Form nicht ohne Weiteres in ihrer Farbe ändern, wie es beispielsweise durch bestimmte Stileinstellungen möglich wäre.
Deshalb haben wir die drei SVGs von Featerhlight so angepasst, dass sie im dunklen Farbton mit Transparenz (Opazität) angezeigt werden, anstatt im hellen. Die ursprünglichen Icons wurden also invertiert. Für den Dunkel-Modus und die Lightbox braucht man Buttons mit dunklen Farben, daher werden diese weiterhin verwendet.
Die Anpassungen für Featherlight selbst wie der Lightbox können auch leicht entfernt werden, wenn der klassische Featherlight-Stil bevorzugt wird. Das top der Buttons für das vorherige und nächstes Bild sollten beibehalten werden, da dies auch den Platz für die Abspielbuttons freimacht. Bei Mobiles ist die Beschriftung der Bilder oberhalb, weil darunter die Buttons platziert sind.
CSS Bedingung
Das CSS erfodert eine höhere Priortiät als es meist des Child-Themes ist und sollte bspw. im Customizer gespeichert werden. Im normalen style.css des Child-Themes werden einige Einstellungen möglicherweise nicht ordnungsgemäß überschrieben, was zu Komplikationen mit dem WP Featherlight-Plug-in führen kann, insbesondere des CSS zur Responsivität. Siehe zum Beitrag: CSS Priorität des Child Themes.
Da das Plug-in selten Updates benötigt, könnte man das CSS auch minimieren und direkt im Plug-in-Datei-Editor in die css > wp-featherlight.min.css eintragen, also Unterhalb des bestehenden Codes. Es ist jedoch ratsam, die Datei für eventuelle Plug-in-Updates in Reserve zu halten.
Das folgende CSS ist vollständig und kann so wie es ist verwendet werden.
wp-featherlight-diashow-abspiel-buttons.css
/* === WP Featherlight Diashow: Abspiel-Buttons mit Zeitvorwahl und
* Bildzähler, autom. Ausblendung und
* Bildzähler stets visuell === */
/* --- Lightbox-Stile --- */
/* Hintergrund der Lightbox */
.featherlight:last-of-type {
background: rgba(230, 230, 230, 1);
}
/* Nachtmodus falls forhanden, je nachdem stets anzupassen */
[nighteyeplgn="active"] .featherlight:last-of-type {
background: #e6e6e6;
}
/* Standard Lightbox Styling - Verhindert Dunkelmodus-Effekte */
[nighteyeplgn="active"] .featherlight-content img {
filter: none !important;
}
/* Größe des Bildes in der Lightbox und Ecken abgerundet */
.featherlight .featherlight-image {
max-width: 80vw;
max-height: 80vh;
width: auto;
height: auto;
}
.featherlight-content {
border-radius: 0.5vw;
}
/* Größe von Inhalt für iFrame-Lightbox */
.featherlight-iframe .featherlight-content {
max-width: 80vw;
max-height: 80vh;
width: auto;
height: auto;
}
@media only screen and (max-width: 768px) {
.featherlight-content {
border-radius: 0.5vw;
}
.featherlight .featherlight-image {
border-radius: 0.5vw;
}
}
/* Rahmen für die Lightbox */
@media only screen and (max-width: 767px) {
.featherlight .featherlight-image {
box-shadow: 6px 6px 8px rgba(255, 255, 255, 1),
-6px -6px 8px rgba(0, 0, 0, 0.15);
}
}
@media only screen and (min-width: 768px) {
.featherlight .featherlight-image {
border-radius: 5px;
box-shadow: 8px 8px #fff, -8px -8px #ccc;
}
[nighteyeplgn="active"] .featherlight .featherlight-image {
border-radius: 5px;
box-shadow: 8px 8px #999, -8px -8px #666;
}
}
/* Beschriftung in der Lightbox */
.featherlight .featherlight-content .caption {
color: rgba(0, 0, 0, 0.6);
font-size: 1.15em;
font-weight: 300;
line-height: 1.3;
text-align: center;
left: 0;
right: 0;
}
@media only screen and (max-width: 320px) {
.featherlight .featherlight-content .caption {
top: -75%;
}
}
@media only screen and (min-width: 321px) and (max-width: 375px) {
.featherlight .featherlight-content .caption {
top: -60%;
}
}
@media only screen and (min-width: 376px) and (max-width: 425px) {
.featherlight .featherlight-content .caption {
top: -50%;
}
}
/* Button für das nächste/vorherige Bild und weiter @media Logik */
.featherlight-next,
.featherlight-previous {
top: 60%;
}
@media screen and (max-width: 425px) {
.featherlight-next,
.featherlight-previous {
top: 77%;
}
}
@media only screen and (min-width: 426px) and (max-width: 768px) {
.featherlight .featherlight-content .caption {
top: -20%;
}
.featherlight-next,
.featherlight-previous {
top: 90%;
}
}
/* Buttons Hover-Stile */
.featherlight-close-icon.featherlight-close:hover,
.featherlight-next:hover,
.featherlight-previous:hover {
transition: 0.3s;
opacity: 0.6;
}
[nighteyeplgn="active"] .featherlight-close-icon.featherlight-close:hover,
[nighteyeplgn="active"] .featherlight-next:hover,
[nighteyeplgn="active"] .featherlight-previous:hover {
transition: 0.3s;
opacity: 0.8;
}
/* Close Icon Tag – neu */
.featherlight .featherlight-close-icon {
background-color: transparent;
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M21%204.41L19.59%203%2012%2010.59%204.41%203%203%204.41%2010.59%2012%203%2019.59%204.41%2021%2012%2013.41%2019.59%2021%2021%2019.59%2013.41%2012%2021%204.41z%22/%3E%3C/svg%3E);
opacity: 0.4;
}
/* Close Icon Nacht – orig. */
[nighteyeplgn="active"] .featherlight .featherlight-close-icon {
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%09%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M21%204.41L19.59%203%2012%2010.59%204.41%203%203%204.41%2010.59%2012%203%2019.59%204.41%2021%2012%2013.41%2019.59%2021%2021%2019.59%2013.41%2012%2021%204.41z%22/%3E%0A%3C/svg%3E);
opacity: 0.5;
}
/* Next Icon Tag – neu */
.featherlight-next {
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M8.59%2016.59L13.17%2012%208.59%207.41%2010%206l6%206-6%206-1.41-1.41z%22/%3E%3C/svg%3E);
opacity: 0.4;
}
/* Next Icon Nacht – orig. */
[nighteyeplgn="active"] .featherlight-next {
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%09%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M8.59%2016.59L13.17%2012%208.59%207.41%2010%206l6%206-6%206-1.41-1.41z%22/%3E%0A%3C/svg%3E);
opacity: 0.5;
}
/* Prev Icon Tag – neu */
.featherlight-previous {
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M15.41%207.41L10.83%2012l4.58%204.59L14%2018l-6-6%206-6%201.41%201.41z%22/%3E%3C/svg%3E);
opacity: 0.4;
}
/* Prev Icon Nacht – orig. */
[nighteyeplgn="active"] .featherlight-previous {
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%09%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M15.41%207.41L10.83%2012l4.58%204.59L14%2018l-6-6%206-6%201.41%201.41z%22/%3E%0A%3C/svg%3E);
opacity: 0.5;
}
/* - Ende Lightbox-Stile - */
/* --- Diashow: Unicode-Zeichen im JS; Abspiel-Buttons mit Zeitvorwahl, autom. Ausblendung und Bildzähler stets visuell --- */
/* Allgemeine Stile */
#slideshow-buttons button {
color: rgba(0, 0, 0, 0.4);
}
[nighteyeplgn="active"] #slideshow-buttons button {
color: rgba(255, 255, 255, 0.5);
}
#start-slideshow-button {
vertical-align: middle;
}
#increment-time-button {
transform: rotate(180deg);
vertical-align: middle;
}
/* Allgemeine Stile für Tablets und Mobilgeräte */
@media screen and (max-width: 768px) {
#slideshow-buttons {
position: fixed;
display: flex;
flex-direction: row;
left: 50%;
top: 90%;
transform: translate(-50%, -50%);
align-items: center;
cursor: default;
}
#slideshow-buttons button {
padding: 0;
background-color: transparent;
color: rgba(255, 255, 255, 0.5);
cursor: pointer;
margin: 0 18px;
font-size: 36px;
}
#slideshow-buttons button {
color: rgba(0, 0, 0, 0.4);
}
}
/* Abspielzeit-Anzeige für alle Geräte */
#current-time-display {
position: relative;
padding: 0 6px;
border: 3px inset rgba(255, 255, 255, 0.5);
font-size: 18px;
color: rgba(0, 0, 0, 0.5);
font-weight: 400;
z-index: 20;
}
[nighteyeplgn="active"] #current-time-display {
color: rgba(255, 255, 255, 0.5);
}
@media screen and (max-width: 768px) {
#current-time-display {
margin: 0;
}
}
/* Allgemeine Stile für Laptops und Desktops */
@media screen and (min-width: 769px) {
#slideshow-buttons {
position: absolute;
top: 17%;
right: 15px;
display: flex;
flex-direction: column;
align-items: center;
cursor: default;
}
#slideshow-buttons button {
padding: 5px 7px;
background-color: transparent;
cursor: pointer;
margin: 10px 0;
font-size: 36px;
}
#current-time-display {
margin: -25px 0;
}
}
[nighteyeplgn="active"] #slideshow-buttons button {
color: rgba(255, 255, 255, 0.5);
}
/* Sekunde 's' */
.seconds-label {
font-size: 16px;
padding-left: 3px;
}
/* Inkrement- und Dekrement-Buttons z-index */
#decrement-time-button,
#increment-time-button {
z-index: 10;
}
/* Stop-Button */
#stop-slideshow-button {
transform: rotate(90deg);
margin-left: 10px;
}
/* Buttons Hover-Stile */
#decrement-time-button:hover,
#increment-time-button:hover,
#start-slideshow-button:hover,
#stop-slideshow-button:hover {
transition: 0.3s;
color: rgba(0, 0, 0, 0.6);
}
[nighteyeplgn="active"] #decrement-time-button:hover,
[nighteyeplgn="active"] #increment-time-button:hover,
[nighteyeplgn="active"] #start-slideshow-button:hover,
[nighteyeplgn="active"] #stop-slideshow-button:hover {
transition: 0.3s;
color: rgba(255, 255, 255, 0.8);
}
/* - Bildzähler allgemeine Stile - */
.featherlight-counter {
color: rgba(0, 0, 0, 0.45);
}
[nighteyeplgn="active"] .featherlight-counter {
color: rgba(255, 255, 255, 0.5);
}
/* Bildzähler für Mobilgeräte */
@media screen and (max-width: 590px) {
.featherlight-counter {
position: absolute;
display: flex;
flex-direction: row;
top: -200%;
left: 45%;
font-size: 18px;
font-weight: 500;
}
}
@media only screen and (min-width: 591px) and (max-width: 768px) {
.featherlight-counter {
position: relative;
display: flex;
flex-direction: row;
left: 2%;
font-size: 18px;
font-weight: 500;
}
}
/* Bildzähler für Laptops und Desktops */
@media screen and (min-width: 769px) {
.featherlight-counter {
position: absolute;
top: 155%;
padding: 5px 10px;
font-size: 18px;
font-weight: 500;
}
}
/* - Diashow-Button-Steuerung für Desktop und Mobil,
* Bildzähler immer sichtbar zs. JS */
#slideshow-buttons button,
#slideshow-buttons #current-time-display {
opacity: 0;
transition: opacity 0.5s ease;
}
#slideshow-buttons:hover button,
#slideshow-buttons:hover #current-time-display {
opacity: 1 !important;
}
/* = Ende WP Featherlight Diashow: Abspiel-Buttons mit Zeitvorwahl und
* Bildzähler, autom. Ausblendung und
* Bildzähler stets visuell = */Für das Beispiel wie der Fokussierung der Bilder durch die Tastaturnavigation darf ich zum Beitrag Tastaturnavigation: Fokussierung und Interaktion mit JavaScript bitten.
Die zweite Galerie auf der Seite – klar definiert in der Lightbox! – und Slideschow Aus-Einblendung:
Bilder von jplenio!
- Das automatische Abspielen ist erstklassig für größere Galerien wie hier zu sehen ist Ein Spaziergang in Hallein.
Beispiel Einzelbild – eigenständig in der Lightbox! Die Navigationsschaltflächen sind nicht verfügbar:
Eija, es gibt noch etwas zum Schnuppern
Eija, da gibt es auch noch etwas zum Schnuppern ➳ Open example.com in an iframe. Das Weiterklicken nach GitHub funktioniert nicht, da GitHub die Verbindung in einem iFrame ablehnt. Daher ist hier auch der direkte Link: Featherlight.js The ultra slim lightbox. Die Inhalte, die auf GitHub zu sehen sind, sind bereits im WordPress-Plug-in "Featherlight" enthalten und es ist u. a. solches zu sehen, wie das Beispiel hier mit iFrame in der Lightbox zeigt.
Vielen Dank für dein Interesse an unserem Lightbox-Beitrag!
Der Beitrag wurde mit fachlicher Unterstützung erstellt.
Aktualisiert im Jahr 2024 November
