Skip to content

F
flexslider
Commit 454631ee authored by Andy Hausmann's avatar Andy Hausmann
Browse files
Options

Added options to control image dimensions; added Documentation; splitter... 

Added options to control image dimensions; added Documentation; splitter template into partials a bit.
parent 6dd04881
Hide whitespace changes
Inline Side-by-side
Showing with 210 additions and 67 deletions
Configuration/FlexForms/flexform.xml
View file @ 454631ee
......@@ -176,5 +176,94 @@
</animation>
<!-- Animation Settings / End -->
<!-- Image Settings / Beging -->
<images>
<ROOT>
<TCEforms>
<sheetTitle>LLL:EXT:flexslider/Resources/Private/Language/locallang_be.xml:flexforms_tab.images
</sheetTitle>
<sheetDescription>LLL:EXT:flexslider/Resources/Private/Language/locallang_be.xml:flexforms_tab_desc.images
</sheetDescription>
</TCEforms>
<type>array</type>
<el>
<settings.images.width>
<TCEforms>
<label>
LLL:EXT:flexslider/Resources/Private/Language/locallang_be.xml:flexforms_settings.images.width
</label>
<config>
<type>input</type>
<size>4</size>
</config>
</TCEforms>
</settings.images.width>
<settings.images.height>
<TCEforms>
<label>
LLL:EXT:flexslider/Resources/Private/Language/locallang_be.xml:flexforms_settings.images.height
</label>
<config>
<type>input</type>
<size>4</size>
</config>
</TCEforms>
</settings.images.height>
<settings.images.minWidth>
<TCEforms>
<label>
LLL:EXT:flexslider/Resources/Private/Language/locallang_be.xml:flexforms_settings.images.minWidth
</label>
<config>
<type>input</type>
<size>4</size>
</config>
</TCEforms>
</settings.images.minWidth>
<settings.images.minHeight>
<TCEforms>
<label>
LLL:EXT:flexslider/Resources/Private/Language/locallang_be.xml:flexforms_settings.images.minHeight
</label>
<config>
<type>input</type>
<size>4</size>
</config>
</TCEforms>
</settings.images.minHeight>
<settings.images.maxWidth>
<TCEforms>
<label>
LLL:EXT:flexslider/Resources/Private/Language/locallang_be.xml:flexforms_settings.images.maxWidth
</label>
<config>
<type>input</type>
<size>4</size>
</config>
</TCEforms>
</settings.images.maxWidth>
<settings.images.maxHeight>
<TCEforms>
<label>
LLL:EXT:flexslider/Resources/Private/Language/locallang_be.xml:flexforms_settings.images.maxHeight
</label>
<config>
<type>input</type>
<size>4</size>
</config>
</TCEforms>
</settings.images.maxHeight>
</el>
</ROOT>
</images>
<!-- Animation Settings / End -->
</sheets>
</T3DataStructure>
\ No newline at end of file
Configuration/TypoScript/setup.txt
View file @ 454631ee
......@@ -38,6 +38,15 @@ plugin.tx_flexslider {
animationLoop = 1
# Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
pauseOnHover = 0
# Image settings - experimental!
images {
width =
height =
minWidth =
minHeight =
maxWidth =
maxHeight =
}
}
}
......
README.md
View file @ 454631ee
......@@ -81,6 +81,16 @@ _This section isn't completed yet._
randomize = false
# Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
pauseOnHover = 0
# Image settings in px - experimental!
# If you don't really NEED them, just keep the options empty!
images {
width =
height =
minWidth =
minHeight =
maxWidth =
maxHeight =
}
}
}
......
Resources/Private/Language/locallang_be.xml
View file @ 454631ee
......@@ -13,6 +13,13 @@
<label index="flexforms_tab.slideshow">Slideshow</label>
<label index="flexforms_tab.animation">Animation</label>
<label index="flexforms_tab.images">Images</label>
<label index="flexforms_tab_desc.images"><![CDATA[
This is an experimental section!
FlexSlider acts 100% flexible in the Frontend and doesn't need any image dimension.
If you really need to bring the Frontend output to heel, you can define whatever you may need and test it for optimal visual results.
]]></label>
<label index="flexforms_settings.animation">Animation effect</label>
<label index="flexforms_settings.animation.fade">Fade</label>
<label index="flexforms_settings.animation.slide">Slide</label>
......@@ -26,6 +33,12 @@
<label index="flexforms_settings.randomize">Randomize slide order</label>
<label index="flexforms_settings.animationLoop">Loop slides</label>
<label index="flexforms_settings.pauseOnHover">Pause the slideshow when hovering</label>
<label index="flexforms_settings.images.width">Width (in px)</label>
<label index="flexforms_settings.images.height">Height (in px)</label>
<label index="flexforms_settings.images.minWidth">min. Width (in px)</label>
<label index="flexforms_settings.images.minHeight">min. Height (in px)</label>
<label index="flexforms_settings.images.maxWidth">max. Width (in px)</label>
<label index="flexforms_settings.images.maxHeight">max. Height (in px)</label>
</languageKey>
<languageKey index="de" type="array">
<label index="pi1_title">FlexSlider</label>
......@@ -35,6 +48,13 @@
<label index="flexforms_tab.slideshow">Slideshow</label>
<label index="flexforms_tab.animation">Animation</label>
<label index="flexforms_tab.images">Bilder</label>
<label index="flexforms_tab_desc.images"><![CDATA[
Dies ist ein experimenteller Bereich!
Der FlexSlider verhält sich 100%-ig flexibel im Frontend und benötigt keinerlei Angabe von Bild-Dimensionen.
Sollte eine gewisse Kontrolle hinsichtlich der visuellen Ausgabe erforderlich sein, so können hier Anpassungen vorgenommen werden.
]]></label>
<label index="flexforms_settings.animation">Animationseffekt</label>
<label index="flexforms_settings.animation.fade">Faden</label>
<label index="flexforms_settings.animation.slide">Sliden</label>
......@@ -48,6 +68,12 @@
<label index="flexforms_settings.randomize">Sortierung nach Zufall</label>
<label index="flexforms_settings.animationLoop">Slides am Ende wiederholen</label>
<label index="flexforms_settings.pauseOnHover">Slideshow pasusiren bei Mouseover</label>
<label index="flexforms_settings.images.width">Breite (in px)</label>
<label index="flexforms_settings.images.height">Höhe (in px)</label>
<label index="flexforms_settings.images.minWidth">min. Breite (in px)</label>
<label index="flexforms_settings.images.minHeight">min. Höhe (in px)</label>
<label index="flexforms_settings.images.maxWidth">max. Breite (in px)</label>
<label index="flexforms_settings.images.maxHeight">max. Höhe (in px)</label>
</languageKey>
</data>
</T3locallang>
\ No newline at end of file
Resources/Private/Partials/JavaScript.html 0 → 100644
View file @ 454631ee
<script type="text/javascript">
<![CDATA[
$(window).load(function() {
$('.flexslider').flexslider({
]]>
animation: "{settings.animation}",
slideDirection: "{settings.slideDirection}",
slideshow: <f:if condition="{settings.slideshow} > 0"><f:then>true</f:then><f:else>false</f:else></f:if>,
slideshowSpeed: <f:if condition="{settings.slideshowSpeed} > 0"><f:then>{settings.slideSpeed}</f:then><f:else>7000</f:else></f:if>,
animationDuration: <f:if condition="{settings.animationDuration} > 0"><f:then>{settings.animationDuration}</f:then><f:else>600</f:else></f:if>,
directionNav: <f:if condition="{settings.directionNav} > 0"><f:then>true</f:then><f:else>false</f:else></f:if>,
keyboardNav: <f:if condition="{settings.keyboardNav} > 0"><f:then>true</f:then><f:else>false</f:else></f:if>,
mousewheel: <f:if condition="{settings.mousewheel} > 0"><f:then>true</f:then><f:else>false</f:else></f:if>,
prevText: "<f:translate key="prevText">vor</f:translate>",
nextText: "<f:translate key="nextText">weiter</f:translate>",
pausePlay: <f:if condition="{settings.pausePlay} > 0"><f:then>true</f:then><f:else>false</f:else></f:if>,
pauseText: "<f:translate key="pauseText">vor</f:translate>",
playText: "<f:translate key="playText">vor</f:translate>",
randomize: <f:if condition="{settings.randomize} > 0"><f:then>true</f:then><f:else>false</f:else></f:if>,
animationLoop: <f:if condition="{settings.animationLoop} > 0"><f:then>true</f:then><f:else>false</f:else></f:if>,
pauseOnHover: <f:if condition="{settings.pauseOnHover} > 0"><f:then>true</f:then><f:else>false</f:else></f:if>
<![CDATA[
});
});
]]>
</script>
\ No newline at end of file
Resources/Private/Partials/ResourceFiles.html 0 → 100644
View file @ 454631ee
{namespace fs=Tx_Flexslider_ViewHelpers}
<fs:AddJQuery altJQueryFile="{settings.lib.jQuery}" />
<fs:AddCssJs file="{settings.lib.flexslider}" moveToFooter="{settings.lib.moveToFooter}" />
<fs:AddCssJs file="{settings.css}" />
\ No newline at end of file
Resources/Private/Templates/FlexSlider/List.html
View file @ 454631ee
......@@ -4,74 +4,52 @@
<f:section name="main">
<fs:AddJQuery altJQueryFile="{settings.lib.jQuery}" />
<fs:AddCssJs file="{settings.lib.flexslider}" moveToFooter="{settings.lib.moveToFooter}" />
<fs:AddCssJs file="{settings.css}" />
<f:flashMessages />
<script type="text/javascript">
<![CDATA[
$(window).load(function() {
$('.flexslider').flexslider({
]]>
animation: "{settings.animation}",
slideDirection: "{settings.slideDirection}",
slideshow: <f:if condition="{settings.slideshow} > 0"><f:then>true</f:then><f:else>false</f:else></f:if>,
slideshowSpeed: <f:if condition="{settings.slideshowSpeed} > 0"><f:then>{settings.slideSpeed}</f:then><f:else>7000</f:else></f:if>,
animationDuration: <f:if condition="{settings.animationDuration} > 0"><f:then>{settings.animationDuration}</f:then><f:else>600</f:else></f:if>,
directionNav: <f:if condition="{settings.directionNav} > 0"><f:then>true</f:then><f:else>false</f:else></f:if>,
keyboardNav: <f:if condition="{settings.keyboardNav} > 0"><f:then>true</f:then><f:else>false</f:else></f:if>,
mousewheel: <f:if condition="{settings.mousewheel} > 0"><f:then>true</f:then><f:else>false</f:else></f:if>,
prevText: "<f:translate key="prevText">vor</f:translate>",
nextText: "<f:translate key="nextText">weiter</f:translate>",
pausePlay: <f:if condition="{settings.pausePlay} > 0"><f:then>true</f:then><f:else>false</f:else></f:if>,
pauseText: "<f:translate key="pauseText">vor</f:translate>",
playText: "<f:translate key="playText">vor</f:translate>",
randomize: <f:if condition="{settings.randomize} > 0"><f:then>true</f:then><f:else>false</f:else></f:if>,
animationLoop: <f:if condition="{settings.animationLoop} > 0"><f:then>true</f:then><f:else>false</f:else></f:if>,
pauseOnHover: <f:if condition="{settings.pauseOnHover} > 0"><f:then>true</f:then><f:else>false</f:else></f:if>
<![CDATA[
});
});
]]>
</script>
<f:if condition="<f:count subject='{flexSliders}' /> > 0">
<div class="flexslider">
<ul class="slides">
<f:for each="{flexSliders}" as="flexSlider">
<li>
<f:if condition="{flexSlider.link}">
<f:then>
<f:link.page pageUid="{flexSlider.link}">
<f:render partial="ResourceFiles" arguments="{settings: settings}"/>
<f:render partial="JavaScript" arguments="{settings: settings}"/>
<f:flashMessages />
<f:if condition="<f:count subject='{flexSliders}' /> > 0">
<div class="flexslider">
<ul class="slides">
<f:for each="{flexSliders}" as="slide">
<li>
<f:if condition="{slide.link}">
<f:then>
<f:link.page pageUid="{slide.link}">
<f:image
src="uploads/tx_flexslider/{slide.image}"
alt="{slide.caption}"
width="{settings.images.width}" height="{settings.images.width}"
minWidth="{settings.images.minWidth}" minHeight="{settings.images.minHeight}"
maxWidth="{settings.images.maxWidth}" maxHeight="{settings.images.maxHeight}" />
</f:link.page>
</f:then>
<f:else>
<f:image
src="uploads/tx_flexslider/{flexSlider.image}"
alt="{flexSlider.caption}" />
</f:link.page>
</f:then>
<f:else>
<f:image
src="uploads/tx_flexslider/{flexSlider.image}"
alt="{flexSlider.caption}" />
</f:else>
</f:if>
<p class="flex-caption">
<f:if condition="{flexSlider.title}">
<strong>{flexSlider.title}</strong>
</f:if>
<f:if condition="{flexSlider.subtitle}">
<span>{flexSlider.subtitle}</span>
src="uploads/tx_flexslider/{slide.image}"
alt="{slide.caption}"
width="{settings.images.width}" height="{settings.images.width}"
minWidth="{settings.images.minWidth}" minHeight="{settings.images.minHeight}"
maxWidth="{settings.images.maxWidth}" maxHeight="{settings.images.maxHeight}" />
</f:else>
</f:if>
</p>
</li>
</f:for>
</ul>
</div>
</f:if>
<p class="flex-caption">
<f:if condition="{slide.title}">
<strong>{slide.title}</strong>
</f:if>
<f:if condition="{slide.subtitle}">
<span>{slide.subtitle}</span>
</f:if>
</p>
</li>
</f:for>
</ul>
</div>
</f:if>
</f:section>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment