[Resolvido] Mudar o background-color junto com SliderFotos em jqu

[an@m 0]

Olá bom dia,

 

Gostaria de uma opinião de vcs como fazer a seguinte animação....

 

Estou montando um hotsite, onde temos um slideshow de fotos e o restante do site o html normal com texto e tal... só que com fundos de cores diferentes.

 

Assim que cada foto que aparece no slide muda todo a cor do site... sei q tem n maneiras para fazer q andei pesquisando na Internet, mas queria um Help de como começar... se alguém já fez e pode passar um exemplo...

 

bom é isso..obrigada!!

[Bru_ce 53]

Poste o script que faz a troca de imagens.

[an@m 0]

Por enquanto fiz assim o script, mto simples. Usando Jquery Cycle

 

HTML

 

<div class="slider" id="fotos">
    <img src="_img/slide.png" height="448" width="630"/>
    <img src="_img/slide.png" height="448" width="630"/>
    <img src="_img/slide.png" height="448" width="630"/>
</div>

 

JAVASCRIPT

 

$('#fotos') 
.cycle({ 
   fx:     'fade', 
   speed:  1000, 
   timeout: 5000, 
   pager:  '#nav' 
});

[Bru_ce 53]

$(function(){
$('#fotos') 
.cycle({ 
   fx:     'fade', 
   speed:  1000, 
   timeout: 5000, 
   pager:  '#nav' 
},function(){
         // aqui você coloca o que quer fazer logo fotos.
         alert('Teste');
});
});

 

Veja se resolve seu problema

[an@m 0]

Assim Bru, a dificuldade é o seguinte....

 

Como vou alinhar as fotos que aparece no cycle, mudando o fundo do site.

 

Por exemplo...

 

Quando aparecer no slide a foto 1 a div tal tem a cor preta

Quando aparecer no slide a foto 2 a div tal tem a cor laranja...

 

e por ai vaiii....

 

:(!!

[Bru_ce 53]

Faz assim então,

verifica de qtos em qtos segundos o cycle ta agindo,

e faz outro cycle porém para o body com as mesmas características, assim eles irão funcionar JUNTOS!

[an@m 0]

Faz assim então,

verifica de qtos em qtos segundos o cycle ta agindo,

e faz outro cycle porém para o body com as mesmas características, assim eles irão funcionar JUNTOS!

 

 

Fiz da maneira que você comentou e está dando certo... só a única dificuldade eh alinhar o CSS

tenho q colocar uma position:absolut para q o conteúdo fique em cima do bkg... mais ou menos por ai neh?!

 

Mto Obrigada!!

[Bru_ce 53]

Acho que não vai precisar não, pois o BG do body sempre vai ficar em baixo.

você não precisar criar outra DIV para isso.

 

Não sei como você fez ai, ou também tenta utilizar o z-index no CSS assim:

#suaDiv {
z-index:-9999;
}

 

Não costumo utilizar ele, mais acho que vai funcionar !

[an@m 0]

Acho que não vai precisar não, pois o BG do body sempre vai ficar em baixo.

você não precisar criar outra DIV para isso.

 

Não sei como você fez ai, ou também tenta utilizar o z-index no CSS assim:

#suaDiv {
z-index:-9999;
}

 

Não costumo utilizar ele, mais acho que vai funcionar !

 

 

Para te falar a verdade eu não fiz a animação no BODY...

Coloquei dentro de uma DIV .CONTENT

 

HTML

 

<div class="content">

<img src="_img/bkg-home-vermelho.png" class="bgM"/>

<img src="_img/bkg-home-laranja.png" class="bgM"/>

<img src="_img/bkg-home-rosa.png" class="bgM"/>

<img src="_img/bkg-home-roxo.png" class="bgM"/>

</div><!-- div content -->

 

CSS

 

.content,img.bgM {
	border:1px solid red;
       min-height: 820px;
       min-width: 1070px;
       width: 1070px;
       height: 820px;
       position:fixed;
       top: 0;
       left: 0;
       z-index:-9999;
}

 

e ai coloquei todo o conteúdo dentro de uma outra div .WRAP

e essa div estou tentando alinhar o conteudo na div .CONTENT

 

=D!

[Bru_ce 53]

entendi, então usa as POSITIONS do CSS e veja se resolve.

[an@m 0]

entendi, então usa as POSITIONS do CSS e veja se resolve.

 

Quero te agradecer pela ajuda!! Deu tudo certo!!

 

Mto obrigada!!