Мне удалось получить карусель, чтобы при смене изображения отображалось, какое изображение вы смотрите.
если выбрано изображение № 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 ) добавить активный класс к классу тегов изображения (вместе с заголовком) текущего выбранного изображения