Liebes Forum,
ich bin erst seit drei Wochen dabei und versuche den Carousel-Slider vom Bootstrap Framework für Typo3 4.5.2 mit Typoscript nachzubauen.
Ich weiß, es gibt Extension für ähnliche Lösungen, aber das ist nicht mein Ziel.
Ich habe im Forum ein Typo3 6.0 TypoScript für folgenden HTML-Aufbau gesehen, aber das funktioniert nicht für Typo3 4.x und ich weiß zuwenig, um rauszufinden, an welchen Stellen es genau liegen kann.
Hier der Link zum Beitrag: #114751
So sieht das Plain-HTML aus:
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/slide1.jpg" alt="">
<div class="carousel-caption">
<h4>First Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div class="item">
<img src="img/slide2.jpg" alt="">
<div class="carousel-caption">
<h4>Second Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div class="item">
<img src="img/slide3.jpg" alt="">
<div class="carousel-caption">
<h4>Third Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
<!-- ende carousel -->
Ich habe es bisher hinbekommen, dass bei der richtigen Stelle aus dem richtigen tt_content colPos die Bilder im FE ausgespuckt werden.
Nur scheitere ich jetzt daran, nur dem ersten Bild ein <div> mit einer extra class zu geben ("active").
Ich dachte anfangs, ich kann das mit OptionSplit lösen, aber das scheint nicht für meinen Aufbau zu funktioneren (1.std.wrap wäre dann meines Erachtens zu "splitten", aber das geht nicht vielleicht weil es CONTENT Element ist?).
Also halte ich mich an das oben erwähnte Typoscript für Typo3 6.0 und versuche mit LOAD_REGISTER nur dem ersten div die extra class zu geben.
Grundsätzlich geht das, nur haben jetzt alle <div>s die "active" class und mein RESTORE_REGISTER greift nicht, oder steht an der falschen Stelle, oder darf da eh nicht stehen... ich weiß es nicht.
Hier mein Typoscript (wo noch viel fehlt, ich bin jetzt erstmal nur beim inneren Content nämlich die Bilder und die Caption)
lib.carousel = CONTENT
lib.carousel {
table = tt_content
select.languageField = sys_language_uid
select.where = colPos = 5
select.selectFields = image_link,imagecaption,image,header
stdWrap.wrap = |
renderObj = COA
renderObj{
wrap = <div id="myCarousel{field:uid}" class="carousel slide">| </div>
wrap.insertData = 1
## hier müssen noch die carousel-indicators ebenfalls mit extra class ="active" hin
## Innere Elemente Bilder und Caption
5 = COA
5 {
6 = LOAD_REGISTER
6.firstItemSliderClass = active
20 = TEXT
20.field = image
20.wrap = <div class="carousel-inner"> | </div>
20.split {
token = ,
cObjNum = 1
1 {
10 = IMAGE
10.file {
import.current = 1
import = uploads/pics/
width = 100c
height = 100c
}
30 = TEXT
30 {
field = imagecaption
# split saves the index in REGISTER:SPLIT_COUNT
listNum.stdWrap.data = REGISTER:SPLIT_COUNT
listNum.splitChar = 10
wrap = <div class="carousel-caption"><p> | <p></div>
}
}
1.stdWrap.wrap = <div class="item {register:firstItemSliderClass}">|</div>
1.stdWrap.wrap.insertData = 1
40 = RESTORE_REGISTER
}
}
10 = TEXT
10 {
value (
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel{field:uid}" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel{field:uid}" data-slide="next">›</a>
)
insertData = 1
}
}
}
Und im Frontend sieht es dann so aus:
<div id="myCarousel24" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="typo3temp/pics/afcde82dbc.jpg" width="1024" height="400" alt="" />
<div class="carousel-caption">
<p>Wüste<p>
</div>
</div>
<div class="item active">
<img src="typo3temp/pics/1abb6a1945.jpg" width="1024" height="400" alt="" />
<div class="carousel-caption">
<p>Lighthouse<p>
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel24" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel24" data-slide="next">›</a>
</div>
Ich freue mich sehr, wenn mir jemand helfen kann!
Vielen Dank im Voraus,
Lisa