Change menu color when background image changes

Question

The front page has a background slideshow running. The problem is that the menu isn't visible when the background is dark because the menu itself has dark font color. When the background changes the menu color should change as well.

I'm using Vegas Background jQuery plugin ( http://vegas.jaysalvat.com/ ) and I want to be able to (manually) decide a menu color for every slide.

Eg if the background is black the menu should be white, and when the background changes to a light slide the menu should go black.

This code snippet is triggered on slide change:

$('body').bind('vegaswalk',
  function(e, bg, step) {
    alert( 'N°' +step+ ' is now displayed' );
  }
);

This is what I want to do when 'vegaswalk' is triggered:

slide 1 = black
slide 2 = white
if change to slide 1 => change menu to white
if change to slide 2 => change menu to black

Link to the site

EDIT

Combining the script at a php if statement. The script:

<script>
$.vegas('slideshow', { delay: 4000,
    backgrounds: [
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-vardagsrum.jpg', fade: 1000 },
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-verkstad.jpg', fade: 1000 },
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-urbild.jpg', fade: 1000 },
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-kuggar.jpg', fade: 1000 },
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-fiber.jpg', fade: 1000 },
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-bord.jpg', fade: 1000 },
    ],
    walk: function(step) {
        //alert('N°' + step + ' is now displayed');

        // get a handle on the sidebar
        var $sidebar = $('div.sidebar');

        // change it's class according to the slide we are on
        switch (step) {
        case 0: goGray($sidebar); break;
    case 1: goWhite($sidebar); break;
        case 2: goGray($sidebar); break;
        case 3: goGray($sidebar); break;
        case 4: goGray($sidebar); break;
        case 5: goGray($sidebar); break;
        case 6: goWhite($sidebar); break;
        default: goWhite($sidebar); break;
        }
    }
})('overlay');

function goGray($sidebar){
    $sidebar.removeClass('white').addClass('gray');
}

function goWhite($sidebar){
    $sidebar.removeClass('gray').addClass('white');
}


</script>

Every case needs to go through a php if statement to check if it should go gray. Something like this? How do you combine php and jquery in this case?

case 0: <?php if( go gray is chosen ) {
echo "goGray($sidebar);";
}
else{
    echo "goWhite($sidebar);";
} break; 

Answer 1

You were on the right track trying to use the walk function, try it like this:

$.vegas('slideshow', { delay: 4000,
    backgrounds: [
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-vardagsrum.jpg', fade: 1000 },
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-verkstad.jpg', fade: 1000 },
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-urbild.jpg', fade: 1000 },
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-kuggar.jpg', fade: 1000 },
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-fiber.jpg', fade: 1000 },
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-bord.jpg', fade: 1000 },
    ],
    walk: function(step) {
        //alert('N°' + step + ' is now displayed');

        // get a handle on the sidebar
        var $sidebar = $('div.sidebar');

        // change it's class according to the slide we are on
        switch (step) {
            case 1:
            case 2:
                $sidebar.removeClass('white').addClass('gray');
            break;
            default:
                $sidebar.removeClass('gray').addClass('white');
            break;
        }
    }
})('overlay');

You'll need to change the switch case statement accordingly (as well as the sidebar and add/remove classes), but hopefully you get the gist of what I'm trying to show you.

EDIT

$.vegas('slideshow', { delay: 4000,
    backgrounds: [
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-vardagsrum.jpg', fade: 1000 },
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-verkstad.jpg', fade: 1000 },
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-urbild.jpg', fade: 1000 },
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-kuggar.jpg', fade: 1000 },
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-fiber.jpg', fade: 1000 },
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-bord.jpg', fade: 1000 },
    ],
    walk: function(step) {
        //alert('N°' + step + ' is now displayed');

        // get a handle on the sidebar
        var $sidebar = $('div.sidebar');

        // change it's class according to the slide we are on
        switch (step) {
            case 1:
            case 2:
                goGray($sidebar);
            break;
            default:
                goWhite($sidebar);
            break;
        }
    }
})('overlay');

function goGray($sidebar){
    $sidebar.removeClass('white').addClass('gray');
}

function goWhite($sidebar){
    $sidebar.removeClass('gray').addClass('white');
}

Answer 2

This became the solution:

<script>
$.vegas('slideshow', { delay: 4000,
    backgrounds: [
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-vardagsrum.jpg', fade: 1000 },
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-verkstad.jpg', fade: 1000 },
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-urbild.jpg', fade: 1000 },
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-kuggar.jpg', fade: 1000 },
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-fiber.jpg', fade: 1000 },
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-bord.jpg', fade: 1000 },
    ],
    walk: function(step) {
        //alert('N°' + step + ' is now displayed');

        // get a handle on the sidebar
        var $sidebar = $('div.sidebar');

        // change it's class according to the slide we are on
        switch (step) {
        case 0: <?php if( get_field('bild1_gogray', $original_id) ){echo 'goGray($sidebar);' ;}else{echo 'goWhite($sidebar);' ;} ?> break;
    case 1: <?php if( get_field('bild2_gogray', $original_id) ){echo 'goGray($sidebar);' ;}else{echo 'goWhite($sidebar);' ;} ?> break;
        case 2: <?php if( get_field('bild3_gogray', $original_id) ){echo 'goGray($sidebar);' ;}else{echo 'goWhite($sidebar);' ;} ?> break;
        case 3: <?php if( get_field('bild4_gogray', $original_id) ){echo 'goGray($sidebar);' ;}else{echo 'goWhite($sidebar);' ;} ?> break;
        case 4: <?php if( get_field('bild5_gogray', $original_id) ){echo 'goGray($sidebar);' ;}else{echo 'goWhite($sidebar);' ;} ?> break;
        case 5: <?php if( get_field('bild6_gogray', $original_id) ){echo 'goGray($sidebar);' ;}else{echo 'goWhite($sidebar);' ;} ?> break;
        default: goWhite($sidebar); break;
        }
    }
})('overlay');

function goGray($sidebar){
    $sidebar.removeClass('white').addClass('gray');
}

function goWhite($sidebar){
    $sidebar.removeClass('gray').addClass('white');
}
</script>