[TYPO3-german] Extension gesucht. Wie realisiere ich einen Bilder-Slider?

[Matthias Eberlein]

Warum sich das Leben so schwer machen_
Mit der News Extension von Georg Ringer (tx_news)  hast Du alles Werkzeug was man braucht. In 5min hat man das Grundgerüst für den Slider gebaut und der Rest ist jQuery und CSS.
Hier ein Beispiel für sly:

http://darsa.in/sly/examples/horizontal.html

====> general.html <========

<f:if condition="{0: settings.templateLayout} == {0: 'sly'}">
<f:then>
<div class="scrollbar">
        <div class="handle">
                <div class="mousearea"></div>
        </div>
</div>
<div class="frame" id="cycleitems">
	<f:flashMessages class="tx-news-flash-message" />
	<f:render section="content" />
</div>
</f:then>
<f:else>
...

</f:else>    
</f:if>


=====> List.html <====== !!! Richtig einbauen. Mal Im Manual von tx_news schauen.

    <f:if condition="{0: settings.templateLayout} == {0: 'sly'}">
        <f:then>
            <ul class="ym-clearfix">
                <f:for each="{news}" as="newsItem">
                   <f:render partial="List/sly" arguments="{newsItem: newsItem, settings:settings}" /> 
                </f:for>

            </ul>
        </f:then>
    </f:if> 


Im Ordner Partials eine neue html datei namens sly.html erstellen und folgendes einfügen.

{namespace n=Tx_News_ViewHelpers}
<li>
	<div class="header">
		<h3>
			<n:link newsItem="{newsItem}" settings="{settings}">
				{newsItem.title}
			</n:link>
		</h3>
	</div>
</li>

Hier wird jetzt nur der Header zum Test ausgegeben.

Das minimal CSS mitgeben

/* sly*/

frame {
    height: 250px;
    line-height: 250px;
    overflow: hidden;
}
frame ul {
    font-size: 50px;
    height: 100%;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
frame ul li {
    background: none repeat scroll 0 0 #333333;
    color: #DDDDDD;
    cursor: pointer;
    float: left;
    height: 100%;
    margin: 0 1px 0 0;
    padding: 0;
    text-align: center;
    width: 227px;
}
frame ul li.active {
    background: none repeat scroll 0 0 #A03232;
    color: #FFFFFF;
}
scrollbar {
    background: none repeat scroll 0 0 #CCCCCC;
    height: 2px;
    line-height: 0;
    margin: 0 0 1em;
}
scrollbar .handle {
    background: none repeat scroll 0 0 #292A33;
    cursor: pointer;
    height: 100%;
    width: 100px;
}
scrollbar .handle .mousearea {
    height: 20px;
    left: 0;
    position: absolute;
    top: -9px;
    width: 100%;
}

Und die jQuery File von sly mit page.includeJsFooter Einbinden. In pageTsconfig noch das sly Template Verfügbar machen.

tx_news.templateLayouts {
    sly = sly
}

Im BE ein Content Element "news" in deiner Seite Einfügen Storage deiner News/Sly Elemente angeben, im News modul auch das Template auswählen welches wir eben Verfügbar gemacht haben (sly).  Ein paar Artikel Erstellen, oder besser noch eine Categorie für den Sly Erstellen und im News Artikel jeweils vergeben. 
Nun mal Cache Löschen und im FE schauen...
Dass lässt sich jetzt beliebig auf jeden jQuery Slider oder auch SupersizedBackground Umbauen/Erweitern.

Gruss
maty