... bis TYPO3 Version 8
Mit dieser Extension kannst Du deiner Website einen Headerslider hinzufügen.
Folgende Plugins stehen zur Auswahl:
- Nivo Slider - © 2010-2012 Dev7studios
- Camera slidershow - © 2012 by Manuel Masia | Pixedelic.com
- Carousel slideshow - © 2014 Twitter Inc.
- und ein "Custom PlugIn"
Nach der Installation im EM, muß das statische Template für die EXT geladen werden.
Danach müssen im Konstanten-Editor die nötigen Einstellungen für das JS vorgenommen werden.
Das Einbinden der Extension wird mit TypoScript und einer Variable für das Template vollzogen.
TS-Setup:
# Hier wird dem Fluid-Template eine neue Variable mit dem Headerslider zugewiesen
page {
...
10 = FLUIDTEMPLATE
10 {
...
variables {
...
headerslider < lib.t3sheaderslider
...
}
}
}
Diese Variable, kann dann im Fluid-Template, an gewünschter Stelle, platziert werden:
Fluid-Template:
<f:format.raw>{headerslider}</f:format.raw>
Mit EXT:t3sbootstrap (ab Version 4.0.8) sind diese Einstellungen nicht nötig. Hier habe ich bereits eine Variable "headerslider" mit "lib.t3sheaderslider" vorbelegt und im Jumbotron platziert. Das statische Template ist vor der EXT:t3sbootstrap zu laden!
Generelle Einstellungen können in der EM config vorgenommen werden.
Hier kann z.B. ein vorinstalliertes Plugin ausgewählt werden:

Für die Auswahl "Carousel (Bootstrap 4)", muss Bootstrap 4 mit entsprechenden Komponenten installiert sein.
Nach Änderungen in der EM config muss der Cache gelöscht werden.
Nach der Installation oder wenn das Plugin gewechselt wurde, muss im Planer (Scheduler) der Task "Headerslider UPDATEquery" hinzugefügt und einmalig ausgeführt werden.
Hiermit wird die Flexform auf jeder Seite für den Headerslider mit dem gewähltem Plugin aktualisiert.
Der Task "Headerslider UPDATEquery" hat folgende Settings/Optionen (default):
plugin.tx_t3sheaderslider {
settings {
# Settings for the task (schedular)
updateQuery {
slider = 1
recursive = 1
recursiveSettings = 1
}
}
}
Jetzt ist die Extension mit dem gewählten Plugin einsatzbereit!
Unter "Seite bearbeiten", befindet sich ein neuer Tabulator "Headerslider". Hier können Bilder mit Titel, Bildbeschreibung und Link über den File Abstraction Layer (FAL) geladen oder referenziert werden. Die Bilder, sowie die Settings können wahlweise auf rekursive gestellt werden. Damit werden die Bilder bzw. Settings aus der Rootline bezogen.
Je nachdem, welches Plugin ausgewählt wurde, sind hier weitere Einstellungen möglich.
Die Einstellungen der Flexform können global überschrieben werden.
Dieses ist wie folgt möglich (s. auch "Settings / t3s_headerslider"):
plugin.tx_t3sheaderslider.settings.[PLUGIN].override.[OPTION]
plugin.tx_t3sheaderslider {
settings {
default {
jquery = {$plugin.tx_t3sheaderslider.settings.includeJquery}
jqueryNoConflict = {$plugin.tx_t3sheaderslider.settings.jqueryNoConflict}
moveJsFromHeaderToFooter = {$plugin.tx_t3sheaderslider.settings.moveJsFromHeaderToFooter}
# EM-config
plugin = {$plugin.tx_t3sheaderslider.plugin}
languageMode = {$plugin.tx_t3sheaderslider.languageMode}
}
nivoslider {
# Set starting Slide (0 index)
startSlide = 0
# Start on a random slide
randomStart = 0
# Prev directionNav text
prevText = Prev
# Next directionNav text
nextText = Next
// Custom Options
# For animated captions - Clear all cache after change
captionMoveIn {
width = 90%
height = auto
fontSize = 60px
left = 5%
top = 20%
duration = 500
}
# Clear all cache after change
captionMoveOut {
width = 0
height = auto
fontSize = 1px
left = 50%
top = 30%
duration = 0
}
override {
width =
height =
theme =
effect =
captions =
pauseOnHover =
manualAdvance =
directionNav =
controlNav =
pauseTime =
animSpeed =
slices =
boxCols =
boxRows =
}
}
cameraslider {
# topLeft, topCenter, topRight, centerLeft, center, centerRight, bottomLeft, bottomCenter, bottomRight
alignment = center
# true, false. Auto-advancing for mobile devices
mobileAutoAdvance = 1
# leftToRight, rightToLeft, topToBottom, bottomToTop
barDirection = leftToRight
# left, right, top, bottom
barPosition = bottom
cols = 6
# for the complete list jqueryui.com/demos/effect/easing.html
easing = easeInOutExpo
# leave empty if you want to display the same easing on mobile devices and on desktop etc.
mobileEasing =
# random, simpleFade, curtainTopLeft, curtainTopRight, curtainBottomLeft, curtainBottomRight, curtainSliceLeft, curtainSliceRight, blindCurtainTopLeft, blindCurtainTopRight, blindCurtainBottomLeft, blindCurtainBottomRight, blindCurtainSliceBottom, blindCurtainSliceTop, stampede, mosaic, mosaicReverse, mosaicRandom, mosaicSpiral, mosaicSpiralReverse, topLeftBottomRight, bottomRightTopLeft, bottomLeftTopRight, bottomLeftTopRight, scrollLeft, scrollRight, scrollHorz, scrollBottom, scrollTop
# N.B.: you can also use more than one effect, just separate them with commas: 'simpleFade, scrollRight, scrollBottom'
fx = random
# leave empty if you want to display the same effect on mobile devices and on desktop etc.
mobileFx =
# to make the grid blocks slower than the slices, this value must be smaller than transPeriod
gridDifference = 250
# true, false. Pause on state hover. Not available for mobile devices
hover = 1
# the path to the image folder (it serves for the blank.gif, when you want to display videos)
imagePath = EXT:t3sbootstrap/Resources/Public/Styles/Camera/images/
# pie, bar, none (even if you choose "pie", old browsers like IE8- can't display it... they will display always a loading bar)
loader = pie
loaderColor = #eeeeee
loaderBgColor = #222222
# 0, .1, .2, .3, .4, .5, .6, .7, .8, .9, 1
loaderOpacity = .8
# how many empty pixels you want to display between the loader and its background
loaderPadding = 2
# the thickness both of the pie loader and of the bar loader. Remember: for the pie, the loader thickness must be less than a half of the pie diameter
loaderStroke = 7
# you can also leave it blank
minHeight = 200px
# if true the navigation button (prev, next and play/stop buttons) will be visible on hover state only, if false they will be visible always
navigationHover = 1
mobileNavHover = 1
# true, false. Decide to put a layer on the images to prevent the users grab them simply by clicking the right button of their mouse (.camera_overlayer)
overlayer = 1
# true, false. It stops the slideshow when you click the sliders
pauseOnClick = 1
pieDiameter = 38
# 'rightTop', 'leftTop', 'leftBottom', 'rightBottom'
piePosition = rightTop
# true, false. Select true if you don't want that your images are cropped
portrait = 0
rows = 4
# if 0 the same value of cols
slicedCols = 12
# if 0 the same value of rows
slicedRows = 8
# next, prev, random: decide if the transition effect will be applied to the current (prev) or the next slide
slideOn = random
# true, false
thumbnails = 0
override {
# 0, moveFromLeft, moveFomRight, moveFromTop, moveFromBottom, fadeIn, fadeFromLeft, fadeFromRight, fadeFromTop, fadeFromBottom
captions =
# milliseconds between the end of the sliding effect and the start of the nex one (7000)
time =
# length of the sliding effect in milliseconds (1500)
transPeriod =
# here you can type pixels (for instance '300px'), a percentage (relative to the width of the slideshow, for instance '50%') or auto (50%)
height =
# true, false
autoAdvance =
# if true the navigation button (prev, next and play/stop buttons) will be visible, if false they will be always hidden
navigation =
# true, false
pagination =
# true or false, to display or not the play/pause buttons
playPause =
}
video.width = 1110
video.height = 555
}
carouselslider {
override {
width =
height =
controls =
indicators =
captions =
interval =
pause =
}
}
customslider {
override {
width =
height =
}
}
# Settings for the task (schedular)
updateQuery {
slider = 1
recursive = 1
recursiveSettings = 1
}
}
}