EXT:t3s_headerslider

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
		}
	}
}