Klickbare Bildergallerie mit TS

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 = ,”|”
    }
  }
}
Veröffentlicht unter Allgemein, TYPO3 Technik
3 Kommentare auf “Klickbare Bildergallerie mit TS
  1. Marco sagt:

    ich hab das mal erweitert, sodass auch verlinkte Bilder möglich sind. Hier das neue Script:

    lib.teaser = COA
    lib.teaser.10 =CONTENT
    lib.teaser.10 < styles.content.getBorder
    lib.teaser.10 {
      slide = -1
    	table=tt_content
      select{
    	  begin = 0
       	max = 1
       	#language
       	languageField=sys_language_uid
       	#from wich column
    	  where=colPos=3
      }
      wrap=
    | renderObj=COA #image with gallery function renderObj.10 = COA renderObj.10 { stdWrap.required=1 # get image 10 = IMAGE 10 { #if not empty required=1 file.import=uploads/pics/ file.import.field=image #file.width=266 #file.height=180 file.import.listNum = 0 stdWrap.insertData=1 params = id="imgbig_{TSFE:currentRecord}" imageLinkWrap < tt_content.image.20.1.imageLinkWrap imageLinkWrap.typolink.ATagParams = id="link_imgbig_{TSFE:currentRecord}" imageLinkWrap.typolink.ATagParams.stdWrap.insertData=1 } # standard image configuration from tt_content 10.altText < tt_content.image.20.1.altText 10.titleText < tt_content.image.20.1.titleText 10.longdescURL < tt_content.image.20.1.longdescURL # random function for gallery images 30 = COA 30 { stdWrap.required=1 stdWrap.dataWrap( ) # first gallery link 10 = TEXT 10.field = image_link 10.listNum.splitChar=, 10.listNum=0 10.if.isTrue.field=image 10.if.isTrue.listNum=1 10.if.isTrue.listNum.splitChar=, 10.dataWrap = "|" 10.typolink.parameter.field = image_link 10.typolink.returnLast = url # other gallery links 20 = TEXT 20.field = image_link 20.split { token = , cObjNum = 1 1 = COA 1.if.isPositive.data = TSFE:register|SPLIT_COUNT 1 { 10 = TEXT 10.data = current:1 10.dataWrap = ,"|" 10.typolink.parameter.data = current:1 10.typolink.returnLast = url } } } } }
  2. Susem sagt:

    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

  3. Norbert sagt:

    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)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

*