TYPO3 Bildermenue mit jQuery for-Schleife, each() und eq()

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&lt;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/

Ein Gedanke zu „TYPO3 Bildermenue mit jQuery for-Schleife, each() und eq()

Kommentare sind geschlossen.