首页有一个背景幻灯片正在运行。问题是当背景较暗时菜单不可见,因为菜单本身具有深色字体颜色。当背景改变时,菜单颜色也应该改变。
我正在使用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;
答案 0 :(得分:2)
你在试图使用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');
}
答案 1 :(得分:0)
这成了解决方案:
<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>