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.
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.
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.
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.
Der Weg ist lang, voll Kurven und voll Steil’n, doch führt er uns am Ende mit Sicherheit zu dem Ziel.
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!
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:
/* 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 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 kann auch ohne zusätzliches JavaScript <div class="gallery">...</div> verwendet werden, um alle Bilder innerhalb dieses Blocks als Galerie zusammenzufassen. Siehe WP Featherlight: Vor und zurück durch alle Bilder.
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:
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.
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.
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:
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.
Erfahren Sie mehr über die Projekte des Autors von WP Featherlight.
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.
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.
Wir bieten die 'Diashow mit Abspiel-Buttons und Zeitvorwahl' an, bei der Benutzer die Abspielzeit selbst einstellen können. Zudem ist ein Bildzähler integriert. Die Buttons können auch wieder ausblenden, wenn vom Benutzer keine Interaktion erfolgt. Dazu ist folgend eine Erweiterung hinzuzufügen.
Im Ersten ist das "JavaScript: allgemeine Funktion" und im Zweiten bieten wir drei Möglichkeiten unterschiedlicher Buttons an:
CSS: Abspiel-Buttons mit Dashicons (WordPress Developer Resources).
CSS: Buttons mit SVG-Grafik (selfhtml: SVG/Tutorials/Icons)
CSS + JS für das Derivat mit Unicode-Zeichen (compart), das unsere Empfehlung ist.
Das Beispiel auf dieser Website verwendet Unicode-Zeichen. Im Anhang und als Zusammenfassung befindet sich unsere Lightbox in der hier gezeigten Form.
Zur Verwendung von CSS in der Lightbox
Die Erweiterungen sind responsive und werden mit derselben CSS-Version für die Lightbox angezeigt. Die Anpassungen der Abspiel-Buttons, sei es durch Dashicons, SVG-Grafiken oder Unicode-Zeichen, ändern die Lightbox nicht und unterscheiden sich nur in der Machart der Buttons.
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.
Eine Bedingung für alle Optionen
Das CSS sollte im Customizer gespeichert werden, da bestimmte Prioritäten dies erfordern. 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 zur Responsivität.
Eine alternative Möglichkeit besteht darin, im Child-Theme eine separate CSS-Datei mit einer höheren Priorität zu erstellen. Zum Beispiel könnte man im Child-Theme eine custom-style.css erstellen und folgenden Code in die functions.php einfügen:
/* CSS mit höherer Priorität */
function enqueue_child_theme_styles() {
// Registriere und lade die CSS-Datei im Child Theme
wp_enqueue_style( 'child-theme-custom-styles', get_stylesheet_directory_uri() . '/custom-style.css', array(), null, 'all' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', 999 ); // Höhere Priorität als das Plugin
Dies, sowie die Verwendung des Customizers oder eines Plug-ins wie Simple CSS, ist geeignet, um das CSS erfolgreich zu integrieren.
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.
Die Bedingung für die Option mit Dashicons
Die verwendeten Dashicons (dashicons dashicons-controls-play, -arrow-up, -arrow-down und -pause) sind zwar für Administratoren im Frontend sichtbar, jedoch könnte es für Besucher der Website nicht sichtbar sein. Mit folgendem Code in der functions.php, ist es auch für Besucher sichtbar zu machen:
/* --- Dashicons für das Frontend --- */
function include_dashicons_font(){
//Lade Dashicons font
wp_enqueue_style('dashicons');
}
add_action( 'wp_enqueue_scripts', 'include_dashicons_font', 100 );
Der Benutzer kann die Zeitdauer des Ablaufs selbst einstellen, und zur besseren Übersichtlichkeit der Bildanzahl ist ein Bildzähler integriert.
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.
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.
Erlebe leichte Eleganz: Mit Featherlight-Varianten tanzen die Bilder im Takt – ein Dank an die Brillanz von WP Featherlight!
Wir bieten nun drei unterschiedliche Versionen der Buttons zur Auswahl an, die an jeden Anspruch oder jede Vorliebe angepasst werden können. Im Grunde sind sie alle ähnlich, responsiv und jeweils betriebsbereit zum Kopieren und Einfügen.
Für die Option bieten wir folgende Auswahlmöglichkeiten:
Dashicons-Buttons: Diese Option bietet die Verwendung von Dashicons, einem Satz von Symbolen und Icons, die nahtlos in WordPress integriert sind. Sie sind eine praktische Wahl für diejenigen, die sich auf die Standard-Icons von WordPress verlassen möchten.
SVG-Grafik als Hintergrundbild: Diese Option ermöglicht es Ihnen, eine benutzerdefinierte SVG-Grafik als Hintergrundbild für die Buttons zu verwenden, ähnlich wie es WP-Featherlight für seine Buttons verwendet. Durch die direkte Einbettung der SVG-Grafik im CSS als Data-URL haben Sie volle Kontrolle über das Aussehen und Verhalten der Buttons.
Unicode-Zeichen: Diese Option bietet eine alternative Möglichkeit, die Buttons über Unicode-Zeichen zu visualisieren. Unicode-Zeichen sind eine plattformübergreifende Möglichkeit, Symbole und Icons darzustellen, und bieten eine breite Palette an visuellen Möglichkeiten. – und ist usere Empfehlung.
JavaScript: allgemeine Funktion
Dies ist im Child-Theme in die JS-Datei einzufügen oder, 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: Abspiel-Buttons mit Zeitvorwahl und Bildzähler --- */
jQuery(document).ready(function($) {
// Zeitintervall für das automatische Weiterklicken (in Millisekunden)
var interval = 6000;
var intervalId; // Variable zur Speicherung der Interval-ID für das Starten und Stoppen der Diashow
// Funktion zum Klicken des Weiter-Buttons
function clickNext() {
// Weiter-Button finden und klicken
var nextButton = $('.featherlight-next');
if (nextButton.length > 0) {
console.log("Next button found:", nextButton);
nextButton.trigger('click');
} else {
console.log("Next button not found");
}
}
// Funktion zum Starten der Diashow
function startSlideshow() {
// Zuerst das nächste Bild anzeigen
clickNext();
// Dann die Diashow in Intervallen fortsetzen
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(); // Stoppen Sie die Diashow, bevor die Abspielzeit geändert wird
if (interval < 30000) { // Wenn die Zeitdauer kleiner als 30 Sekunden ist
interval += 1000; // Inkrement um 1 Sekunde
}
updateTimeDisplay();
console.log("Slide duration increased to:", interval);
}
// Funktion zum Dekrementieren der Abspielzeit
function decrementTime() {
stopSlideshow(); // Stoppen Sie die Diashow, bevor die Abspielzeit geändert wird
if (interval > 1000) { // Wenn die Zeitdauer größer als 1 Sekunde ist
interval -= 1000; // Dekrement um 1 Sekunde
}
updateTimeDisplay();
console.log("Slide duration decreased to:", interval);
}
// Funktion zum Hinzufügen der Start- und Stop-Schaltflächen und des Incrementer/Decrementer in die Lightbox
function addSlideshowButtons() {
// Überprüfen, ob die Buttons bereits hinzugefügt wurden
if ($('#slideshow-buttons').length === 0) {
// Schaltflächen und Incrementer/Decrementer für die Diashow erstellen
var slideshowControls = $('<div id="slideshow-buttons">' +
'<button id="start-slideshow-button" title="Start Slideshow">Start</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">Stop</button>' +
'<div class="featherlight-counter"></div>' +
'</div>');
// Die Lightbox finden und die Schaltflächen hinzufügen
$('.featherlight').append(slideshowControls);
// Event-Listener für den Start-Button
slideshowControls.find('#start-slideshow-button').on('click', function() {
if(interval > 0) { // Überprüfen, ob die Zeit größer als 0 ist
startSlideshow();
}
});
// Event-Listener für den Stop-Button
slideshowControls.find('#stop-slideshow-button').on('click', function() {
stopSlideshow();
});
// Event-Listener für den Incrementer
slideshowControls.find('#increment-time-button').on('click', function() {
incrementTime();
});
// Event-Listener für den Decrementer
slideshowControls.find('#decrement-time-button').on('click', function() {
decrementTime();
});
}
}
// Funktion zum Aktualisieren der Anzeige der aktuellen Abspielzeit
function updateTimeDisplay() {
var seconds = interval / 1000;
var formattedSeconds = seconds < 10 ? '0' + seconds : seconds; // Bei Einstellig wird eine führende Null hinzugefügt
$('#current-time-display').html(formattedSeconds + '<span class="seconds-label">s</span>'); // 'sec' hinzufügen
}
// Funktion zum Überprüfen, ob das Element Teil einer Galerie ist
function isGallery(element) {
return $(element).closest('.gallery').length > 0;
}
// Funktion zum Aktualisieren des Bildzählers
function updateImageCounter(gallery, currentIndex) {
var $images = gallery.find('[data-featherlight]');
var totalImages = $images.length;
var currentImageIndex = currentIndex + 1; // Bildindex startet bei 1
$('.featherlight-counter').text(currentImageIndex + '/' + totalImages);
}
// Event-Listener für das Öffnen der Lightbox
$(document).on('click', '[data-featherlight]', function() {
// Prüfen, ob das angeklickte Element Teil einer Galerie ist
if (isGallery(this)) {
// Die Galerie, zu der das Bild gehört, finden
var gallery = $(this).closest('.gallery');
// Fügen Sie die Buttons in die Lightbox ein, wenn sie zu einer Galerie gehören
addSlideshowButtons();
updateTimeDisplay(); // Anfangsanzeige aktualisieren
// Initialen Bildzähler setzen
var initialIndex = gallery.find('[data-featherlight]').index(this);
updateImageCounter(gallery, initialIndex);
// Event-Listener für Bildwechsel innerhalb der Galerie
$(document).on('featherlight:afterContent', function(event) {
var currentImage = $.featherlight.current().$currentTarget;
var currentIndex = gallery.find('[data-featherlight]').index(currentImage);
updateImageCounter(gallery, currentIndex);
});
}
});
// Event-Listener für das Schließen der Lightbox
$(document).on('click', '.featherlight-close', function() {
// Stoppen Sie die Diashow, wenn die Lightbox geschlossen wird
stopSlideshow();
});
// Zusätzliche Event-Listener für Weiter- und Zurück-Button in der Galerie
$(document).on('click', '.featherlight-next, .featherlight-previous', function() {
var gallery = $.featherlight.current().$currentTarget.closest('.gallery');
var currentImage = $.featherlight.current().$currentTarget;
var currentIndex = $(gallery).find('[data-featherlight]').index(currentImage);
updateImageCounter($(gallery), currentIndex);
});
// Page Visibility API nutzen, um die Diashow zu pausieren, wenn die Seite nicht sichtbar ist
document.addEventListener("visibilitychange", function() {
if (document.hidden) {
// Pause die Diashow
stopSlideshow();
}
});
});
/* Ende WP Featherlight Diashow: Abspiel-Buttons mit Zeitvorwahl und Bildzähler */
CSS: Buttons mit Dashicons (1)
Unser Vorschlag beinhaltet das folgende CSS, das sowohl Lightbox-Stile als auch Abspiel-Buttons mit Dashicons und ihre Stile umfasst.
Dies ist wie oben unter den Bedingungen für das CSS angeführt. Nach einer möglichen Komprimierung (z.B. mit Toptal) kann es auch direkt in die Datei des Plug-ins editiert werden: Plug-in-Datei-Editor WP Featherlight css > wp-featherlight.min.css. Wie immer ist nach möglichen Plug-in-Updates darauf zu achten, dies zu erneuern.
/* === WP Featherlight Diashow: Abspiel-Buttons mit Zeitvorwahl und Bildzähler samt Stilen === */
/* --- Lightbox-Stile --- */
/* Hintergrund der Lightbox */
.featherlight:last-of-type {
background: rgba(0, 0, 0, 0.9);
}
/* Nachtmodus falls forhanden, je nachdem anzupassen */
[nighteyeplgn="active"] .featherlight:last-of-type {
background: rgba(0, 0, 0, 1);
}
/* Größe von Bild in der Lightbox */
.featherlight .featherlight-image {
max-width: 80vw;
max-height: 80vh;
width: auto;
height: auto;
}
/* Größe von Inhalt für iFrame-Lightbox */
.featherlight-iframe .featherlight-content {
max-width: 80vw;
max-height: 80vh;
width: auto;
height: auto;
}
/* Box-Schatten und abgerundete Ecken der Lightbox */
.featherlight .featherlight-image {
box-shadow: 0 0 0 25px rgba(230, 230, 230, 1);
border-radius: 0.2vw;
}
@media only screen and (max-width: 424px) {
.featherlight .featherlight-image {
box-shadow: 0 0 0 6px rgba(230, 230, 230, 1);
border-radius: 0.2vw;
}
}
@media only screen and (min-width: 425px) and (max-width: 768px) {
.featherlight .featherlight-image {
box-shadow: 0 0 0 10px rgba(230, 230, 230, 1);
border-radius: 0.3vw;
}
}
/* Lightbox Abgerundete Ecken. Sofern der Box-Schatten nicht angewendet wird,
* kann man das anwenden. Das bezieht sich auch auf die Größe des Bildes in der Lightbox.
.featherlight-content {
border-radius: 1vw;
}
.featherlight .featherlight-image {
border-radius: 1vw;
}*/
/* Beschriftung in der Lightbox, das bezieht sich direkt auf den Box-Schatten */
.featherlight .featherlight-content .caption {
color: rgba(0, 0, 0, 0.4);
font-size: 1.15em;
font-weight: 400;
line-height: 1.3;
text-align: center;
left: 0;
right: 0;
}
/* Bildbeschriftung auf Mobilgeräte und Tablets befindet sich oberhalb */
@media only screen and (max-width: 320px) {
.featherlight .featherlight-content .caption {
top: -75%;
color: rgba(255, 255, 255, 0.5);
}
}
@media only screen and (min-width: 321px) and (max-width: 375px) {
.featherlight .featherlight-content .caption {
top: -60%;
color: rgba(255, 255, 255, 0.5);
}
}
@media only screen and (min-width: 376px) and (max-width: 425px) {
.featherlight .featherlight-content .caption {
top: -50%;
color: rgba(255, 255, 255, 0.5);
}
}
@media only screen and (min-width: 426px) and (max-width: 768px) {
.featherlight .featherlight-content .caption {
top: -20%;
color: rgba(255, 255, 255, 0.5);
}
}
/* Beschriftung in der Lightbox, die sich auf ohne Box-Schatten bezieht
.featherlight .featherlight-content .caption {
color: rgba(255,255,255, 0.8);
font-size: 1.15em;
font-weight: 400;
line-height: 1.3;
text-align: center;
left: 0;
right: 0;
}*/
/* Button für das nächste/vorherige Bild */
.featherlight-next,
.featherlight-previous {
top: 60%;
opacity: 0.5;
}
@media screen and (max-width: 425px) {
.featherlight-next,
.featherlight-previous {
top: 77%;
}
}
@media only screen and (min-width: 426px) and (max-width: 768px) {
.featherlight-next,
.featherlight-previous {
top: 90%;
}
}
.featherlight-next:hover,
.featherlight-previous:hover {
transition: 0.3s;
opacity: 0.8;
}
/* Schließen-Button */
.featherlight-close-icon.featherlight-close {
opacity: 0.5;
}
.featherlight-close-icon.featherlight-close:hover {
transition: 0.3s;
opacity: 0.8;
}
/* - Ende Lightbox-Stile - */
/* --- Diashow: Dashicon Abspiel-Button mit Zeitvorwahl und Bildzähler --- */
/* Allgemeine Stile für Tablets und Mobilgeräte */
@media screen and (max-width: 768px) {
#slideshow-buttons {
position: fixed;
display: flex;
flex-direction: row;
top: 90%;
left: 50%;
transform: translate(-50%, -50%);
align-items: center;
cursor: default;
}
/* Allgemeine Button-Stile */
#slideshow-buttons button {
padding: 5px 0;
background-color: rgba(255, 255, 255, 0);
color: rgba(255, 255, 255, 0.5);
cursor: pointer;
margin: 0 5px;
}
/* Abspielzeit-Anzeige für Tablets und Mobilgeräte */
#current-time-display {
color: rgba(255, 255, 255, 0.5);
font-size: 16px;
}
/* Bildzähler für Mobilgeräte (info: das ist inne von @media (max-width: 768px)) */
@media screen and (max-width: 590px) {
.featherlight-counter {
position: absolute;
display: flex;
flex-direction: row;
top: -140%;
left: 45%;
color: rgba(255, 255, 255, 0.5);
font-size: 16px;
}
}
/* (info: das ist inne von @media (max-width: 768px)) */
@media only screen and (min-width: 591px) and (max-width: 768px) {
.featherlight-counter {
position: relative;
display: flex;
flex-direction: row;
left: 2%;
color: rgba(255, 255, 255, 0.5);
font-size: 16px;
}
}
}
/* Allgemeine Stile für Laptops und Desktops */
@media screen and (min-width: 769px) {
#slideshow-buttons {
position: absolute;
top: 15%;
right: 15px;
display: flex;
flex-direction: column;
align-items: center;
cursor: default;
}
/* Allgemeine Button-Stile */
#slideshow-buttons button {
padding: 5px 7px;
background-color: rgba(255, 255, 255, 0);
color: rgba(255, 255, 255, 0.5);
cursor: pointer;
}
/* Bildzähler für Laptops und Desktops */
.featherlight-counter {
position: absolute;
top: 115%;
right: 10px;
color: rgba(255, 255, 255, 0.5);
padding: 5px 10px;
border-radius: 5px;
font-size: 16px;
}
}
/* Spezielle Button-Stile */
#start-slideshow-button::after,
#increment-time-button::after,
#decrement-time-button::after,
#stop-slideshow-button::after {
font-family: "dashicons";
font-size: 36px;
color: rgba(255, 255, 255, 0.5);
vertical-align: middle;
}
#start-slideshow-button::after {
content: "\f522";
}
#increment-time-button::after {
content: "\f142";
padding-right: 1.5px;
}
#decrement-time-button::after {
content: "\f140";
}
#stop-slideshow-button::after {
content: "\f523";
}
@media screen and (max-width: 768px) {
#decrement-time-button::after {
padding-left: 5px;
}
}
/* Abspielzeit-Anzeige */
#current-time-display {
position: relative;
margin: -10px 0;
padding: 0 6px;
font-size: 16px;
color: rgba(255, 255, 255, 0.5);
border: 3px inset rgba(255, 255, 255, 0.5);
z-index: 20;
}
/* Sekunden-Label */
.seconds-label {
font-size: 16px;
padding-left: 3px;
}
/* z-index für Inkrement- und Dekrement-Buttons */
#increment-time-button,
#decrement-time-button {
z-index: 10;
}
/* Buttons Hover-Stile */
#start-slideshow-button:hover::after,
#increment-time-button:hover::after,
#decrement-time-button:hover::after,
#stop-slideshow-button:hover::after {
transition: 0.3s;
color: #ffffff;
opacity: 0.8;
}
/* - Ende Diashow: Dashicon Abspiel-Buttons mit Zeitvorwahl und Bildzähler - */
/* = Ende WP Featherlight Diashow: Abspiel-Buttons mit Zeitvorwahl und Bildzähler samt Stilen = */
In dieser Variation wurden die Dashicons im CSS festgelegt, da sich diese problemlos an die Größe anpassen lassen.
CSS: Buttons mit SVG-Grafik (2)
Wer die Buttons lieber mit SVG von Base64 einpflegen möchte, sollte den entsprechenden Teil ersetzen. Hiermit entfällt auch die Bedingung zu den Dashicons.
Der Abschnitt: "Diashow: Dashicon Abspiel-Button …" kann durch das folgende CSS "Diashow: SVG-Grafik Abspiel-Button …" getauscht werden:
In dieser Variation wurden die Buttons als SVG-Grafik erstellt und können der Größe leicht angepasst werden.
Intuitive Bedienung für nahtloses Diashow-Vergnügen.
CSS: Buttons mit Unicode-Zeichen im JS (3)
Unsere Empfehlung, die Variation erfolgt bei den Buttons mit Unicode-Zeichen, wodurch auch die Bedingung zu den Dashicons entfällt.
Auch hier ist das CSS unterschiedlich und der Austausch erfolgt gleich wie oberhalb, also der Abschnitt "Diashow: Dashicon Abspiel-Button …" kann durch das folgende CSS getauscht werden:
Die Unicode-Zeichen sind hier nicht Bestandteil des CSS und sind folgend im Script dabei.
Bereit für Anpassungen? Sei auf unterschiedliche Aspekte vorbereitet!
Unicode-Zeichen im JS
Das folgende JavaScript ist vollständig und kann so wie es ist anstatt des Codes von Eingangs verwendet werden.
/* --- 1A WP Featherlight Diashow: Abspiel-Buttons mit Zeitvorwahl und Bildzähler --- */
jQuery(document).ready(function($) {
// Zeitintervall für das automatische Weiterklicken (in Millisekunden)
var interval = 6000;
var intervalId; // Variable zur Speicherung der Interval-ID für das Starten und Stoppen der Diashow
// Funktion zum Klicken des Weiter-Buttons
function clickNext() {
// Weiter-Button finden und klicken
var nextButton = $('.featherlight-next');
if (nextButton.length > 0) {
nextButton.trigger('click');
}
}
// Funktion zum Starten der Diashow
function startSlideshow() {
// Zuerst das nächste Bild anzeigen
clickNext();
// Dann die Diashow in Intervallen fortsetzen
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(); // Stoppen Sie die Diashow, bevor die Abspielzeit geändert wird
if (interval < 30000) { // Wenn die Zeitdauer kleiner als 30 Sekunden ist
interval += 1000; // Inkrement um 1 Sekunde
}
updateTimeDisplay();
}
// Funktion zum Dekrementieren der Abspielzeit
function decrementTime() {
stopSlideshow(); // Stoppen Sie die Diashow, bevor die Abspielzeit geändert wird
if (interval > 1000) { // Wenn die Zeitdauer größer als 1 Sekunde ist
interval -= 1000; // Dekrement um 1 Sekunde
}
updateTimeDisplay();
}
// Funktion zum Hinzufügen der Start- und Stop-Schaltflächen und des Incrementer/Decrementer in die Lightbox
function addSlideshowButtons() {
// Überprüfen, ob die Buttons bereits hinzugefügt wurden
if ($('#slideshow-buttons').length === 0) {
// Schaltflächen und Incrementer/Decrementer für die Diashow erstellen
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>');
// Die Lightbox finden und die Schaltflächen hinzufügen
$('.featherlight').append(slideshowControls);
// Event-Listener für den Start-Button
slideshowControls.find('#start-slideshow-button').on('click', function() {
if(interval > 0) { // Überprüfen, ob die Zeit größer als 0 ist
startSlideshow();
}
});
// Event-Listener für den Stop-Button
slideshowControls.find('#stop-slideshow-button').on('click', function() {
stopSlideshow();
});
// Event-Listener für den Incrementer
slideshowControls.find('#increment-time-button').on('click', function() {
incrementTime();
});
// Event-Listener für den Decrementer
slideshowControls.find('#decrement-time-button').on('click', function() {
decrementTime();
});
}
}
// Funktion zum Aktualisieren der Anzeige der aktuellen Abspielzeit
function updateTimeDisplay() {
var seconds = interval / 1000;
var formattedSeconds = seconds < 10 ? '0' + seconds : seconds; // Bei Einstellig wird eine führende Null hinzugefügt
$('#current-time-display').html(formattedSeconds + '<span class="seconds-label">s</span>'); // 's' hinzufügen
}
// Funktion zum Überprüfen, ob das Element Teil einer Galerie ist
function isGallery(element) {
return $(element).closest('.gallery').length > 0;
}
// Funktion zum Aktualisieren des Bildzählers
function updateImageCounter(gallery, currentIndex) {
var $images = gallery.find('[data-featherlight]');
var totalImages = $images.length;
var currentImageIndex = currentIndex + 1; // Bildindex startet bei 1
$('.featherlight-counter').text(currentImageIndex + '/' + totalImages);
}
// Event-Listener für das Öffnen der Lightbox
$(document).on('click', '[data-featherlight]', function() {
// Prüfen, ob das angeklickte Element Teil einer Galerie ist
if (isGallery(this)) {
// Die Galerie, zu der das Bild gehört, finden
var gallery = $(this).closest('.gallery');
// Fügen Sie die Buttons in die Lightbox ein, wenn sie zu einer Galerie gehören
addSlideshowButtons();
updateTimeDisplay(); // Anfangsanzeige aktualisieren
// Initialen Bildzähler setzen
var initialIndex = gallery.find('[data-featherlight]').index(this);
updateImageCounter(gallery, initialIndex);
// Event-Listener für Bildwechsel innerhalb der Galerie
$(document).on('featherlight:afterContent', function(event) {
var currentImage = $.featherlight.current().$currentTarget;
var currentIndex = gallery.find('[data-featherlight]').index(currentImage);
updateImageCounter(gallery, currentIndex);
});
}
});
// Event-Listener für das Schließen der Lightbox
$(document).on('click', '.featherlight-close', function() {
// Stoppen Sie die Diashow, wenn die Lightbox geschlossen wird
stopSlideshow();
});
// Zusätzliche Event-Listener für Weiter- und Zurück-Button in der Galerie
$(document).on('click', '.featherlight-next, .featherlight-previous', function() {
var gallery = $.featherlight.current().$currentTarget.closest('.gallery');
var currentImage = $.featherlight.current().$currentTarget;
var currentIndex = $(gallery).find('[data-featherlight]').index(currentImage);
updateImageCounter($(gallery), currentIndex);
});
// Page Visibility API nutzen, um die Diashow zu pausieren, wenn die Seite nicht sichtbar ist
document.addEventListener("visibilitychange", function() {
if (document.hidden) {
// Pause die Diashow
stopSlideshow();
}
});
});
/* Ende WP Featherlight Diashow: Abspiel-Buttons mit Zeitvorwahl und Bildzähler */
Wir haben nun drei unterschiedliche Versionen der Buttons zur Auswahl. Sie sind alle responsiv und einsatzbereit zum Kopieren und Einfügen.
Steuerung zur interaktiven Diashow
Die Variation ermöglicht es, dass die Abspiel-Buttons automatisch ausgeblendet werden, wenn keine Benutzerinteraktion erfolgt. Dadurch wird dem Benutzer ein ruhigeres Bild der Diashow geboten.
Diashow-Button-Steuerung für Maus-Intervall und einer Bildschirmbreite ab 1024 Pixel.
Diashow-Button-Steuerung für Maus-Intervall und das Berühren des Displays (für mobile Geräte).
Das Aus-Einblenden der Buttons erfolgt statt .fadeIn(); und .fadeOut(); der Methode mit opacity, weil dadurch der Bildzähler nicht nach oben floatet.
Perfekte Diashow-Kontrolle mit minimalem Aufwand.
Die Steuerung ist mittels var movementThreshold = 50; festgelegt. Somit erfolgt die Einblendung, nachdem die Bewegung der Maus einen bestimmten Schwellenwert überschreitet.
A. Steuerung für Bildschirmbreite ab 1024 Pixel
Für den sanften Übergang ist auch ein CSS dabei und dank opacity: 1 !important; bleiben bei Hover die Abspielbuttons permanent visuell.
Die Steuerung der Aus-Einblendung wird nur für Bildschirmbreite ab 1024 Pixel angewendet:
/* Diashow-Button-Steuerung für Bildschirmbreite ab 1024 Pixel, Bildzähler stets sichtbar */
jQuery(document).ready(function($) {
var buttonVisibilityDuration = 4000; // Dauer, für die die Buttons nach dem Stillstand der Maus sichtbar bleiben (in Millisekunden)
var hideTimeout;
var lastMouseX = 0;
var lastMouseY = 0;
var movementThreshold = 50; // Schwellenwert in Pixeln
// Funktion zum Einblenden der Buttons
function showButtons() {
$('#slideshow-buttons button, #current-time-display').css('opacity', 1);
resetHideTimeout();
}
// Funktion zum Ausblenden der Buttons
function hideButtons() {
$('#slideshow-buttons button, #current-time-display').css('opacity', 0);
}
// Timeout zurücksetzen, um die Buttons auszublenden
function resetHideTimeout() {
clearTimeout(hideTimeout);
hideTimeout = setTimeout(function() {
hideButtons();
}, buttonVisibilityDuration);
}
// Event-Listener für Mausbewegung mit Schwellenwert
$(document).on('mousemove', function(event) {
var mouseX = event.pageX;
var mouseY = event.pageY;
// Berechne die Bewegung der Maus
var deltaX = Math.abs(mouseX - lastMouseX);
var deltaY = Math.abs(mouseY - lastMouseY);
if (deltaX > movementThreshold || deltaY > movementThreshold) {
showButtons();
lastMouseX = mouseX;
lastMouseY = mouseY;
}
});
// Event-Listener für das Öffnen der Lightbox
$(document).on('click', '[data-featherlight]', function() {
showButtons(); // Beim Öffnen der Lightbox die Buttons einblenden
});
// Event-Listener für die Maus-Intervall
$(document).on('mouseleave', '.featherlight-content', function() {
resetHideTimeout();
});
// Initiales Ausblenden der Buttons beim Laden der Seite
hideButtons();
}
});
/* Ende Diashow-Button-Steuerung für Bildschirmbreite ab 1024 Pixel */
Insgesamt ermöglicht dieser Code eine benutzerfreundliche Steuerung der Diashow-Buttons, indem sie ab Bildschirmbreite von 1024 Pixel automatisch ausgeblendet werden. Dies geschiet wenn der Cursor still steht, und wieder eingeblendet werden, wenn der Mauszeiger bewegt wird.
B. Steuerung für Desktop und mobile Geräte
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.
Das CSS ist dasselbe wie unter A.
Die Aus-Einblendung erfolgt durch das Script:
/* Diashow-Button-Steuerung für Desktop und Mobil, Bildzähler stets sichtbar */
jQuery(document).ready(function($) {
var buttonVisibilityDuration = 4000; // Dauer, für die die Buttons nach dem Stillstand der Maus sichtbar bleiben (in Millisekunden)
var hideTimeout;
var lastMouseX = 0;
var lastMouseY = 0;
var movementThreshold = 50; // Schwellenwert in Pixeln
// Funktion zum Einblenden der Buttons
function showButtons() {
$('#slideshow-buttons button, #current-time-display').css('opacity', 1);
resetHideTimeout();
}
// Funktion zum Ausblenden der Buttons
function hideButtons() {
$('#slideshow-buttons button, #current-time-display').css('opacity', 0);
}
// Timeout zurücksetzen, um die Buttons auszublenden
function resetHideTimeout() {
clearTimeout(hideTimeout);
hideTimeout = setTimeout(function() {
hideButtons();
}, buttonVisibilityDuration);
}
// Event-Listener für Mausbewegung mit Schwellenwert
$(document).on('mousemove', function(event) {
var mouseX = event.pageX;
var mouseY = event.pageY;
// Berechne die Bewegung der Maus
var deltaX = Math.abs(mouseX - lastMouseX);
var deltaY = Math.abs(mouseY - lastMouseY);
if (deltaX > movementThreshold || deltaY > movementThreshold) {
showButtons();
lastMouseX = mouseX;
lastMouseY = mouseY;
}
});
// Event-Listener für das Öffnen der Lightbox
$(document).on('click', '[data-featherlight]', function() {
showButtons(); // Beim Öffnen der Lightbox die Buttons einblenden
});
// Event-Listener für Maus-Intervall
$(document).on('mouseleave', '.featherlight-content', function() {
resetHideTimeout();
});
// Event-Listener für das Berühren des Displays (für mobile Geräte)
$(document).on('touchstart', function() {
showButtons();
});
// Initiales Ausblenden der Buttons beim Laden der Seite
hideButtons();
});
/* Ende Diashow-Button-Steuerung für Desktop und Mobil, Bildzähler stets sichtbar */
Die zweite Galerie auf der Seite – klar definiert in der Lightbox! – und Slideschow Aus-Einblendung:
Das automatische Abspielen ist erstklassig für größere Galerien wie hier zu sehen ist Ein Spaziergang in Hallein.
Die Diashow-Buttons zusammen mit dem Bildzähler könnten auch allein mit CSS ein- und ausgeblendet werden, wenn der Cursor außerhalb der Website bewegt wird.
Im ersten Abschnitt befindet sich das CSS unserer Lightbox. Im zweiten Abschnitt befinden sich die Anfänge der Entwicklung dieses Beitrags.
Unsere Lightbox in der hier gezeigten Form
Das ist im Zusammenspiel mit:
Script Unicode-Zeichen im JS (3) und
Steuerung für Desktop und mobile Geräte (B).
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, müssen neben den neu erstellten Abspiel-Buttons auch die Buttons von WP Featherlight angepasst werden. Diese Buttons sind SVGs und lassen sich nicht einfach in ihrer Farbe ändern.
Deshalb sollten die drei SVGs von Featerhlight so angepasst werden, 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.
Das folgende CSS ist vollständig und kann so wie es ist anstatt des Codes von Eingangs verwendet werden.
Als Abschluss möchten wir die Anfänge der Entwicklung: Diashow mit Abspiel-Buttons zeigen.
Die Anfänge der Entwicklung: Diashow mit Abspiel-Buttons
Diashow allein mit Play und Pause Button.
Alternative mit Play und Pause Button mit Dashicon.
Hierbei kann eine fixe Zeitdauer im JavaScript festgelegt werden.
Füge einfach den folgenden Code in die JavaScript-Datei des Child-Themes ein:
/* --- WP Featherlight Diashow mit Abspiel-Buttons Dashicons --- */
jQuery(document).ready(function($) {
// Zeitintervall für das automatische Weiterklicken (in Millisekunden)
var interval = 6000;
var intervalId; // Variable zur Speicherung der Interval-ID für das Starten und Stoppen der Diashow
// Funktion zum Klicken des Weiter-Buttons
function clickNext() {
// Weiter-Button finden und klicken
var nextButton = $('.featherlight-next');
if (nextButton.length > 0) {
console.log("Next button found:", nextButton);
nextButton.trigger('click');
} else {
console.log("Next button not found");
}
}
// Funktion zum Starten der Diashow
function startSlideshow() {
// Zuerst das nächste Bild anzeigen
clickNext();
// Dann die Diashow in Intervallen fortsetzen
intervalId = setInterval(clickNext, interval);
}
// Funktion zum Stoppen der Diashow
function stopSlideshow() {
clearInterval(intervalId);
}
// Funktion zum Hinzufügen der Start- und Stop-Schaltflächen in die Lightbox
function addSlideshowButtons() {
// Schaltflächen für die Diashow erstellen
var slideshowButtons = $('<div id="slideshow-buttons">' +
'<button id="start-slideshow-button"><span class="dashicons dashicons-controls-play"></span></button>' +
'<button id="stop-slideshow-button"><span class="dashicons dashicons-controls-pause"></span></button>' +
'</div>');
// Die Lightbox finden und die Schaltflächen hinzufügen
$('.featherlight').append(slideshowButtons);
// Event-Listener für den Start-Button
slideshowButtons.find('#start-slideshow-button').on('click', function() {
startSlideshow();
});
// Event-Listener für den Stop-Button
slideshowButtons.find('#stop-slideshow-button').on('click', function() {
stopSlideshow();
});
}
// Funktion zum Überprüfen, ob das Element Teil einer Galerie ist
function isGallery(element) {
return $(element).closest('.gallery').length > 0;
}
// Event-Listener für das Öffnen der Lightbox
$(document).on('click', '[data-featherlight]', function() {
// Prüfen, ob das angeklickte Element Teil einer Galerie ist
if (isGallery(this)) {
// Fügen Sie die Buttons in die Lightbox ein, wenn sie zu einer Galerie gehören
addSlideshowButtons();
}
});
// Event-Listener für das Schließen der Lightbox
$(document).on('click', '.featherlight-close', function() {
// Stoppen Sie die Diashow, wenn die Lightbox geschlossen wird
stopSlideshow();
});
});
/* Ende WP Featherlight Diashow mit Abspiel-Buttons Dashicons */
In dieser Variation wurden die Dashicons (dashicons dashicons-controls-play und -pause) im JS festgelegt.
Das CSS für die automatische Diashow ist verbindlich, jedoch kann das Aussehen der Buttons variiert werden.
/* === WP Featherlight-Variante mit Abspiel-Buttons === */
/* --- Lightbox-Stile --- */
/* Hintergrund der Lightbox */
.featherlight:last-of-type {
background: rgba(0, 0, 0, 0.9);
}
[nighteyeplgn="active"] .featherlight:last-of-type {
background: rgba(0, 0, 0, 1);
}
/* Größe des Bildes in der Lightbox */
.featherlight .featherlight-image {
max-width: 80vw;
max-height: 80vh;
width: auto;
height: auto;
}
/* Box-Schatten und abgerundete Ecken der Lightbox */
.featherlight .featherlight-image {
box-shadow: 0 0 0 25px rgba(230, 230, 230, 1);
border-radius: 0.2vw;
}
@media (max-width: 424px) {
.featherlight .featherlight-image {
box-shadow: 0 0 0 6px rgba(230, 230, 230, 1);
border-radius: 0.2vw;
}
}
@media (min-width: 425px) and (max-width: 768px) {
.featherlight .featherlight-image {
box-shadow: 0 0 0 10px rgba(230, 230, 230, 1);
border-radius: 0.3vw;
}
}
/* Lightbox Abgerundete Ecken. Sofern der Box-Schatten nicht angewendet wird, kann man das anwenden. Das bezieht sich auch auf die Größe des Bildes in der Lightbox. */
/*.featherlight-content {
border-radius: 1vw;
}
.featherlight .featherlight-image {
border-radius: 1vw;
}*/
/* Beschriftung in der Lightbox, das bezieht sich direkt auf den Box-Schatten */
.featherlight .featherlight-content .caption {
color: rgba(0, 0, 0, 0.4);
font-size: 1.15em;
font-weight: 400;
line-height: 1.3;
text-align: center;
left: 0;
right: 0;
}
/* Bildbeschriftung auf Mobilgeräte und Tablets befindet sich oberhalb */
@media (max-width: 424px) {
.featherlight .featherlight-content .caption {
top: -50%;
}
}
@media (min-width: 425px) and (max-width: 768px) {
.featherlight .featherlight-content .caption {
top: -30%;
}
}
/* Beschriftung in der Lightbox, die sich auf ohne Box-Schatten bezieht */
/*.featherlight .featherlight-content .caption {
color: rgba(255,255,255, 0.8);
font-size: 1.15em;
font-weight: 400;
line-height: 1.3;
text-align: center;
left: 0;
right: 0;
}*/
/* Beschriftung in der Lightbox im Nachtmodus */
[nighteyeplgn="active"] .featherlight .featherlight-content .caption {
color: rgba(255, 255, 255, 0.5);
}
/* Button für das nächste/vorherige Bild */
.featherlight-next,
.featherlight-previous {
top: 60%;
opacity: 0.5;
}
@media screen and (max-width: 768px) {
.featherlight-next,
.featherlight-previous {
top: 90%;
}
}
.featherlight-next:hover,
.featherlight-previous:hover {
transition: 0.3s;
opacity: 0.8;
}
/* Schließen-Button */
.featherlight-close-icon.featherlight-close {
opacity: 0.5;
}
.featherlight-close-icon.featherlight-close:hover {
opacity: 0.8;
}
/* - Ende Lightbox-Stile - */
/* --- Diashow: Abspiel-Buttons und Stile --- */
@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;
margin: 0 15px 0 15px;
}
#slideshow-buttons button {
margin: 5px 0 0 -35px;
}
#slideshow-buttons button:first-child {
margin-right: 25px; /* Ändere den Abstand nach Bedarf */
}
#slideshow-buttons button:last-child {
margin-left: 25px; /* Ändere den Abstand nach Bedarf */
}
}
@media (min-width: 769px) {
#slideshow-buttons {
position: absolute;
top: 50%;
transform: translateY(-180%);
right: 21px;
display: flex;
flex-direction: column;
align-items: center;
}
}
#slideshow-buttons button {
margin: 5px 0;
padding: 6px 9px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
@media screen and (max-width: 768px) {
#slideshow-buttons button {
margin-left: -33px;
}
#slideshow-buttons button:first-child {
margin-right: 25px; /* Ändere den Abstand nach Bedarf */
}
}
#start-slideshow-button {
background-color: #4caf50;
color: white;
}
#stop-slideshow-button {
background-color: #f44336;
color: white;
}
/* - Ende Diashow: Abspiel-Buttons und Stile - */
/* = Ende WP Featherlight-Variante mit Abspiel-Buttons = */
Das ist allein mit einem Play- und Pause-Button.
Beispiel Einzelbild – eigenständig in der Lightbox! Die Navigationsschaltflächen sind nicht verfügbar:
Ländlich
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.
Die Website verwendet funktionelle Cookies. Sie verwendet keine Cookies von Drittanbietern.
Aber hallo!
– zur Begrüßung eine Rundfrage?
🧡 … das so zum Zeit entschleunigen.
Technische Herausforderungen sind Teil des Website-Betriebs. Es ist von Interesse, wie mit solchen Problemen umgegangen wird. Bitte mitteilen, ob bereits technische Probleme auf der Website aufgetreten sind und wie diese gelöst wurden.
Wird geladen ...
Während des Besuchs kann es neben informativen Ergebnissen auch zu Klangeffekten kommen, um bestimmte Elemente hervorzuheben. – Viel Spaß beim Erkunden!
Ist das Plug-inDocket-Cache (neuer Tab) schon zu kennen?
Pop-up
Das zur Umfrage ist von WP-Polls und das Pop-up ist von Boxzilla.
2024-April 
Somit folgendem CSS wird der Unschärfeeffekt und die neuen Cursors visuell:
