
TYPO3 Plugin:
flexslider
EXT: FlexSlider
Es bringt WooThemes fantastisches, voll reaktionsfähiges jQuery Slider Plugin zu TYPO3 ? natürlich als Frontend Plugin.
Installation
Via Git
Klonen in typo3conf/ext/ext/
git clone git@bitbucket.org:sotastudio/typo3.extbase.flexslider.git /path/to/project/typo3conf/ext/flexslider/
Die Installation erfolgt wie gewohnt über den Extension Manager.
Über TER
Konfiguration
- Statische Erweiterungsvorlage einbinden
- Frontend-Plugin erstellen
- Anpassen der Plugin-Einstellungen an Ihre Bedürfnisse
- Einrichten der Speicherseite für Datensätze, von der aus die Slider-Elemente stammen
- Erstellen von Schieberegler-Elementen auf der Seite mit der Datensammlung
- Überprüfen Sie das Frontend!
TypoScript-Konstanten
plugin.tx_flexslider { {
ansicht {
# Notwendige Optionen, wenn Sie planen, die Vorlagen zu manipulieren
templateRootPath = EXT:flexslider/Ressourcen/Private/Templates/
partieller RootPath = EXT:flexslider/Ressourcen/Private/Teile/
layoutRootPath = EXT:flexslider/Ressourcen/Private/Layouts/
}
persistenz {
# Hier können Sie die Record Storage Page global einrichten
storagePid =
}
einstellungen {
# Zeichenkette: Dateiverweis auf die Css-Datei des FlexSlider - leere diesen Wert, wenn du ihn selbst einbinden möchtest
css = EXT:flexslider/Ressourcen/Public/Css/flexslider.css
lib {
# Zeichenkette: Dateiverweis auf die alternative jQuery-Bibliothek, wenn EXT t3jquery nicht verwendet wird
jQuery = EXT:flexslider/Ressourcen/Public/Js/jquery-min.js
# Zeichenkette: Dateiverweis auf die flexslider-Bibliothek
flexslider = EXT:flexslider/Ressourcen/Public/Js/jquery.flexslider-min.js
# Bool: Flag, um festzulegen, ob das Skript in die Fußzeile verschoben werden soll oder nicht
moveToFooter = 0
}
}
}
TypoScript-Einrichtung
plugin.tx_flexslider { {
einstellungen {
# Boolean: Definiert, ob die Bildunterschrift angezeigt werden soll oder nicht
showCaption = 1
# Zeichenkette: Wählen Sie Ihren Animationstyp, "verblassen" oder "Folie"
animation = Verblassen
# Zeichenkette: Wählen Sie die Gleitrichtung, "horizontal" oder "vertikal"
gleitrichtung = horizontal
# Boolean: Schieberegler automatisch animieren
diashow = 0
# Integer: Stellen Sie die Geschwindigkeit des Diashow-Zyklus in Millisekunden ein
diashowGeschwindigkeit = 7000
# Integer: Legen Sie die Geschwindigkeit der Animationen in Millisekunden fest
animationDauer = 600
# Boolean: Navigation der Display-Steuerung
controlNav = 1
# Boolean: Navigation für vorherige/nächste Navigation erstellen? (wahr/falsch)
directionNav = 1
# Boolean: Ermöglicht die Navigation mit dem Schieberegler über die linke/rechte Tastaturtaste
keyboardNav = 1
# Boolean: Ermöglicht die Navigation mit dem Schieberegler über das Mausrad
mausrad = 0
# Boolean: Erstellen von Pausen-/Wiedergabedynamikelementen
pausePlay = 0
# Boolean: Zufällige Folienreihenfolge
randomisieren = 0
# Boolean: Soll die Animationsschleife durchlaufen werden? Wenn falsch, erhält directionNav an beiden Enden "disable"-Klassen
animationLoop = 1
# Boolean: Pausieren Sie die Diashow, wenn Sie mit der Maus über den Schieberegler fahren, und setzen Sie sie dann fort, wenn Sie nicht mehr mit der Maus fahren
pauseOnHover = 0
# Bildeinstellungen in px - experimentell!
# Wenn du sie nicht wirklich brauchst, halte einfach die Optionen leer!
# Das Zuschneiden funktioniert - geben Sie einfach so etwas wie Breite = 960c ein
bilder {
breite =
höhe =
minWidth =
minHeight =
maxWidth = Breite
maxHeight =
}
}
}
Sprachüberschreibungen
Verwenden Sie den folgenden TS Setup-Objektpfad, um Lokalisierungen zu überschreiben.
plugin.tx_flexslider._LOCAL_LANG.de {
languageLabel = Wert
}
Diverse
Werfen Sie einen Blick auf
- /Konfiguration/Typoscript/constants.txt
- /Konfiguration/Typoscript/setup.txt
um weitere Informationen über Einstellungen und Sprachbeschriftungen zu erhalten.
Fluid Templatierung
Hinweis auf den Anfang: Wenn Sie spezielle Objekte/Vars in Partials verwenden möchten, müssen Sie diese als Argument durchgeben, z.B.
<f:rendern
partial="JavaScript" (Teilweise)
arguments="{settings: settings, data: data, configuration: configuration}"/>
Speichern der Vorlagen an anderer Stelle
Wirklich? Das ist ganz einfach - passen Sie einfach die folgenden Zeilen an Ihre Bedürfnisse an und setzen Sie sie in die TypoScript-Konstanten ein.
plugin.tx_flexslider { {
ansicht {
# Notwendige Optionen, wenn Sie planen, die Vorlagen zu manipulieren
templateRootPath = fileadmin/res/tpl/ext/flexslider/Templates/
partialRootPath = fileadmin/res/tpl/ext/flexslider/Partials/
layoutRootPath = fileadmin/res/tpl/ext/flexslider/Layouts/
}
}
Zugriff auf Frontend-Daten
Mit dem Objekt {data} können Sie auf alles zugreifen, was das Inhaltselement (mit dem FlexSlider Plugin) betrifft:
cObject Daten-Array | |
---|---|
data.uid | Das Uid |
data.pid | Seiten-ID, die dieses Inhaltselement enthält |
data.sys_language_uid | ID der Sprache der Datensätze |
Und natürlich noch viele mehr. Verwenden Sie einfach den Debug Viewhelper, um einen Hinweis auf andere Variablen zu erhalten:
<f:debug>{daten}</f:debug>
Aufrufen der Erweiterungskonfiguration
Mit dem Objekt {configuration} können Sie auf alle Optionen aus der Extension Configuration zugreifen, die im Extension Manager definiert ist (gespeichert in der localconf.php):
Erweiterungskonfiguration | |
---|---|
extendSubtitleByRTE | Boolean - definiert, ob der Untertitel eine RTE ist oder nicht; wenn ja, kann er HTML enthalten |
Wie man
? das Plugin in einer Bibliothek verwenden
? um es z.B. auf die Seitenvorlage zu verweisen:
lib.example < temp.flexslider
lib.example.persistence.storagePid = 73
lib.example.settings.randomize = 1
Sie müssen nur die Records Storage Page ID (storagePid) anpassen - erforderlich! Natürlich können Sie das TypoScript-Setup über die lib.example.settings an Ihre Bedürfnisse anpassen. Graben Sie einfach in /Configuration/Typoscript/setup.txt, um einen Hinweis auf die Möglichkeiten zu erhalten.
? Inline JS in den Kopf oder zum Verschließen des Body-Tags werfen
Besuchen Sie die Hauptvorlage in typo3conf/ext/flexslider/Resources/Private/Templates/FlexSlider/List.html und ersetzen Sie sie
<f:rendern
partial="JavaScript" (Teilweise)
arguments="{settings: settings, data: data}"/>
mit
<fs:AddJsInline hinzufügen
code="<f:render partial='JavaScriptRaw'
arguments='{settings: Einstellungen, Daten: data}'/>"
name="fs-{data.uid}" "
moveToFooter="{settings.lib.moveToFooter}" " />
Roadmap und Aufgaben
Werfen Sie einen Blick auf den Github Issue Tracker für dieses Projekt.
Mitwirken
Wenn Sie Ideen, Features oder bug-Anfragen haben, zögern Sie nicht, diese im Issue Tracker zu melden.
Zögern Sie nicht, sich zu gabeln- und zu ziehen.
Mitwirkende
Simon Rauterberg
- Hotfix für DynLinkViewHelper)
Xaver Maierhofer
- Verbesserung für AddCssJsViewHelper
- Verbesserung für AddJQueryViewHelper
- Neu hinzufügenJsInlineViewHelper
Benötigen Sie schnelle Hilfe mit dieser Extension? Unser Team von erfahrenen TYPO3-Entwicklern löst Probleme unkompliziert und zum Stundensatz.
Verteilung:FLEXSLIDER ist auf
3.11 % aller TYPO3 installiert.
- 1 % aller TYPO3 9.5.x Installationen installiert
- 0.93 % aller TYPO3 8.7.x Installationen installiert
- 5.09 % aller TYPO3 7.6.x Installationen installiert
- 6.25 % aller TYPO3 7.4.x Installationen installiert
- 25 % aller TYPO3 7.3.x Installationen installiert
- 2.94 % aller TYPO3 7.1.x Installationen installiert
- 33.33 % aller TYPO3 7.0.x Installationen installiert
- 3.52 % aller TYPO3 6.2.x Installationen installiert
- 6.32 % aller TYPO3 6.1.x Installationen installiert
- 5.56 % aller TYPO3 6.0.x Installationen installiert
- 4.07 % aller TYPO3 4.7.x Installationen installiert
- 0.91 % aller TYPO3 4.6.x Installationen installiert
- 2.45 % aller TYPO3 4.5.x Installationen installiert
- 1.39 % aller TYPO3 4.4.x Installationen installiert
- 1.69 % aller TYPO3 4.3.x Installationen installiert
- 0.83 % aller TYPO3 4.2.x Installationen installiert
- 1.91 % aller TYPO3 4.1.x Installationen installiert
Aktualität:FLEXSLIDER ist auf dem neusten Stand (v.1.5.3) bei
40.54 % aller TYPO3 Installationen
- 0 % aller TYPO3 9.5.x Installationen
- 0 % aller TYPO3 9.3.x Installationen
- 0 % aller TYPO3 9.2.x Installationen
- 0.37 % aller TYPO3 8.7.x Installationen
- 4.22 % aller TYPO3 7.6.x Installationen
- 0 % aller TYPO3 7.5.x Installationen
- 6.25 % aller TYPO3 7.4.x Installationen
- 25 % aller TYPO3 7.3.x Installationen
- 0 % aller TYPO3 7.2.x Installationen
- 2.94 % aller TYPO3 7.1.x Installationen
- 33.33 % aller TYPO3 7.0.x Installationen
- 2.2 % aller TYPO3 6.2.x Installationen
- 0.62 % aller TYPO3 6.1.x Installationen
- 0.23 % aller TYPO3 6.0.x Installationen
- 0 % aller TYPO3 5.0.x Installationen
- 0 % aller TYPO3 4.7.x Installationen
- 0.13 % aller TYPO3 4.6.x Installationen
- 0.08 % aller TYPO3 4.5.x Installationen
- 0.09 % aller TYPO3 4.4.x Installationen
- 0 % aller TYPO3 4.3.x Installationen
- 0 % aller TYPO3 4.2.x Installationen
- 0 % aller TYPO3 4.1.x Installationen
- 0 % aller TYPO3 4.0.x Installationen
- 0 % aller TYPO3 3.5.x Installationen
FLEXSLIDER Version:Verteilung nach installierten Versionen
- 4.72 % FLEXSLIDER v.7.0.0
- 0.18 % FLEXSLIDER v.6.2.0
- 1.27 % FLEXSLIDER v.1.5.4
- 86.75 % FLEXSLIDER v.1.5.3
- 7.08 % FLEXSLIDER v.1.5.2
PHP Version:FLEXSLIDER wird benutzt mit
- 3.77 % PHP/7.0
- 44.35 % PHP/5.6
- 18.84 % PHP/5.5
- 7.53 % PHP/5.4
- 18.15 % PHP/5.3
- 7.19 % PHP/5.2
- 0.17 % PHP/4.4

Gosign-Responsive Index: TYPO3 Installationen nutzen FLEXSLIDER zu
- 7 % wenn der Gosign-Responsive-Index zwischen 80 % und 100 % ist
- 15 % wenn der Gosign-Responsive-Index zwischen 60 % und 80 % ist
- 43 % wenn der Gosign-Responsive-Index zwischen 40 % und 60 % ist
- 35 % wenn der Gosign-Responsive-Index zwischen 20 % und 40 % ist
- 0 % wenn der Gosign-Responsive-Index zwischen 0 % und 20 % ist

Pagespeed: TYPO3 Installationen nutzen FLEXSLIDER zu
- 15 % wenn der Pagespeed zwischen 80 % und 100 % ist
- 44 % wenn der Pagespeed zwischen 60 % und 80 % ist
- 29 % wenn der Pagespeed zwischen 40 % und 60 % ist
- 11 % wenn der Pagespeed zwischen 20 % und 40 % ist
- 8 % wenn der Pagespeed zwischen 0 % und 20 % ist
[DependciesAndConflicts]