Banners alternando

[Jose Antonio Motta Junior 0]

Bom Dia a todos.

Antes de mais nada gostaria de parabenizar o Fórum e aos usuários do mesmo pois já encontrei várias dicas interessantes por aqui.

É a primeira vez que posto aqui e espero conseguir sanar minha dúvida.

Vamos lá:

Estou fazendo um site/blog pelo wordpress. Nunca tinha usado e estou achando uma ferramenta muito interessante. O meu problema é que não tenho muita experiência com Javascript e estou encontrando uma certa dificuldade.

Estou usando uma função onde troque 3 imagens em um banner em x tempo. Ela está funcionando perfeitamente para meu banner no cabeçalho. Mas quando eu crio uma nova rotina para fazer a mesma coisa em 1 banner no meu rodapé, ela simplesmente não funciona. Já fiz alguns testes... repeti o mesmo banner no rodapé e não funcionou... tirei o banner do cabeçalho e coloquei no rodapé ai funcionou... ou seja, estou fazendo algo errado que está impossibilitando de usar novamente o processo.

Estou usando dessa forma no head:

 

<?php if (is_category('cinema')) { ?>
<!-- Resultado da categoria cinema! -->
<!-- Codigo das imagens -->
<script type="text/javascript"> 
<!-- 
var x=0; 
var imagem=new Array(); 
imagem[0]="http://www.agendaculturalbrasilia.com.br/wp-content/uploads/2013/04/Teste-Banner-Top1.jpg"; 
imagem[1]="http://www.agendaculturalbrasilia.com.br/wp-content/uploads/2013/04/Teste-Banner-Top3.jpg"; 
imagem[2]="http://www.agendaculturalbrasilia.com.br/wp-content/uploads/2013/04/Cinema-teste-2-314x200.jpg"; // e assim por diante, conforme o n.º de imagens

var site=new Array(); 
site[0]="http://www.agendaculturalbrasilia.com.br/?page_id=11"; 
site[1]="http://www.agendaculturalbrasilia.com.br/?page_id=11"; 
site[2]="http://www.agendaculturalbrasilia.com.br/category/cinema/"; // e assim por diante, conforme o n.º de sites 

function mudar_banner(){ 
document.getElementById("banner").src=imagem[x]; 
document.getElementById('link').href=site[x]; 
x++; 
if (x==3){ // aqui compara x com a quantidade total de imagens que tem 
x=0; 
} 
} 
setInterval('mudar_banner()',5000); 
//--> 
</script>


<?php } elseif (is_category('danca')) { ?>
<!--Resultado da categoria danca-->
<!-- Codigo das imagens -->
<script type="text/javascript"> 
<!-- 
var x=0; 
var imagem=new Array(); 
imagem[0]="http://www.agendaculturalbrasilia.com.br/wp-content/uploads/2013/04/Teste-Banner-Top1.jpg"; 
imagem[1]="http://www.agendaculturalbrasilia.com.br/wp-content/uploads/2013/04/Teste-Banner-Top3.jpg"; 
imagem[2]="http://www.agendaculturalbrasilia.com.br/wp-content/uploads/2013/04/Image00006.jpg"; // e assim por diante, conforme o n.º de imagens

var site=new Array(); 
site[0]="http://www.agendaculturalbrasilia.com.br/?page_id=11"; 
site[1]="http://www.agendaculturalbrasilia.com.br/?page_id=11";
site[2]="http://www.agendaculturalbrasilia.com.br/category/danca/"; // e assim por diante, conforme o n.º de sites 

function mudar_banner(){ 
document.getElementById("banner").src=imagem[x]; 
document.getElementById('link').href=site[x]; 
x++; 
if (x==3){ // aqui compara x com a quantidade total de imagens que tem 
x=0; 
} 
} 
setInterval('mudar_banner()',5000); 
//--> 
</script>
<?php } else { ?>
<!-- Esta condicional apresenta o resultado genérico que não se encaixa nos dois primeiros! -->
<!-- Codigo das imagens -->
<script type="text/javascript"> 
<!-- 
var x=0; 
var imagem=new Array(); 
imagem[0]="http://www.agendaculturalbrasilia.com.br/wp-content/uploads/2013/04/Teste-Banner-Top1.jpg"; 
imagem[1]="http://www.agendaculturalbrasilia.com.br/wp-content/uploads/2013/04/Teste-Banner-Top3.jpg"; 
imagem[2]="http://www.agendaculturalbrasilia.com.br/wp-content/uploads/2013/04/top.gif"; // e assim por diante, conforme o n.º de imagens

var site=new Array(); 
site[0]="http://www.agendaculturalbrasilia.com.br/?page_id=11"; 
site[1]="http://www.agendaculturalbrasilia.com.br/?page_id=11"; 
site[2]="http://www.a1musica.com.br"; // e assim por diante, conforme o n.º de sites 

function mudar_banner(){ 
document.getElementById("banner").src=imagem[x]; 
document.getElementById('link').href=site[x]; 
x++; 
if (x==3){ // aqui compara x com a quantidade total de imagens que tem 
x=0; 
} 
} 
setInterval('mudar_banner()',5000); 
//--> 
</script>
<?php } ?>

 

 

 

e chamando assim no Body:

<a href="http://www.agendaculturalbrasilia.com.br/?page_id=11" id="link">
 <img width="950" height="150" id="banner" src="http://www.agendaculturalbrasilia.com.br/wp-content/uploads/2013/04/Teste-Banner-Top1.jpg">
 </a>

 

Como disse anteriormente, se eu repetir isso no rodapé não funciona, se eu tiro do cabeçalho e coloco no rodapé funciona. e se eu crio uma nova rotina para chamar no rodapé também não funciona.

Segue o link da página:

http://www.agendaculturalbrasilia.com.br/

Se alguém puder me ajudar ficarei muito grato.

Abraços.

[Vinicius Rangel 208]

como você fez a chamada do javascript?

e você usou algum plugin?

[Ted k' 126]

Pode ser o ID, ele não pode ser repetido, se está repetindo o banner, pode esta duplicando o ID dos elementos.

[Jose Antonio Motta Junior 0]

Pode ser o ID, ele não pode ser repetido, se está repetindo o banner, pode esta duplicando o ID dos elementos.

Ted k', a imagem é a mesma da de cima, mas estou dando outro nome para a variável... por ser a mesma imagem dá problema??? eu teria que fazer uma cópia da imagem e dar outro nome para ela??? achei que a variável é que fazia todo o tratamento...

 

como você fez a chamada do javascript?

e você usou algum plugin?

Desculpe Vinícios Rangel, não saco muito de JavaScript... como assim "como fiz a chamada do JavaScript"???

[Vinicius Rangel 208]

como esta escrito o seu código javascript, posta aqui.

[Jose Antonio Motta Junior 0]

Fiz assim para o Rodapé:

<!--TESTANDO SE VOU CONSEGUIR CHAMAR NO RODAPÉ-->

<?php if (is_category('cinema')) { ?>
<!-- Resultado da categoria cinema! -->
<!-- Codigo das imagens -->
<script type="text/javascript"> 
<!-- 
var y=0; 
var img=new Array(); 
img[0]="http://www.agendaculturalbrasilia.com.br/wp-content/uploads/2013/04/Teste-Banner-rodape.jpg"; 
img[1]="http://www.agendaculturalbrasilia.com.br/wp-content/uploads/2013/04/Teste-Banner-rodape1.jpg"; 
img[2]="http://www.agendaculturalbrasilia.com.br/wp-content/uploads/2013/04/Cinema-

teste-2-314x200.jpg"; // e assim por diante, conforme o n.º de imagens

var sites=new Array(); 
sites[0]="http://www.agendaculturalbrasilia.com.br/?page_id=11"; 
sites[1]="http://www.agendaculturalbrasilia.com.br/?page_id=11"; 
sites[2]="http://www.agendaculturalbrasilia.com.br/category/cinema/"; // e assim por 

diante, conforme o n.º de sites 

function alterna_banner(){ 
document.getElementById("banners").src=img[y]; 
document.getElementById('links').href=sites[y]; 
y++; 
if (y==3){ // aqui compara x com a quantidade total de imagens que tem 
y=0; 
} 
} 
setInterval('alterna_banner()',5000); 
//--> 
</script>

 

E chamei assim no rodapé:

 

<!-- Aqui vai o Banner de divulgacao -->


<a href="http://www.agendaculturalbrasilia.com.br/?page_id=11" id="links">
 <img width="950" height="150" id="banners" src="http://www.agendaculturalbrasilia.com.br/wp-content/uploads/2013/04/Teste-Banner-Top3.jpg">
 </a>

 

 

como esta escrito o seu código javascript, posta aqui.

Lá em cima eu já havia postado como estava para chamar no header.php e agora postei como está para o footer.php

[Jose Antonio Motta Junior 0]

Putz Tedk' deu certo cara... incrível... hehehehehehe...

Uma outra dúvida agora: posso perguntar sobre jquery aqui ou não??? pois estou querendo usar um plugin também e não estou conseguindo... se puder perguntar aqui coloco em breve... Obrigado.

[Vinicius Rangel 208]

outro tópico por favor.

[Jose Antonio Motta Junior 0]

Engraçado... funcionou e quando eu coloquei para mudar em outro local de problema novamente... e agora as imagens são totalmente diferentes... fala sério viu...

[Jose Antonio Motta Junior 0]

Bom, vou marcar como resolvido e dizer o que estava acontecendo.

Com a ajuda da galera, percebi que em javascript a mesma imagem não pode ser interpretada 2 vezes pois dá conflito. Bastou eu duplicar as imagens que estava usando para funcionar.

Depois tive outro problema pois fiz o mesmo efeito em 3 posições diferentes... e nesse ponto é importante organizar o código (o que eu não havia feito). Tem que colocar em ordem de cima para baixo...

Mas tenho que informar também que usando jquery eu resolvi todos os meus problemas de forma bem mais fácil usando o plugin Cycle.

Abraços e obrigado a todos que me ajudaram.