Ein Menü soll als Liste von kleinen Bildern angezeigt werden (Breite 200 Pixel). Diese werden über die Seiteneigenschaften eingebunden. Beim Mouseover über eines der Bilder soll das gleiche Bild in der Mitte in voller Größe erscheinen (Breite 800 Pixel), beim Klick darauf gelangt man auf die Seite.
Das TypoScript sieht so aus:
bildmenu = COA bildmenu.10 = HMENU bildmenu.10{ wrap = <div id="bildmenu-bildgross">|</div> 1 = GMENU 1.NO{ imgParams = border="0" altImgResource.width = 800 altImgResource.import = uploads/media/ altImgResource.import.field = media altImgResource.import.listNum = 0 ATagTitle.field = title } } bildmenu.20 = HMENU bildmenu.20{ wrap = <div id="bildmenu-bildklein"><ul>|</ul></div> 1 = GMENU 1.NO { wrap = <li>|</li> imgParams = border="0" altImgResource.width = 200 altImgResource.import = uploads/media/ altImgResource.import.field = media altImgResource.import.listNum = 0 ATagTitle.field = title } } |
Und nun das jQuery dazu:
$(document).ready(function() { $("#bildmenu-bildgross").find('a').hide().eq(0).show(); $('#bildmenu-bildklein').find('li').each(function(i){ $(this).mouseover(function(){ $("#bildmenu-bildgross").find('a').hide().eq(i).show(); }); }); }); |
Zunächst werden alle großen Bilder versteckt und nur das erste eingeblendet:
$("#bildmenu-bildgross").find('a').hide().eq(0).show();
$("#bildmenu-bildgross").find('a')
ist performater als $("#bildmenu-bildgross a")
, was natürlich auch funktionieren würde. Daran die Funktionen hide()
, eq()
und show()
per Punktverknüpfung anzuhängen ist möglich, da jQuery über das schöne Konzept des „Method Chaining“ verfügt.
eq()
selektiert das jeweilige Element, beginnend mit dem Index 0 für das erste Element, 1 für das Zweite usw.
Dann kommt each()
zum Einsatz. Each()
ist eine Art jQuery Äquivalent zu einer for-Schleife.
Eine for-Schleife funktioniert hier nämlich nicht:
var n = $("#bildmenu-bildklein").find('li').length; for(i=0;i<n;i++){ $('#bildmenu-bildklein').find('li').eq(i).mouseover(function(){ $("#bildmenu-bildgross").find('a').hide().eq(i).show(); }); } |
Ein schönes einfaches Beispiel für each() ist dieses:
$("div img").each(function(i){ this.id = this.id + "_" + i; }); |
http://www.hardcode.nl/archives_139/article_240-jquery-each-loop-example.htm
Übrigens:
Will man ein TYPO3 Bildermenü mit den Rubrikbildern der Unterseiten, in dem auch der Seitentitel angezeigt wird, so geht das z.B. so:
menueblock = HMENU menueblock.1 = TMENU menueblock.1{ wrap = <ul>|</ul> NO{ doNotLinkIt = 1 stdWrap.cObject = COA stdWrap.cObject{ 5 = IMAGE 5.file.import.field = media 5.file.import = uploads/media/ 5.file.import.listNum = 0 5.file.width = 138c 5.file.height = 63c 5.stdWrap.dataWrap = <a href="{field:alias // field:uid}.html">| 10 = TEXT 10.data = field:title 10.dataWrap = <span>|</span></a> } allWrap = <li>|</li> } } |
Hier wird übrigens „Simulate Static URLs“ verwendet, ist das nicht der Fall, muss man die Zeile 5.stdWrap.dataWrap = <a href="{field:alias // field:uid}.html">|
entsprechend anpassen. Das <span>|</span>
ist natürlich nur zum Designen da.
Schön ist auch das: 5.file.width = 138c
Damit werden die Proportionen des Bildes erhalten. Das c steht für „crop“, da das Bild entsprechend beschnitten wird. Ein Blick in die TSRef sagt mehr als tausend Worte:
http://typo3.org/documentation/document-library/references/doc_core_tsref/4.1.0/view/5/2/
Und, wenn wir schon dabei sind: so liest man die Rubrikbilder auf den Seiten aus:
rubrikbild = IMAGE rubrikbild{ file { import = uploads/media/ import.data = levelmedia:-1, slide } wrap = | } |
Hier werden die Bilder so lange an die Unterseiten weitergereicht, bis ein neues eingebunden wird. Hat man mehrere Rubrikbilder, die animiert werden sollen, empfiehlt sich ein Blick in den Blog des Interaktionsdesigners:
http://www.interaktionsdesigner.de/2009/03/03/animierte-header-mit-typo3-und-jquery/
Schöner und motivierender Beitrag. Danke