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. 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 Lightbox funktioniert sowohl für Einzelbilder 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 Lightbox verwendet Bildunterschriften, die jedem Bild vorangestellt sind und nicht den Alt-Text als Beschriftung.
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 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.
Die Integration von Cursors ist ebenfalls bemerkenswert, sodass Nutzer stets über ihre Interaktionen informiert bleiben. Dadurch wird der Schließen-Button fast überflüssig und könnte sogar weggelassen werden.
Die automatische Diashow ist nicht integriert, aber wir bieten diese Option an, wie aus den folgenden Beispielen hervorgeht. Beispiel Lightbox Featherlight WP-Galerie:
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:
SVG in der Lightbox funktioniert nicht, obwohl das eigentlich funktionieren sollte, weil das auch in der wpFeatherlight.pkgd.js definiert ist. Ich habe im Support eine Anfrage erstellt, die bisher unbeantwortet blieb. WP Featherlight und SVG.
🧡 WP Featherlight-Variante mit Abspiel-Buttons und Zeitvorwahl
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 können die "Diashow mit Abspiel-Buttons und Zeitvorwahl" anbieten, bei der Benutzer die Zeitdauer des Ablaufs selbst einstellen kann.
CSS: Abspiel-Buttons mit Dashicons (WordPress Developer Resources).
CSS: Buttons mit SVG-Grafik (selfhtml: SVG/Tutorials/Icons)
Die Erweiterungen sind responsive und werden mit einer und derselben CSS-Version für die Lightbox gezeigt. Die Anpassungen der Lightbox bleiben unverändert und nur die Buttons sind unterschiedlicher Machart.
Eine Bedingung für alle Optionen ist:
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.
Die Bedingung für die Option mit Dashicons ist:
Die verwendeten Dashicons (dashicons dashicons-controls-play und -pause) sowie (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.
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 möglich, 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.
Erlebe leichte Eleganz: Mit Featherlight-Varianten tanzen die Bilder im Takt – ein Dank an die Brillanz des Featherlight-Plug-ins!
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. Dieser Option ist auch im JS ein Abschnitt anzupassen.
JavaScript: allgemeine Funktion
/* --- JS: WP Featherlight Diashow mit Abspiel-Buttons und Zeitvorwahl --- */
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() {
// 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>');
// 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;
}
// 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();
updateTimeDisplay(); // Anfangsanzeige aktualisieren
}
});
// 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 JS: WP Featherlight Diashow mit Abspiel-Buttons und Zeitvorwahl */
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.
/* === CSS: WP Featherlight Diashow mit Abspiel-Buttons und Zeitvorwahl === */
/* --- 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 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 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: Abspiel-Buttons mit Zeitvorwahl und Stile --- */
/* 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;
margin-left: 3px;
}
/* Allgemeine Button-Stile */
#slideshow-buttons button {
padding: 5px 0px;
background-color: rgba(255, 255, 255, 0);
color: rgba(255, 255, 255, 0.5);
cursor: pointer;
margin: 0 5px;
}
}
/* 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;
}
/* 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;
}
}
/* Start-Button */
#start-slideshow-button::after {
content: "\f522";
font-family: "dashicons";
font-size: 36px;
color: rgba(255, 255, 255, 0.5);
vertical-align: middle;
}
/* Inkrement-Button */
#increment-time-button::after {
content: "\f142";
font-family: "dashicons";
font-size: 36px;
color: rgba(255, 255, 255, 0.5);
vertical-align: middle;
padding-right: 1.5px;
}
/* Abspielzeit-Anzeige für Laptops und Desktops */
#current-time-display {
color: rgba(255, 255, 255, 0.5);
position: relative;
margin: -10px 0 -10px 0;
padding: 0px 6px;
font-size: 18px;
border: 3px inset rgba(255, 255, 255, 0.5);
z-index: 20;
}
/* Abspielzeit-Anzeige für Tablets und Mobilgeräte */
@media screen and (max-width: 768px) {
#current-time-display {
color: rgba(255, 255, 255, 0.5);
font-size: 18px;
}
}
/* Sekunde 's' */
.seconds-label {
font-size: 16px;
padding-left: 3px;
}
/* Inkrement- und Dekrement-Buttons z-index */
#increment-time-button,
#decrement-time-button {
z-index: 10;
}
/* Dekrement-Button */
#decrement-time-button::after {
content: "\f140";
font-family: "dashicons";
font-size: 36px;
color: rgba(255, 255, 255, 0.5);
vertical-align: middle;
}
@media screen and (max-width: 768px) {
/* Dekrement-Button */
#decrement-time-button::after {
padding-left: 5px;
}
}
/* Stop-Button */
#stop-slideshow-button::after {
content: "\f523";
font-family: "dashicons";
font-size: 36px;
color: rgba(255, 255, 255, 0.5);
vertical-align: middle;
}
/* 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: Abspiel-Buttons und Stile - */
/* = Ende CSS: WP WP Featherlight Diashow mit Abspiel-Buttons und Zeitvorwahl = */
In dieser Variation wurden die Dashicons im CSS festgelegt, da sich diese problemlos an die Größe anpassen lassen.
Der Abschnitt Diashow: "Abspiel-Buttons mittels Dashicon" kann durch das folgende CSS "Diashow: Abspiel-Buttons mittels SVG-Grafik" getauscht werden:
CSS: Buttons mit SVG-Grafik (2)
Wer die Buttons lieber mit SVG von Base64 einpflegen möchte, sollte den entsprechenden Teil ersetzen.
In dieser Variation wurden die Buttons als SVG-Grafik erstellt und können leicht angepasst werden.
CSS und Buttons mit Unicode-Zeichen im JS (3)
Eine weitere Variation erfolgt der Buttons mit Unicode-Zeichen. Dieser Variante ist auch eine Anpassung im JS dabei, welche im Anschluss folgt. Auch hier ist das CSS unterschiedlich und der Austausch erfolgt gleich wie oberhalb.
Die Unicode-Zeichen sind nicht Bestandteil des CSS, deshalb muss der Abschnitt im "JS: allgemeine Funktion" wie folgt ersetzt werden:
Unicode-Zeichen im JS
// Funktion zum Hinzufügen der Start- und Stop-Schaltflächen und des Incrementer/Decrementer in die Lightbox mit Unicode-Zeichen
function addSlideshowButtons() {
// 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>');
Wir haben nun drei unterschiedliche Versionen der Buttons zur Auswahl. Sie sind alle identisch, responsiv und einsatzbereit zum Kopieren und Einfügen.
Beispiel Einzelbild – eigenständig in der Lightbox! Die Navigationsschaltflächen sind nicht verfügbar:
Herbst
Anhang
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.
Die zweite Galerie auf der Seite – klar definiert in der Lightbox!
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!
Schaffe mit WordPress und Advanced Editor schöne Websites. Hier ist für dich, euch eine leicht lesbare und freundliche Anleitung.
Hinweis: Unsere Website verwendet ausschließlich funktionale Cookies und setzt keine Cookies von Drittanbietern.
Aber hallo!
– zur Begrüßung eine Rundfrage?
🧡 … das so zum Zeit entschleunigen.
Technische Herausforderungen sind Teil des Website-Betriebs. Wir interessieren uns dafür, wie du mit solchen Problemen umgehst. Bitte teile uns mit, ob du bereits technische Probleme auf deiner Website hattest und wie du sie gelöst hast.
Wird geladen ...
Während deines Besuchs kann es neben informativen Ergebnissen auch zu Klangeffekten kommen, um bestimmte Elemente hervorzuheben. – Viel Spaß beim Erkunden!
Pop-up
Das zur Umfrage ist von WP-Polls und das Pop-up ist von Boxzilla.
