Bilder tauschen

[blabla333]

Ich möchte in einer Galerie bei Klick auf ein Bild die Bilder tauschen.
Meine Galerie ist so aufgebaut:

<div class="galerie">
   <div class="hauptbild"><img src="hbild.jpg" class="grosses_bild"></div>
   <div class="kleine_bilder">
      <img src="bild1.jpg" class="kleines_bild">
      <img src="bild2.jpg" class="kleines_bild">
   </div>
</div>

Jetzt sollte es so sein, dass bei Klick auf ein Bild der Klasse "kleines_bild" dieses eben mit dem hbild.jpg getauscht wird (kleines Bild wird zu Hauptbild und umgekehrt). Das sollte natürlich wiederholbar sein.

$(".kleines_bild").click(function() {
    var klein = $(this).attr("src");
    var gross= $(this).parents(".grosses_bild").attr("src");
    $(this).parents(".grosses_bild").attr("src", klein);
    $(this).attr("src", gross);
});

 

[Tronjer]

Und was funktioniert jetzt nicht? Außer, dass der Selektor nicht mit dem HTML übereinstimmt.

 

[blabla333]

Was stimmt nicht überein?

 

[Tronjer]

Nm, habe mich von kleines_bild und kleine_bilder irritieren lassen. Ist halt noch früh am Morgen.

Also was ist das Problem, der abwechselnde Tausch von klein zu groß?

 

[Tronjer]

//edit: kleines_bild zu grosses_bild ist oben -> links -> unten. Also entweder closest().prev().find() chainen oder mit direkten Selektoren ansprechen.