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

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