0
画像が変更されると、あなたが見ている画像の番号が表示されるようにカルーセルを取得できました。Jquery - アクティブなカルーセル画像の画像タグにクラスを追加する
画像番号3が選択されている場合、3リスト行が現在の画像のコードです。私はこれを得ることができるのですが、リスト内に埋め込まれた画像タグにクラスを自動的に追加しますか?以下は、基本的にitemvisiblein関数を使って特定のdivに出力するコードです。
どのようにアクティブな名前のすべてのクラスをクリアしてから、その番号を取得してそのクラスのイメージタグにクラスを追加できますか?画像3を選択した場合(それではダウンそのコード3リスト線内に埋め込まイメージタグに「アクティブ」を追加(字幕と同じクラスは現在ある)。
乾杯、
<script type="text/javascript">
function itemVisibleIn(carousel, state){
$("#gallerydescription").html(carousel.first); //currently displays image number//
};
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
easing: 'backout',
animation: 1000,
vertical: true,
scroll: 1,
itemVisibleInCallback: itemVisibleIn,
});
});
<ul id="mycarousel" class="jcarousel jcarousel-skin-tango">
<li><a href="images/gallery/placeholder1.png" rel="shadowbox" title="This is the description"><img class="caption" src="images/gallery/placeholder1.png" width="750" height="450" title="test Title1" alt="This is the title" /></a></li>
<li><a href="images/gallery/placeholder1.png" rel="shadowbox" title="This is the description"><img class="caption" src="images/gallery/placeholder1.png" width="750" height="450" title="test Title1" alt="This is the title" /></a></li>
<li><a href="images/gallery/placeholder1.png" rel="shadowbox" title="This is the description"><img class="caption" src="images/gallery/placeholder1.png" width="750" height="450" title="test Title1" alt="This is the title" /></a></li>
だから要するに
)行取得された画像(リストライン) )以前のすべてのアクティブなクラス クリア)画像tにアクティブクラスを追加するために使用されています現在選択されている画像のクラス(キャプションと共に)