Hallo,
bin gerade dabei ein Bootstrap Carousel mit vertikalem Thumbnailslider in Typoscript (dabei soll man beim Thumbnailslider und beim Carousel jeweils Buttons zum weiterklicken haben) zu realisieren.
Hab es auch schon fast geschafft, außer dass ich mit dem Zähler nicht so ganz klar komme, sprich er mir die div item 8mal auswirft obwohl ich nur 2 Itemboxen mit jeweils 4 Bildern darin brauche. Ich weiß schon dass es daran liegt dass ich nach jedem Bild den Counter reintue, aber wie soll ich die Bilder sonst hochzählen oder kann ich die Bilder auch mit register :IMAGE_NUM hochzählen? Vielleicht kann mir irgendwer auf die Sprünge helfen, wäre sehr dankbar für jeden Tipp der mir nur irgendwie weiterhilft. Danke!
Anbei mein Code (Seite zum Code http://www.simonebauer.info/simone-bauer/portfolio/newborn/unschuldig-zart.html )
lib.FcePortfolio = COA
lib.FcePortfolio {
wrap = <div class="row"><div class="col-md-12" style="clear:both; margin:0; padding:0;">|</div></div>
1 = LOAD_REGISTER
1.counterItemSlider = 0
2 = LOAD_REGISTER
2.firstItemSliderClass = active
10 = FILES
10 {
references {
table = tt_content
uid.data = field:uid
fieldName = image
}
stdWrap.dataWrap = <div class="col-md-10" style="margin:0; padding:0;"><div id="myCarousel{cObj:parentRecordNumber}" class="carousel slide">|<div class="carousel-inner">
renderObj = COA
renderObj {
# Das Register mit der CSS-Klasse active löschen
20 = RESTORE_REGISTER
# Zähler um 1 erhöhen
25 = LOAD_REGISTER
25 {
tempN {
data = register:counterItemSlider
wrap = |+1
}
counterItemSlider.data = register:tempN
counterItemSlider.prioriCalc = 1
}
# Register um einen Eintrag erhöhen, der in der Schleife wieder gelöscht wird (Object 20)
30 = LOAD_REGISTER
30 {
temp = 1
}
}
}
14 = LOAD_REGISTER
14.counterItemSlider = 0
15 = LOAD_REGISTER
15.firstItemSliderClass = active
# Carousel items
20 = FILES
20 {
references {
table = tt_content
uid.data = field:uid
fieldName = image
}
renderObj = COA
renderObj {
10 = TEXT
10.value = <div class="item {register:firstItemSliderClass}" data-slide-number="{register:counterItemSlider}">
10.insertData = 1
# Das Register mit der CSS-Klasse active löschen
11 = RESTORE_REGISTER
# Zähler um 1 erhöhen
12 = LOAD_REGISTER
12 {
tempN {
data = register:counterItemSlider
wrap = |+1
}
counterItemSlider.data = register:tempN
counterItemSlider.prioriCalc = 1
}
# Register um einen Eintrag erhöhen, der in der Schleife wieder gelöscht wird (Object 20)
13 = LOAD_REGISTER
13 {
temp = 1
}
20 = IMAGE
20 {
file {
import.data = file:current:originalUid // file:current:uid
height = 388c
width = 900
stdWrap.typolink.ATagParams = class="prettyPhoto" rel="prettyPhoto{field:uid}"
}
}
# Das Register mit der CSS-Klasse active löschen
21 = RESTORE_REGISTER
# Zähler um 1 erhöhen
22 = LOAD_REGISTER
22.counterItemSlider = 0
22 {
tempN {
data = register:counterItemSlider
wrap = |+1
}
counterItemSlider.data = register:tempN
counterItemSlider.prioriCalc = 1
}
# Register um einen Eintrag erhöhen, der in der Schleife wieder gelöscht wird (Object 20)
23 = LOAD_REGISTER
23 {
temp = 1
}
34 = TEXT
34 {
value (
<button id="btnPause" type="button" class="btn btn-default" ><span class="glyphicon glyphicon-zoom-in" ></span></button>
)
stdWrap {
insertData = 1
typolink {
wrap = <div class="gallery clearfix" style="position:absolute; z-index:200; bottom:2px;"> |</div>
ATagParams = class="prettyPhoto" rel="prettyPhoto{cObj:parentRecordNumber}"
parameter.override.cObject = IMG_RESOURCE
parameter.override.cObject {
file {
maxH = 600
maxW = 800
import.data = TSFE:lastImageInfo|origFile
listNum.stdWrap.data=register : IMAGE_NUM_CURRENT
}
}
}
}
}
37 = TEXT
37.value = </div>
42 = RESTORE_REGISTER
}
}
40 = TEXT
40 {
value (
</div>
<!-- Carousel nav -->
<div class="carousel-caption">
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel{cObj:parentRecordNumber}" data-slide="prev">
<span class="glyphicon"></span>
</a>
<a class="right carousel-control" href="#myCarousel{cObj:parentRecordNumber}" data-slide="next">
<span class="glyphicon"></span>
</a>
<div id="carouselButtons">
<a class="left carousel-control" href="#myCarousel2{field:uid}" data-slide="prev"><img src="fileadmin/Resources/Public/Images/up.png"></a>
<a class="right carousel-control" href="#myCarousel2{field:uid}" data-slide="next"><img src="fileadmin/Resources/Public/Images/down.png"></a>
<button id="btnPlay" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-play"></span>
</button>
<button id="btnPause" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-pause"></span>
</button></div></div>
)
insertData = 1
}
41 = TEXT
41.value = </div></div>
46 = LOAD_REGISTER
46.counterItemSlider = 0
47 = LOAD_REGISTER
47.firstItemSliderClass = active
50 = FILES
50 {
references {
table = tt_content
uid.data = field:uid
fieldName = image
}
stdWrap.dataWrap = <div class="col-md-2" style=" margin:0; padding:0;"><div id="myCarousel2{field:uid}" class="carousel2 vertical slide"><div class="carousel-inner" >
renderObj = COA
renderObj {
# Das Register mit der CSS-Klasse active löschen
21 = TEXT
21 {
value = <div class="item {register:firstItemSliderClass}" id="{register:counterItemSlider}">
insertData = 1
}
22 = IMAGE
22 {
stdWrap.dataWrap = <div class="test {register:firstItemSliderClass}" id="carousel-selector-{register:counterItemSlider}">|</div>
insertData = 1
file {
import.data = uploads/pics/
import.field=image
treatIdAsReference=1
import.listNum.data = register:counterItemSlider
width = 68c +70
height = 68
}
}
23 = RESTORE_REGISTER
# Zähler um 1 erhöhen
24 = LOAD_REGISTER
24 {
tempN {
data = register:counterItemSlider
wrap = |+1
}
counterItemSlider.data = register:tempN
counterItemSlider.prioriCalc = 1
}
# Register um einen Eintrag erhöhen, der in der Schleife wieder gelöscht wird (Object 20)
25 = LOAD_REGISTER
25 {
temp = 1
}
26 = IMAGE
26 {
stdWrap.dataWrap = <div class="test {register:firstItemSliderClass}" id="carousel-selector-{register:counterItemSlider}">|</div>
insertData = 1
file {
import.data = uploads/pics/
import.field=image
treatIdAsReference=1
import.listNum.stdWrap.data = register:counterItemSlider
width = 68c +70
height = 68
}
}
27 = RESTORE_REGISTER
# Zähler um 1 erhöhen
28 = LOAD_REGISTER
28 {
tempN {
data = register:counterItemSlider
wrap = |+1
}
counterItemSlider.data = register:tempN
counterItemSlider.prioriCalc = 1
}
# Register um einen Eintrag erhöhen, der in der Schleife wieder gelöscht wird (Object 20)
29 = LOAD_REGISTER
29 {
temp = 1
}
30 = IMAGE
30 {
stdWrap.dataWrap = <div class="test {register:firstItemSliderClass}" id="carousel-selector-{register:counterItemSlider}">|</div>
insertData = 1
file {
import.data = uploads/pics/
import.field=image
treatIdAsReference=1
import.listNum.stdWrap.data = register:counterItemSlider
width = 68c +70
height = 68
}
}
31 = RESTORE_REGISTER
# Zähler um 1 erhöhen
32 = LOAD_REGISTER
32 {
tempN {
data = register:counterItemSlider
wrap = |+1
}
counterItemSlider.data = register:tempN
counterItemSlider.prioriCalc = 1
}
# Register um einen Eintrag erhöhen, der in der Schleife wieder gelöscht wird (Object 20)
33 = LOAD_REGISTER
33 {
temp = 1
}
34 = IMAGE
34 {
stdWrap.dataWrap = <div class="test {register:firstItemSliderClass}" id="carousel-selector-{register:counterItemSlider}">|</div>
insertData = 1
file {
import.data = uploads/pics/
import.field=image
treatIdAsReference=1
import.listNum.stdWrap.data = register:counterItemSlider
width = 68c +70
height = 68
}
}
35 = RESTORE_REGISTER
# Zähler um 1 erhöhen
36 = LOAD_REGISTER
36 {
tempN {
data = register:counterItemSlider
wrap = |+1
}
counterItemSlider.data = register:tempN
counterItemSlider.prioriCalc = 1
}
# Register um einen Eintrag erhöhen, der in der Schleife wieder gelöscht wird (Object 20)
37 = LOAD_REGISTER
37 {
temp = 1
}
38 = TEXT
38.value = </div>
}
55 = TEXT
55.value = </div></div></div>
}
}