2012-04-03 3 views
2

Ich verwende einen NivoSlider in einem meiner Projekte, dieser bestimmte Client hat gefragt, dass das aktive Miniaturbild basierend auf der Folie geändert werden soll. Ich habe die Dokumentation durchgelesen und kann nichts über das Ändern des Bildes selbst herausfinden, daher denke ich, dass es am besten ist, das Bild selbst mit einer Jquery-Funktion zu ändern. Trotzdem bleibe ich dran, wie ich das erreichen kann.Ändern <img> src Attribut, wenn Container <a> Klassenänderungen

Die NivoSlider erstellt HTML:

<div class="nivo-controlNav"> 
    // Active Thumbnail Link 
    <a class="nivo-control active" rel="0"> 
     <img alt="" src="images/inactive_wedge.png"> 
    </a> 
    // Inactive Thumbnail Link 
    <a class="nivo-control" rel="1"> 
     <img alt="" src="images/inactive_wedge.png"> 
    </a> 
</div> 

Das Plugin fügt eine Klasse von active zum <a> für die Bild Folie, die zeigt,.

Ich versuche, die enthält <img> Quellattribut ändern anzuzeigen ‚active_wedge.png‘, wenn die active Klasse den <a> Tag angewandt wird.

Wie würde ich das mit Jquery erreichen? (! In Zeiten wie diese, die ich erkennen, wie wenig ich weiß)

Ich habe in dieser Richtung etwas versucht:

if ($('.nivo-control').hasClass('active')) { 
    // Not really sure what to put here at all 
} 

Ist das richtig, oder bin ich das schlecht anbietet?

Vielen Dank im Voraus.

Zusätzliche JS:

$(window).load(function() { 
    $('#theslides').nivoSlider({ 
     effect: 'fade', // Specify sets like: 'fold,fade,sliceDown' 
     animSpeed: 500, // Slide transition speed 
     pauseTime: 3500, // How long each slide will show 
     startSlide: 0, // Set starting Slide (0 index) 
     directionNav: false, // Next & Prev navigation 
     directionNavHide: true, // Only show on hover 
     controlNav: true, // 1,2,3... navigation 
     controlNavThumbs: true, // Use thumbnails for Control Nav 
     controlNavThumbsFromRel: true, // Use image rel for thumbs 
     keyboardNav: false, // Use left & right arrows 
     pauseOnHover: true, // Stop animation while hovering 
     beforeChange: function(){}, // Triggers before a slide transition 
     afterChange: function(){ 
      // Putting code to change the thumbnail image in here 
      if ($('.nivo-control').hasClass('active')) { 
       $('.nivo-control .active img').attr('src','images/active_wedge.png'); 
      } 
     }, // Triggers after a slide transition 
     slideshowEnd: function(){}, // Triggers after all slides have been shown 
     lastSlide: function(){}, // Triggers when last slide is shown 
     afterLoad: function(){} // Triggers when slider has loaded 
    }); 
}); 

Antwort

2

ohne wenn hasclass mit nur:

$('.nivo-control.active img').attr('src','images/active_wedge.png') 
+0

ich um mit diesem gespielt haben und kann nicht scheinen, um es überhaupt funktioniert, i‘ Habe es innerhalb einer Event-Funktion aus dem Plugin (bei Folienwechsel) und als separates .change-Event probiert. Aber keine Veränderung. –

+0

@DavidBarker können Sie Ihre js-Skript zur Verfügung stellen – mgraph

+0

Zu Frage hinzugefügt, danke –

1
if ($('.nivo-control').hasClass('active')) { 
    $(this).find('img').attr('src','yourSOURCE') 
}