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);
Lesezeichen