Question

I have managed to get a carousel so that when the image is changed it will display what number image you are looking at.

if it is image number 3 that is chosen, 3 list rows down is the current images’ code. Am i able to get this is automatically add a class to the image tag imbedded within the list? Below is my code with the itemvisiblein function basically printing out to a certain div.

How am i able clear all classes of the active name and then take that number and add the class to the image tag of that certain line? (same class as caption is currently in) (so if image 3 is selected then add “active” to the image tag imbedded within that code 3 list lines down.

Cheers,

<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>

So in short

1) get which line is being used for that image (list line)
2) clear all previous active classes
3) add class active to image tag class (along with caption) of the currently selected image

Answer 1

$("img.caption").eq(index).addClass("extraClass");