Toggle css class on image with Supersized API/Variables

Question

I'm using the Supersized jQuery plugin to animate my background, and I've used their API to have the slides change when an image/link is clicked (I used:

$('.navone').click(function(){
api.goTo(1);
});

Now I need the active image/link to have a background image when it's slide is active, so far I have this:

jQuery(function($){
if(vars.current_slide = 1){
$('.navone').toggleClass('active');
});
});

This doesn't appear to do anything, I'm still fairly new to javascript and jQuery, any advice would be great.

EDIT:

I've put

if (vars.current_slide == 1){
(‘#navone’).addClass(‘.active’);
} else {
(‘#navone’).removeClass(‘.active’);
}

In the afterAnimation : function(){ section of supersized.shutter.js but it doesn't seem to be doing anything at all. Any advice?

Answer 1

$(document).ready(function(){ //waits until the document is ready
    $('.navone').click(function(){ //bind a function to the element with class navone
        $('.active').removeClass('active'); //remove all active class
        $(this).addClass('active'); //add class active to the navone link
        api.goTo(1); //make the supersized go to the the slide 1
    });
});

I not 100% sure about the .goto function from this api, but if it works on the first line it will work now. :)

supersized seems to create an automatic navigation, but you don't have to apoint it in the function, try using this, and checks if it works, then you can restylize the divs:

<div id="controls-wrapper" class="load-item">
    <div id="controls">
        <ul id="slide-list"></ul>
    </div>
</div>

Answer 2

Changed the statement to a "switch" statement and added the class to initially start on the actual link.

afterAnimation : function(){
        $('#navone,#navtwo,#navthree,#navfour,#navfive,#navsix,#navseven').removeClass('active');
        switch(vars.current_slide) {
            case 0 : $('#navone').addClass('active'); break;
            case 1 : $('#navtwo').addClass('active'); break;
            case 2 : $('#navthree').addClass('active'); break;
            case 3 : $('#navfour').addClass('active'); break;
            case 4 : $('#navfive').addClass('active'); break;
            case 5 : $('#navsix').addClass('active'); break;
            case 6 : $('#navseven').addClass('active'); break;
        }
}