Add optional auto-slide feature to SlideshowExt

main
Anonymous Contributor 2023-09-16 18:24:27 +02:00
parent 76abfa5c8d
commit 1d7feaf4a5
5 changed files with 48 additions and 3 deletions

View File

@ -27,4 +27,9 @@
## Entfernt ## Entfernt
* Abhängigkeiten, ungenutztes CSS und JavaScript der Original-Website * Abhängigkeiten, ungenutztes CSS und JavaScript der Original-Website
* Nicht zum Theme gehörende Bilder * Nicht zum Theme gehörende Bilder
* Twig-Funktion dirFiles * Twig-Funktion dirFiles
# v0.2.1 (16.09.2023)
## Hinzugefügt
* SlideshowExt kann die Slideshow zusätzlich zur Benutzerinteraktion auch über JavaScript automatisch abspielen

View File

@ -17,7 +17,7 @@ Die folgenden Module können einer modularen Website hinzugefügt werden:
| -------- | -------- | | -------- | -------- |
| Autoslideshow | Automatisch ablaufende, einfache Bilder-Slideshow | | Autoslideshow | Automatisch ablaufende, einfache Bilder-Slideshow |
| Boxlist | Zeile aus Kästchen mit Bildern, Links, Titeln und kurzen Beschreibungstexten, für den Abschnitt "Unser Weltenverbund" der Startseite genutzt | | Boxlist | Zeile aus Kästchen mit Bildern, Links, Titeln und kurzen Beschreibungstexten, für den Abschnitt "Unser Weltenverbund" der Startseite genutzt |
| Slideshowext | Erweiterte Slideshow mit Bildern, Texten und Links, die manuell durchschritten werden kann | | Slideshowext | Erweiterte Slideshow mit Bildern, Texten und Links, die manuell durchschritten werden kann. Kann zusätzlich auch automatisch ablaufen (JavaScript benötigt). |
| Textbg | Normaler Text (Markdown) mit Hintergrundbild und/oder -Farbe | | Textbg | Normaler Text (Markdown) mit Hintergrundbild und/oder -Farbe |
### Optionale Komponenten ### Optionale Komponenten

View File

@ -13,6 +13,14 @@ form:
validate: validate:
required: true required: true
type: int type: int
header.autoslideinterval:
type: text
label: Anzeigedauer (AutoSlide)
help: 'Zeit in Sekunden, bis automatisch zum nächsten Bild gewechselt wird. 0, um automatische Wechsel zu deaktivieren.'
default: 0
validate:
required: true
type: int
header.slides: header.slides:
type: list type: list
style: vertical style: vertical

31
js/slideshowext.js Normal file
View File

@ -0,0 +1,31 @@
let intervs = {};
function autoslide(el) {
let children = el.children('input:checked');
let next = children.next('input');
if(next.length == 0) {
next = el.children('input').first();
}
next.prop('checked', true);
}
$(function() {
$('.slideshow-ext').each((index, vel) => {
let el = $(vel);
let interval = Number(el.data('autoslide-interval'));
if (interval <= 0) {
return;
}
intervs[el] = setInterval(autoslide, interval * 1000, el);
});
$('.slideshow-ext label').on('click', function(event) {
let el = event.currentTarget();
let interval = Number(el.data('autoslide-interval'));
if(interval > 0) {
clearInterval(intervs[el]);
intervs[el] = setInterval(autoslide, interval * 1000, el);
}
});
}, );

View File

@ -40,11 +40,12 @@
} }
{% endset %} {% endset %}
{% do assets.addInlineCss(slideStyle, 90) %} {% do assets.addInlineCss(slideStyle, 90) %}
{% if page.header.autoslideinterval > 0 %}{% do assets.addJs('theme://js/slideshowext.js', 90) %}{% endif %}
{% endblock %} {% endblock %}
<div class="page-cell-fullwidth"> <div class="page-cell-fullwidth">
<div class="text-tab-content grid-prop current-tab"> <div class="text-tab-content grid-prop current-tab">
<div class="text-inner"> <div class="text-inner">
<div class="slideshow-ext"> <div class="slideshow-ext"{% if page.header.autoslideinterval > 0 %} data-autoslide-interval="{{ page.header.autoslideinterval }}"{% endif %}>
{% for image in slides %} {% for image in slides %}
<input type="radio" name="slide" id="slide{{ loop.index }}"{% if loop.index == 1 %} checked{% endif %} /> <input type="radio" name="slide" id="slide{{ loop.index }}"{% if loop.index == 1 %} checked{% endif %} />
{% endfor %} {% endfor %}