私のプロジェクトで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
});
});
私はこれで周りにプレイしたとi「を、それがすべてで働くように見えることはできませんプラグインのイベント関数(スライド変更時)と別の.changeイベントとして試しました。しかし、変化はありません。 –
@DavidBarkerあなたのjsスクリプトを提供することができます – mgraph
質問に追加されました –