Slider aus den Medien des Standard-CEs "Text & Medien"
Dieser Slider ist über ein einfaches CE-Element "Text & Medien" entstanden. Bei den Frames wurde eine Frame-Klasse "Bild-Slider" hinzugefügt. Das Sliding klappt mit der Javascript-Funktion "bx_slider.js".
Wie es genau gemacht wird sehen Sie unten bei den Klapp-Boxen.
Die schönsten Sandhaufen auf der ganzen Welt!
Und so wird es gemacht:
Das Core-Template "textmedia" fragt die Klasse "imageSlider" ab:
<f:section name="Main">
<div class="ce-textpic ce-{gallery.position.horizontal} ce-{gallery.position.vertical}{f:if(condition: gallery.position.noWrap, then: ' ce-nowrap')}">
<f:if condition="{data.frame_class} == 'imageSlider'">
<f:then>
<f:render partial="Media/Slider" arguments="{_all}" />
</f:then>
<f:else>
<f:if condition="{gallery.position.vertical} != 'below'">
<f:render partial="Media/Gallery" arguments="{_all}" />
</f:if>
</f:else>
</f:if>
<f:if condition="{data.bodytext}">
<f:then>
<div class="ce-bodytext">
<f:if condition="{gallery.position.noWrap}">
<f:render partial="Header/All" arguments="{_all}" />
</f:if>
<f:format.html>{data.bodytext}</f:format.html>
</div>
</f:then>
<f:else>
<f:if condition="{gallery.position.noWrap}">
<f:if condition="{data.header}">
<div class="ce-bodytext">
<f:render partial="Header/All" arguments="{_all}" />
</div>
</f:if>
</f:if>
</f:else>
</f:if>
<f:if condition="{data.frame_class} != 'imageSlider' && {gallery.position.vertical} == 'below'">
<f:render partial="Media/Gallery" arguments="{_all}" />
</f:if>
</div>
</f:section>
Darin wird ein Partial "Slider" aufgerufen mit diesem Inhalt:
<f:if condition="{gallery.rows}">
<div id="imageSlider{data.uid}"
class="
ce-gallery
{f:if(condition: data.imageborder, then: ' ce-border')}
imageSlider
"
>
<f:for each="{gallery.rows}" as="row">
<f:for each="{row.columns}" as="column">
<f:if condition="{column.media}">
<div class="slider-item">
<f:render partial="Media/Type" arguments="{file: column.media, dimensions: column.dimensions, data: data, settings: settings}" />
</div>
</f:if>
</f:for>
</f:for>
</div>
<script>
$(document).ready(function(){
$('#imageSlider{data.uid}').bxSlider({
auto: true,
speed: 800,
pause: 5000,
autoControls: true,
stopAutoOnClick: true,
pager: true,
slideWidth: <f:format.raw>{f:if(condition:'{gallery.width}', then: ' {gallery.width}', else: '1200')}</f:format.raw>,
captions: true,
autoHover: true
});
});
</script>
</f:if>
mit ein wenig CSS:
details {
summary {
background: $hellorange;
border-radius: 3px;
cursor: pointer;
padding: 0 6px;
text-decoration: none;
height: auto !important;
line-height: 36px;
display:block;
margin-bottom: 6px;
position:relative;
width: 100%;
text-align: left;
font-weight: bold;
@include font-size(18);
.glyphicon {
float: left;
margin: 8px 6px 0 0;
}
.glyphicon-chevron-down {
display:block;
}
.glyphicon-chevron-up {
display:none;
}
}
&[open=''] summary {
.glyphicon-chevron-down {
display:none;
}
.glyphicon-chevron-up {
display:block;
}
}
}
.expanding-container {
details > div > header {
display:none;
}
}