Hallo liebe Community!
Ich suche nach einer Lösung um mit Typoscript unter der TYPO3 Version 6.1 eine Bildergalerie mit Bilderwechsel auf der gleichen Seite mit Hilfe von Javascript hinzubekommen. Konkret sollen unterhalb des grossen Bildes die Thumbnails angezeigt werden. Mit einem Klick auf ein Thumbnail soll dann das grosse Bild wechseln.
Bisher habe ich es versucht mit dem TS-Snippet von Georg Ringer (http://www.rggooglemap.com/dev/fun/ts-image-swap.html) umzusetzen. Allerdings scheint das in der aktuellen TYPO3 Version nicht mehr zu funktionieren. Für eure Hinweise und Tipps bin ich sehr dankbar.
lib.imageswap = COA
lib.imageswap {
# BIG_IMAGE
1 = IMAGE
1 {
file {
maxW = 1000
maxH = 750
import= uploads/media/
import.data = levelmedia: -1,slide
import.listNum = 0
import.override.field = media
}
params = id="image_big" class="bigimg"
}
# SMALL_THUMBS
10 <.1
10 {
file {
maxW = 200
maxH = 120
}
params = onclick="swap('image_big', this)" class="smallimg"
longdescURL.cObject = IMG_RESOURCE
longdescURL.cObject.file {
import.data = TSFE:lastImageInfo|origFile
maxW = 1000
maxH = 750
}
}
20 <.10
20.file.import.listNum = 1
30 <.10
30.file.import.listNum = 2
40 <.10
40.file.import.listNum = 3
50 <.10
50.file.import.listNum = 4
# JS
100 = TEXT
100.value (
<script type="text/javascript">
<!--
function swap(imgname,image) { document.images[imgname].src = image.getAttribute('longdesc'); }
//-->
</script>
)
}
Link zur Seite?
Fehlermeldungen?
Also das grosse Bild wird geladen und die Thumbnails werden soweit auch generiert und angezeigt. Beim Klick auf ein Thumbnail wird dann allerdings das dazu passende Bild nicht mehr geladen.
Aus irgend einem Grund wird auch das longdesc-Attribut nicht befüllt. Vergleiche Code von Georg und von mir:
Georg:
<img class="smallimg" width="67" height="50" longdesc="typo3temp/pics/DSC09718_d447525c74.jpg" title="" alt="" onclick="swap('image_big', this)" src="typo3temp/pics/DSC09718_3b235192ea.jpg">
Mein Code:
<img class="smallimg" width="160" height="120" alt="" onclick="swap('image_big', this)" src="typo3temp/_processed_/csm_1-2_OG_Standard_4e84154209.jpg">
Allerdings ist die Verwendung des longdesc-Attribut mit HTML5 meines Wissens nach auch nicht mehr unterstützt...
Dies führt dann dazu, dass nach Klick auf ein Thumbnail beim laden das grossen Bildes die Source nicht stimmt:
<img id="image_big" class="bigimg" width="1000" height="750" alt="" src="null">
Vielen Dank schon jetzt für deine Unterstützung!
knutwiler schrieb
Allerdings ist die Verwendung des longdesc-Attribut mit HTML5 meines Wissens nach auch nicht mehr unterstützt...
Da gibst du dir doch schon selbst die Antwort, warum es nicht funktioniert, oder?
Du mußt halt die Source für das große Bild irgendwie anders übergeben -
du könntest beispielsweise hinter dem Thumbnail ein unsichtbares span ausgeben mit dem Pfad zum großen Bild als Inhalt, oder als ID des Thumbnails.
Wenn du dann noch den kleinen Javascript-Schnipsel entsprechend änderst, sollte es funktionieren.
Hallo!
Ich habe genau das gleiche Problem!
Diese Programmierung von Georg Ringer hat im Typo3 4.7 noch einwandfrei funktioniert!
Nach dem Update auf Typo3 6.1 funktioniert es nun nicht mehr!!!
Longdesc wird einfach nicht gezogen. Das große Startbild kommt, die kleinen Thumbnails kommen, Funktion beim Onclick funktioniert auch aber die longdesc wird nicht übergeben.
Siehe hier:
Was muss ich einstellen/umstellen/umprogrammieren?
Bitte dringend um Hilfe!!!
Liebe Grüße
Sonja