Bildwechsel (jQuery) so umbauen, dass er mehrfach auf der Seite möglich ist?

Ich habe ein simples JavaScript (für jQuery) im Einsatz, das bewirkt, dass beim Hovern über kleine Bilder das jeweils aktuelle Thumbnail daneben an der Stelle eines großen Bildes angezeigt wird (von dieser Anleitung)

[#bild-gross] [Thumbnail #bild-1] [Thumbnail #bild-2] [Thumbnail #bild-3]

Code:

---

jQuery.noConflict();
jQuery(document).ready(function(){
  jQuery("#bild-1 img").hover(function (){
      var mytemp = jQuery("#bild-1 img").attr("src");
      jQuery("#bild-gross img").attr("src", mytemp );
    });
    jQuery("#bild-2 img").hover(function (){
      var mytemp = jQuery("#bild-2 img").attr("src");
      jQuery("#bild-gross img").attr("src", mytemp );
    });
    jQuery("#bild-3 img").hover(function (){
      var mytemp = jQuery("#bild-3 img").attr("src");
      jQuery("#bild-gross img").attr("src", mytemp );
    });
 });

---

Soweit so gut, funktioniert einwandfrei solange nur eine dieser Bildabfolgen auf der Seite ist. Derzeit legt der Redakteur einfach 4 mal das Inhaltselement Bild an und verpasst denen nacheinander die entsprechenden IDs.

Es soll aber auch möglich sein, dass mehrere solcher Reihen pro Seite auftauchen, die sich dann nicht gegenseitig beeinflussen. Also z.B. ganz weit oben im Text die erste dieser Reihen und dann am Ende nochmal.

Hat jemand eine Idee, wie ich den Code entsprechend abfangen kann? Meine Idee ist, dass ich von IDs auf Klassen umstelle und dann jeweils die Gesamtreihe mit einem DIV .bildreihe umschließe. Kann mir jemand sagen, wie der Code aussehen müsste, dass der Bildwechsel dann immer nur im Rahmen dieses DIVs stattfindet und nicht auf andere Reihen übergreift?

Versuche es mal damit. Die Bildwechsel müssen dann in einen eigenen Artikel mit der Klasse bildwechsel.
Der Rest ist auch auf CSS-Klassen umgebaut. Ungetestet.

Code:

---

(function(jQuery){

jQuery(document).ready(function(){

  jQuery(".bildwechsel").each(function(){

      jQuery(".bild-1 img", this).hover(function (){
        var mytemp = jQuery(".bild-1 img", this).attr("src");
        jQuery(".bild-gross img", this).attr("src", mytemp );
      });
      jQuery(".bild-2 img", this).hover(function (){
        var mytemp = jQuery(".bild-2 img", this).attr("src");
        jQuery(".bild-gross img", this).attr("src", mytemp );
      });
      jQuery(".bild-3 img", this).hover(function (){
        var mytemp = jQuery(".bild-3 img", this).attr("src");
        jQuery(".bild-gross img", this).attr("src", mytemp );
      });

    })

 })(jQuery);

---

Leider klappt es noch nicht. Beim Hovern passiert erstmal nix. Ich habe momentan folgenden Aufbau:

files/theme/js/bildwechsel.js mit dem nachfolgende Inhalt.
Das JS wird mit <script src="files/theme/js/bildwechsel.js"></script> im Footer eingebunden:

Code:

---

(function(jQuery){

jQuery(document).ready(function(){

  jQuery(".bildwechsel").each(function(){

      jQuery(".bild-1 img", this).hover(function (){
        var mytemp = jQuery(".bild-1 img", this).attr("src");
        jQuery(".bild-gross img", this).attr("src", mytemp );
      });
      jQuery(".bild-2 img", this).hover(function (){
        var mytemp = jQuery(".bild-2 img", this).attr("src");
        jQuery(".bild-gross img", this).attr("src", mytemp );
      });
      jQuery(".bild-3 img", this).hover(function (){
        var mytemp = jQuery(".bild-3 img", this).attr("src");
        jQuery(".bild-gross img", this).attr("src", mytemp );
      });

    })

 })(jQuery);

---

HTML-Code mit diesem Inhalt (4 Bild-Inhaltselemente mit den entsprechenden Klassen + außen herum mal auf die schnelle HTML-Inhaltselemente um das Außen-Div anzubringen):

HTML-Code:

---

<!-- Anfang des Bildwechsels --><div class="bildwechsel">
<div class="ce_image grid9 bild-gross block">

<figure class="image_container" style="padding-bottom:20px;">
<img src="files/images/wir/team/team1.jpg" width="408" height="272" alt="">
</figure>

</div>

<div class="ce_image grid3 bild-1 block">

<figure class="image_container" style="padding-bottom:20px;">
<img src="files/images/wir/team/team1.jpg" width="408" height="272" alt="Team 1">
</figure>

</div>

<div class="ce_image grid3 bild-2 block">

<figure class="image_container" style="padding-bottom:20px;">
<img src="files/images/wir/team/team2.jpg" width="408" height="272" alt="Team 2">
</figure>

</div>

<div class="ce_image grid3 bild-3 block">

<figure class="image_container" style="padding-bottom:20px;">
<img src="files/images/wir/team/team3.jpg" width="408" height="272" alt="Team 3">
</figure>

</div>

</div> <!-- Ende des Bildwechsels -->

---

Als Fehlermeldung zeigt mir der Browser:

HTML-Code:

---

Fehler: SyntaxError: missing } after function body
Quelldatei: http://www.musterdomain.de/files/theme/js/bildwechsel.js
Zeile: 22, Spalte: 11
Quelltext:
})(jQuery);

---

Das hier läuft. Da wir hier eh mit Klassen arbeiten, brauchst du jetzt nur noch bild-gross und bild eingeben (nicht mehr bild-1, bild-2, ...).
Habe das Script jetzt getestet. Es läuft.

Code:

---

<script type="text/javascript">

(function(jQuery){

    jQuery(document).ready(function(){

      jQuery(".bildwechsel").each(function(){

        var bildgross = jQuery(".bild-gross img", this).first();
        jQuery(".bild img", this).each(function(){
            jQuery(this).hover(function(){
                  var mytemp = jQuery(this).first().attr("src");
                  bildgross.attr("src", mytemp);
              });
        })

      });

    });

})(jQuery);
</script>

---

Super, funktioniert perfekt :)