2012-04-03 5 views
2

私のプロジェクトでNivoSliderを使用していますが、この特定のクライアントは表示されているスライドに基づいてアクティブなサムネイル画像を変更するよう求めました。私はドキュメントを見て、画像自体を変更することについて何も見つけることができないので、最良の選択肢は、Jquery関数で画像自体を変更することだと思います。それにもかかわらず、私はこれを達成する方法に立ち往生しています。変更<img>コンテナ<a>クラスが変更されたときのsrc属性

NivoSliderはこの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> 

プラグインが表示された画像のスライドの<a>activeのクラスを追加します。

私はactiveクラスが<a>タグに適用されたときに「active_wedge.png」を表示するように含む<img>ソース属性を変更しようとしています。

これをJqueryでどうすれば達成できますか? (私が知っている方法を少し実感このようなことの回は!)

私はこれらの線に沿って何かをしようとしました:

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

は、この正しいですか、私はこのひどい近づいていますか?

ありがとうございます。

追加JS:hasclass場合だけ使用せずに

$(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 
    }); 
}); 

答えて

2

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

私はこれで周りにプレイしたとi「を、それがすべてで働くように見えることはできませんプラグインのイベント関数(スライド変更時)と別の.changeイベントとして試しました。しかし、変化はありません。 –

+0

@DavidBarkerあなたのjsスクリプトを提供することができます – mgraph

+0

質問に追加されました –

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