Mx Swiper3

1. Voraussetzungen

• Joomla mit der Kernkomponente „Artikel“ (com_content) muss aktiviert sein, wenn die Artikelquelle verwendet wird.
• Ein veröffentlichtes Modul, das einer Template-Position zugewiesen ist, sowie Menüeinträge.
• Joomla 4 oder neuer verwendet das moderne Inhaltsmodell; ältere, unterstützte Joomla-Installationen verwenden das alte Modell.
• Für die Größenanpassung von Artikelbildern muss das Joomla-Cache-Verzeichnis beschreibbar sein.
• Im Ordnermodus müssen sich die Medien im Joomla-Verzeichnis images Verzeichnis befinden.

2. Installation

1. Öffnen Sie im Joomla-Administrator „System > Installieren > Erweiterungen“.
2. Laden Sie das Mx Swiper3-ZIP-Paket hoch.
3. Öffnen Sie „Erweiterungen > Module“ und erstellen oder bearbeiten Sie „Mx Swiper3“.
4. Setzen Sie das Modul auf „Veröffentlicht“, wählen Sie eine Template-Position aus und konfigurieren Sie die Menüzuordnung.
5. Speichern Sie das Modul und überprüfen Sie die zugewiesene Frontend-Seite.

Behalten Sie die assets, core, fieldsowie tmpl Ordner des Moduls. Sie enthalten die Swiper-Bibliotheken, Bild-Helfer, benutzerdefinierte Formularfelder und Stilvorlagen.

3. Schnellstart

1. Wählen Sie in den allgemeinen Einstellungen einen Stil aus.
2. Wählen Sie eine Quelle aus: Artikel, benutzerdefinierte Elemente oder Ordner.
3. Konfigurieren Sie die für diese Quelle angezeigten Felder.
4. Legen Sie den Slider-Effekt, die Höhe, die Anzahl der responsiven Elemente, die Navigation und die Paginierung fest.
5. Veröffentlichen Sie das Modul an einer sichtbaren Position in der Vorlage.

Verwenden Sie für den ersten Test „Artikel“, wählen Sie eine veröffentlichte Kategorie aus, behalten Sie die Standardreihenfolge der Bilder bei, aktivieren Sie die Paginierung und die Pfeile und verwenden Sie den Standard-Slide-Effekt.

4. So funktioniert das Modul

1. Quellenauswahl: Die get_source Einstellung legt den Datenpfad fest.
2. Datenaufbereitung: Joomla-Artikel werden abgefragt, benutzerdefinierte Elemente werden aus dem Unterformular gelesen oder der Ordnermodus durchsucht das ausgewählte Verzeichnis.
3. Layoutauswahl: Der ausgewählte Wert von get_style lädt die entsprechende Datei aus tmpl.
4. Laden der Ressourcen: Swiper-JavaScript und -CSS werden für das Modul geladen. Fancybox-Ressourcen werden nur geladen, wenn Fancybox aktiviert ist; jQuery wird nur bei Bedarf geladen.
5. Swiper-Initialisierung: assets/swiper/functions.js Liest die generierten Swiper-Optionen ein, darunter Einstellungen für Effekte, Schleife, Autoplay, Breakpoints, Navigation, Paginierung und Mausrad.
6. Rendering der Folien: Jedes Element wird zu einer Swiper-Folie, die Medien, optionalen Text sowie einen optionalen Link oder eine Lightbox-Steuerung enthält.

Das Modul speichert die vorbereitete Liste im Modul-Cache von Joomla. Leeren Sie den Joomla-Cache, nachdem Sie Quelldateien, Ordnerinhalte oder Einstellungen geändert haben, falls im Frontend weiterhin ein älteres Ergebnis angezeigt wird.

5. Allgemeine Einstellungen

Stil

Lädt eine der verfügbaren Präsentationsvorlagen: Default oder Style 1 über Style 19. Der Stil bestimmt den Aufbau der Folien und die visuelle Gestaltung; nicht jeder Stil nutzt alle Swiper-Optionen auf dieselbe Weise.

Fancybox

Wenn aktiviert, fügt es bei unterstützten Medien eine Vollbild-Schaltfläche hinzu und öffnet das aktuelle Bild, MP4-, YouTube- oder Vimeo-Element in einer Fancybox-Galerie. Es ist für die Stile verfügbar, die durch die bedingte Regel des Feldes aufgelistet sind, und ist standardmäßig deaktiviert.

Hintergrundbilder

Verfügbar für Stil 1. Fügt die dekorativen Hintergrundebenen des Stils oberhalb und unterhalb des Slider-Inhalts hinzu.

Slider-Höhe

Legt die vom Slider verwendete Höhe fest, von 100vh bis zu festen Werten zwischen 500px und 1000px.

Version

Wählt die helle oder dunkle visuelle Variante aus. Bei der Option „Hell“ wird das helle Stylesheet des Moduls geladen.

Hintergrund der Ebene

Aktiviert die halbtransparente Überlagerung, die von Stilen verwendet wird, die die dunkle Folienebene unterstützen. Dies kann den Textkontrast auf Fotos verbessern.

6. Swiper-Steuerelemente

Slider-Effekt

Wählen Sie den vom ausgewählten Stil unterstützten Übergangseffekt aus:

• Fade, Slide, Coverflow, Flip, Cube, Creative, Cards
• Gel ist als gl für die Standardeinstellung und die Einstellung „Stil 14“.

Zentrierte Folien und Schleife

„Zentrierte Folien“ zentriert die aktive Folie. „Wiederholungsschleife“ wechselt kontinuierlich von der letzten Folie zurück zur ersten.

Automatische Wiedergabe und Verzögerungszeit

Aktivieren Sie „Automatische Wiedergabe“, um die Folien automatisch weiterzuschalten. Mit der Verzögerungszeit können Sie die Pause zwischen den Folien auf 2 bis 15 Sekunden einstellen. Die automatische Wiedergabe ist so konfiguriert, dass sie nicht unterbrochen wird, wenn ein Besucher mit dem Slider interagiert.

Animationsgeschwindigkeit und Abstand

Mit der Animationsgeschwindigkeit lässt sich die Übergangsdauer von 0,5 bis 7 Sekunden einstellen. Mit „Abstand zwischen“ wird ein Abstand zwischen den Folien hinzugefügt, wobei Werte von 0 bis 40 zur Auswahl stehen.

Parallax-Effekt

Aktiviert die Parallax-Bewegung der Bilder bei unterstützten Stilen. Mit „Parallax-Stärke“ wird der Bewegungsprozentsatz von 1 % bis 40 % festgelegt.

Mausrad

Ermöglicht es Besuchern, bei Stilen, die diese Einstellung bieten, die Folien mit dem Mausrad zu wechseln. Stil 15 verwendet ein eigenes Feld für das Mausrad.

Anzahl der responsiven Elemente

Konfigurieren Sie für die Effekte „Slide“, „Coverflow“ und „Cards“ die Anzahl der sichtbaren Elemente separat für Desktop, Laptop, Tablet und Mobilgeräte. Andere Effekte zeigen am größten Breakpoint in der Regel nur eine Folie an, da ihr visuelles Design eine einzige aktive Folie erfordert.

Paginierung und Pfeile

Die Paginierung zeigt anklickbare Folienanzeigen an und bietet zwei Stile. Die Pfeile zeigen Steuerelemente für „Zurück“ und „Weiter“ an und bieten drei Stile. Beide Funktionen können unabhängig voneinander deaktiviert werden.

Miniaturansichten

Bei den Stilen 16 und 19 ist die Einstellung „Thumbs“ verfügbar. Sie steuert die Anzahl der sichtbaren Miniaturansichten von 2 bis 8.

7. Datenquellen

Artikel

Der Artikelmodus nutzt das com_content Artikel-Modell von Joomla. Er gibt veröffentlichte Artikel zurück, die für den aktuellen Besucher verfügbar sind, und erstellt die Links zu Artikel, Kategorie und „Weiterlesen“.

• „Kategorie auswählen“: Beschränkt die Ergebnisse auf eine oder mehrere Kategorien.
• Artikel aus Unterkategorien: Schließt untergeordnete Kategorien ein oder aus.
• Kategorietiefe: Legt fest, wie viele Ebenen von Unterkategorien einbezogen werden.
• Tags: Filtert Artikel nach ausgewählten Joomla-Tags.
• Empfohlene Artikel: Zeigt alle in Frage kommenden Artikel an, blendet empfohlene Artikel aus oder zeigt nur empfohlene Artikel an.
• Artikel-Feld für Sortierung: Reihenfolge nach Administrator, Reihenfolge nach „Empfohlene Artikel“, Aufrufe, Titel, ID, Alias, Erstellungs-/Änderungs-/Veröffentlichungsdatum oder zufällig.
• Sortierrichtung: aufsteigend oder absteigend.
• Anzahl: maximale Anzahl an Artikeln. Der Wert 0 bedeutet „alle Artikel“.
• Link öffnen: im selben Fenster, in einem neuen Fenster oder in einem Popup-Fenster.
• Benutzerdefinierte Felder: Löst Joomla-Content-Plugin-Ereignisse für den Artikel aus.

Artikelanzeige

• Kategorietitel: Zeigt den Kategorienamen und den Kategorie-Link an.
• Artikeltitel: Zeigt den Titel des Artikels an.
• Maximale Titelänge: Kürzt den Titel entsprechend der Zeichenanzahl; 0 behält den vollständigen Titel bei.
• Beschreibungsanzeige: Zeigt den bereinigten Einleitungstext des Artikels an.
• Maximale Länge der Beschreibung: Kürzt den Einleitungstext; 0 behält den gesamten Text bei.
• Anzeige des Autors: Zeigt den Autor des Artikels an.
• Datumsanzeige: Zeigt das Erstellungsdatum an.
• Datumsformat: Steuert das Joomla/PHP-Datumsformat, z. B. d M Y oder Y-m-d.
• „Weiterlesen“ anzeigen und „Weiterlesen“-Text: Legt die Schaltfläche für den Artikel-Link fest.

Artikelbilder

Der Helper durchsucht die aktivierten Bildquellen in der Reihenfolge, die unter „Reihenfolge beim Abrufen“ angegeben wurde. Das erste verfügbare Bild wird von den Artikelstilen verwendet.

• image_intro: das Einführungsbild für „Bilder und Links“ in Joomla.
• image_fulltext: das Volltextbild von Joomla.
• inline_introtext: Bilder, die im HTML-Code der Einleitung gefunden wurden.
• inline_fulltext: Bilder, die im Volltext-HTML-Code gefunden wurden.
• external: vom Helfer unterstützte externe oder generierte Bildpfade.

Aktivieren oder deaktivieren Sie jede Quelle über das entsprechende Feld „Von Bild...“. Wenn kein Bild gefunden wird, verwendet das Modul modules/mod_mx_swiper3/assets/images/noimage.jpg oder den konfigurierten Platzhalterpfad.

Bildgrößenanpassung

Der Größenanpassungsmodus unterstützt „Keine“, „Zentrieren“, „Auffüllen“, „Anpassen“ und „Dehnen“. Wenn die Größenanpassung aktiviert ist, legen Sie die Komprimierungsqualität von 1 bis 100, das Ausgabeformat (GIF, JPEG, PNG oder WEBP), das Transparenzverhalten sowie Breite und Höhe fest. Generierte Bilder werden über den Bild-Helper und den Cache des Moduls gespeichert.

Benutzerdefinierte Elemente

Benutzerdefinierte Elemente werden direkt in das wiederholbare Feld „Elemente“ eingegeben. Fügen Sie für jede Folie ein Element hinzu und ziehen Sie die Einträge anschließend in die gewünschte Reihenfolge oder ordnen Sie sie an.

Benutzerdefinierte Elemente verwenden keine Artikelkategorien, Artikelmetadaten oder Artikelbild-Extraktion. Ihre Medien und ihr Text stammen vollständig aus den Werten des Unterformulars.

Ordner

Der Ordnermodus liest Medien aus dem ausgewählten Verzeichnis unter dem Joomla-Ordner images Ordner, einschließlich verschachtelter Unterordner. Das Feld „Ordner“ wird durch das benutzerdefinierte foldertree .

• Unterstützte Dateitypen: jpg, jpeg, png, gif, webp, bmp, und mp4.
• Bilder werden zu Bild-Dias; MP4-Dateien werden zu sich wiederholenden, stummgeschalteten Video-Dias.
• Die Dateien werden automatisch nach ihrem relativen Pfad sortiert.
• Der Dateiname vor dem ersten Pipe-Zeichen wird als Titel verwendet; eine führende Zahl, gefolgt von einem Trennzeichen, wird aus dem angezeigten Titel entfernt.
• Text nach dem ersten Pipe-Zeichen wird als Beschreibung verwendet.
• Bindestriche und Unterstriche werden sowohl im Titel als auch in der Beschreibung als Leerzeichen angezeigt.

Beispiel für einen Dateinamen:

01 - Our-services | Fast, reliable support.jpg

Dies ergibt den Titel „Unsere Dienstleistungen“ und die Beschreibung „Schneller, zuverlässiger Support“; die führende 01 - wird ausgeblendet. Legen Sie die Anzahl fest, um die Anzahl der gescannten Elemente zu begrenzen; verwenden Sie 0 für alle übereinstimmenden Dateien.

8. Stile

Das Paket enthält 20 auswählbare Layouts: Default und Style 1 bis Style 19. Jedes Layout ist in einer eigenen Datei in tmpl und nutzt dieselben Quelltypen und dasselbe Kernmedienmodell, wobei Bildunterschriften, Overlays, Steuerelemente und Miniaturansichten unterschiedlich angeordnet sind.

• Standard: universell einsetzbare Swiper-Präsentation mit erweiterten Effektoptionen.
• Stil 1: Unterstützt die optionale Einstellung „Layer-Bilder“.
• Stile 2–13: alternative Inhalts- und Overlay-Kompositionen unter Verwendung der Standard-Swiper-Effekte.
• Stil 14: Verwendet die erweiterte Effekt-Auswahl, einschließlich „Gel“.
• Stil 15: verfügt über eine eigene Mausrad-Option.
• Stile 16 und 19: Unterstützen die Steuerung „Thumbs count“.
• Stil 17: Verwendet die Slider-Darstellung in voller Höhe des Moduls sowie das Markup für Miniaturansichten.
• Stil 18: Unterstützt Fancybox und die Standard-Overlay-Steuerelemente.

Die genaue Kombination der bedingten Felder wird durch mod_mx_swiper3.xml. Wenn eine Einstellung nach dem Wechsel des Stils ausgeblendet wird, ist dies beabsichtigt: Das ausgewählte Layout stellt diese Option nicht zur Verfügung.

9. Benutzerdefiniertes CSS und erweiterte Einstellungen

• CSS-Code: Fügen Sie HTML-gefilterte CSS-Deklarationen für diese Modulinstanz hinzu. Beschränken Sie Selektoren nach Möglichkeit auf die Modulklassen.
• Modulklassen-Suffix: Fügt dem Modul-Wrapper ein Klassen-Suffix für templatenspezifisches Styling hinzu.
• Alternatives Layout: Wählt eine Überschreibung des Joomla-Modul-Layouts aus, sofern eine verfügbar ist.
• Caching: Verwendet die globale Modul-Cache-Einstellung von Joomla oder deaktiviert das Caching für das Modul.
• Cache-Dauer: Steuert die Cache-Dauer, wenn die Modul-Cache-Einstellung eine benutzerdefinierte Zeit verwendet.
• jQuery laden: Lädt die mitgelieferte jQuery-3.6.0-Datei. Lassen Sie diese Option deaktiviert, wenn die Vorlage bereits eine kompatible jQuery-Instanz lädt.

10. Fehlerbehebung

Es werden keine Folien angezeigt

• Stellen Sie sicher, dass das Modul veröffentlicht, dem aktuellen Menüpunkt zugewiesen und an einer gerenderten Template-Position platziert ist.
• Bei Artikeln: Stellen Sie sicher, dass die Artikel veröffentlicht, zugänglich, der ausgewählten Kategorie zugeordnet und durch Sprach-/Tag-/Featured-Filter zugelassen sind.
• Bei benutzerdefinierten Elementen: Stellen Sie sicher, dass mindestens ein Eintrag veröffentlicht ist.
• Wählen Sie im Ordnermodus einen Ordner aus images und überprüfen Sie die Dateiendung.

Bilder fehlen

• Überprüfen Sie die Bildquellen-Schalter des Artikels und die Option „Reihenfolge abrufen“.
• Stellen Sie sicher, dass das Medienfeld des benutzerdefinierten Elements mit dem ausgewählten Typ übereinstimmt.
• Überprüfen Sie den Platzhalterpfad und die Cache-Berechtigungen.

Ordnertitel oder -beschreibungen sind leer

Verwenden Sie die Dateinamenskonvention Title | Description.extension. Das Pipe-Zeichen trennt Titel und Beschreibung; Ordner werden rekursiv durchsucht, es werden jedoch nur unterstützte Dateiendungen berücksichtigt.

Video wird nicht abgespielt

MP4-Elemente verwenden die Attribute „autoplay“, „muted“ und „loop“. Überprüfen Sie, ob die URL erreichbar ist, die Datei ein gültiges MP4-Format aufweist und der Server einen Video-MIME-Typ übermittelt. Für YouTube- und Vimeo-Elemente ist die Video-ID erforderlich, nicht die vollständige Wiedergabe-URL.

Die Höhe des Sliders oder die Effekte sehen falsch aus

Überprüfen Sie den ausgewählten Stil, die Höhe des Sliders, die Kompatibilität der Effekte und ob ein anderes Template-Stylesheet die Swiper-Klassen des Moduls überschreibt. Leeren Sie nach CSS-Änderungen den Joomla- und den Browser-Cache.

JavaScript-Konflikte

Deaktivieren Sie „jQuery laden“, wenn jQuery bereits von der Vorlage geladen wird. Überprüfen Sie außerdem, ob eine andere Erweiterung eine inkompatible Swiper-Version oder doppelte Fancybox-Assets lädt.

11. Aktualisieren

Sichern Sie vor dem Aktualisieren die Modulkonfiguration und die Website-Dateien. Installieren Sie das neuere Paket über den Erweiterungsinstallierer von Joomla. Das XML-Manifest gibt einen Update-Server an, sodass Joomla Updates anbieten kann, sobald dieser Server erreichbar ist. Überprüfen Sie nach der Aktualisierung den ausgewählten Stil, die Quelldaten und das benutzerdefinierte CSS.