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
});
});
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. –
@DavidBarker können Sie Ihre js-Skript zur Verfügung stellen – mgraph
Zu Frage hinzugefügt, danke –