Für einen unserer Kunden sollten wir einen Bildbereich mit Navigation erstellen, über die man sich durch eine Bilderserie durchklicken kann. Da es ja ziemlich doof ist, extra dafür eine Extension zu nehmen und außerdem diese Extension dann ja nicht mehr im normalen „Text mit Bild“ Contentelement verfügbar ist, hatte ich mir überlegt, wie man das mittels TS lösen könnte. Dabei rausgekommen ist eine ziemlich interessante Lösung.
Lädt der User mehrere Bilder beim „Text mit Bild“ Contentelement hoch, wird per Typoscript automatisch die Navigation für die Bilder erstellt, durch die man sich dann durchklicken kann. Ein Beispiel für diese Funktion findet ihr auf der Seite http://www.schuhbeck.de/1/suedtiroler-stuben/muenchner-kindl-stube.html.
Hier wird noch das erste Bild per random ausgegeben, das kann man aber getrost weglassen.
Das Script könnte man natürlich auch entsprechend um einen netten Preloader erweitern oder andere nützliche Gimicks.
Vielleicht könnt ihr es ja irgendwann mal gebrauchen.
20 = COA 20 { stdWrap.required=1 stdWrap.wrap=<div class=”imagenavigation”>|</div> # first gallery link 20 = TEXT 20.field = image 20.listNum.splitChar=, 20.listNum=0 20.if.isTrue.field=image 20.if.isTrue.listNum=1 20.if.isTrue.listNum.splitChar=, 20.dataWrap ( <a href=”javascript:;” id=”link_{TSFE:currentRecord}” onClick=”document.getElementById(’imgbig_{TSFE:currentRecord}’).src =’uploads/pics/|’;return false;”>1</a> ) # other gallery links 30 = TEXT 30.field = image 30.split { token = , cObjNum = 1 1 = COA 1.if.isPositive.data = TSFE:register|SPLIT_COUNT 1 { 10 = TEXT 10.data = current:1 10.dataWrap = <a href=”javascript:;” onClick=”document.getElementById(’imgbig_{TSFE:currentRecord}’).src =’uploads/pics/|’;return false;”> 20 = TEXT 20.current = 1 20 { setCurrent.data = TSFE:register|SPLIT_COUNT setCurrent.wrap = |+1 prioriCalc = intval wrap = |</a> } } } } # random function for gallery images 30 = COA 30 { stdWrap.required=1 stdWrap.dataWrap( <script type=”text/javascript”> var imgArray = new Array(|); var randnum = Math.round(Math.random()*(imgArray.length-1)); document.getElementById(’imgbig_{TSFE:currentRecord}’).src =’uploads/pics/’ + imgArray[randnum]; </script> ) # first gallery link 10 = TEXT 10.field = image 10.listNum.splitChar=, 10.listNum=0 10.if.isTrue.field=image 10.if.isTrue.listNum=1 10.if.isTrue.listNum.splitChar=, 10.dataWrap = “|” # other gallery links 20 = TEXT 20.field = image 20.split { token = , cObjNum = 1 1 = COA 1.if.isPositive.data = TSFE:register|SPLIT_COUNT 1 { 10 = TEXT 10.data = current:1 10.dataWrap = ,”|” } } }
ich hab das mal erweitert, sodass auch verlinkte Bilder möglich sind. Hier das neue Script:
Hallo, uff, sowas in der Art suche ich –
wenn sich mit dem Inhaltselement bild und text bei Hover das Bild wechseln soll:
http://typo3.p133565.mittwaldserver.info/index.php?id=3
Bild links sollte sich bei Hover ändern. Habt Ihr da evtl. eine Idee?
Danke im Voraus, Susem
Sehr interessant, nur anscheinend bin ich zu doof, die Galerie zum laufen zu bekommen 🙁 oder geht es mittlerweile bei t3 4.6 nicht mehr (was ich eigentlich nicht glaube)
Kontakt
Mehr Infos unter www.marit.ag
TYPO3-Gruppe TYPO3 Enterprise Content Management System auf:
Kategorien
Kategorien
RSS News
Typo3.org
Archiv
Im Archiv