私はカルーセルを取得して、画像が変更されたときに、見ている画像の数が表示されるようにしました。
選択されたのが画像番号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>
つまり、要するに
1)その画像に使用されている行を取得します(リスト行) 2)以前のアクティブなクラスをすべてクリアします 3)現在選択されている画像の画像タグクラス(キャプションとともに)にアクティブなクラスを追加します