當背景圖像改變時改變菜單顏色

Question

首頁有一個背景幻燈片正在運行。 問題是當背景較暗時菜單不可見，因為菜單本身具有深色字體顏色。 當背景改變時，菜單顏色也應該改變。

我正在使用Vegas Background jQuery插件（ http://vegas.jaysalvat.com/ ），我希望能夠（手動）確定每張幻燈片的菜單顏色。

例如，如果背景為黑色，則菜單應為白色，當背景變為淺色滑動時，菜單應為黑色。

幻燈片更改時會觸發此代碼段：

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

當觸發'vegaswalk'時，這就是我想要做的事情：

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

鏈接到該網站

編輯

在php if語句中組合腳本。 劇本：

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

每個案例都需要通過php if語句來檢查它是否應該變為灰色。 像這樣的東西？ 在這種情況下你如何結合php和jquery？

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

Answer 1

您正在嘗試使用walk函數的正確軌道，嘗試這樣：

$.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');

您需要相應地更改switch case語句（以及側欄和添加/刪除類），但希望您能夠了解我想要向您展示的內容。

編輯

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

這成了解決方案：

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