Você não está conectado. Conecte-se ou registre-se

Alterar o background do Header a cada atualização de página

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

Je4n

avatar
Membro ativo

  • Descrição:
O que eu já pré-defini é o seguinte:

Código:
<header style="background-image: url(https://unsplash.imgix.net/34/iSGu85T8TXS9zXJ20iBU__MG_9585.JPG)"></header>

Então, o que falta é um Js que possibilite que o background-image se altere a cada atualização de página. seria inicialmente sete imagens. Agradeço a quem puder estar me ajudando. até logo!
  • Informações:
Fórum:www.wasd.in Versão:PUNBB
Tipo:Pedido de códigoTags:Alterar,background,Header,atualização,página

Ver perfil do usuário

Igor_Ruiz

avatar
Membro ativo

Obrigado pela contribuição !




Seu fórum, esta de cara nova ? Esta precisando de uma Logo Tipo ?
Mande-me uma MP, que resolvo seu problema !
Visual-ARTS
Ver perfil do usuário

Je4n

avatar
Membro ativo

Eu já consegui um código, até estou usando em um Layout que estou desenvolvendo. O Problema é que eu não consigo adaptá-lo para usar na Forumeiros, eu até tentei usar o colocando no template, mas não obtive resultado.
Código:
<script type="text/javascript">
var banner= new Array()
banner[0]="http://i.imgur.com/O3qorj3.jpg"
banner[1]="http://i.imgur.com/ewjx4Hb.jpg"
banner[2]="http://i.imgur.com/CA1Bqov.jpg"
banner[3]="http://i.imgur.com/lXOHH0a.jpg"
banner[4]="http://i.imgur.com/ecOQshm.jpg"
banner[5]="http://i.imgur.com/4lWyBgB.jpg"
banner[6]="http://i.imgur.com/fkArdVQ.jpg"
var random=Math.floor(7*Math.random());
document.write("<style>");
document.write("header {");
document.write(' background-image:url("' + banner[random] + '");');
document.write(" }");
document.write("</style>");
</script>

Alguém poderia em ajudar ? Grato.



{WASD}
Ver perfil do usuário

JScript

avatar
Membro elite

@Je4n

Eu não teria ideias no momento, mas vendo esse código ai... Vou testar!

JS



Spoiler:
"O impossível é só uma questão de opinião."


"E o recente formará uma legião. Sua atuação será maior que a atual vezes mil. O estrondor de um milhão de teclados semelhante a um grande terremoto cobrirá a plataforma, e os incrédulos tremerão."

"Alguns seguidores dirão que não é possível, diante de uma legião estarrecida o recente provará o contrário e todos o conhecerão. Os infiéis passarão a lhe adorar diante de uma plataforma que nunca mais será a mesma!"


Do livro de JScript...


Ver perfil do usuário http://jscript.forumeiros.com/

Je4n

avatar
Membro ativo

JScript escreveu:@Je4n

Eu não teria ideias no momento, mas vendo esse código ai... Vou testar!

JS
Ok, estarei aguardando! Smile



{WASD}
Ver perfil do usuário

DeeW.

avatar
Membro elite

Tente isto:
Código:

$(document).ready(function(){
var banner= new Array()
banner[0]="http://i.imgur.com/O3qorj3.jpg";
banner[1]="http://i.imgur.com/ewjx4Hb.jpg";
banner[2]="http://i.imgur.com/CA1Bqov.jpg";
banner[3]="http://i.imgur.com/lXOHH0a.jpg";
banner[4]="http://i.imgur.com/ecOQshm.jpg";
banner[5]="http://i.imgur.com/4lWyBgB.jpg";
banner[6]="http://i.imgur.com/fkArdVQ.jpg";
var random=Math.floor(7*Math.random());
$('header').css('background-image','url("' + banner[random] + '")');
});

Ver perfil do usuário

Je4n

avatar
Membro ativo

DeeW. escreveu:Tente isto:
Código:

$(document).ready(function(){
var banner= new Array()
banner[0]="http://i.imgur.com/O3qorj3.jpg";
banner[1]="http://i.imgur.com/ewjx4Hb.jpg";
banner[2]="http://i.imgur.com/CA1Bqov.jpg";
banner[3]="http://i.imgur.com/lXOHH0a.jpg";
banner[4]="http://i.imgur.com/ecOQshm.jpg";
banner[5]="http://i.imgur.com/4lWyBgB.jpg";
banner[6]="http://i.imgur.com/fkArdVQ.jpg";
var random=Math.floor(7*Math.random());
$('header').css('background-image','url("' + banner[random] + '")');
});
Não resultou. :/



{WASD}
Ver perfil do usuário

waghcwb

avatar
Membro elite

Okay, vamos lá...

Primeiro troque isso
Código:
<header style="background-image: url(https://unsplash.imgix.net/34/iSGu85T8TXS9zXJ20iBU__MG_9585.JPG)"></header>

Por isso
Código:
<header id="change_header" style="background-image: url(https://unsplash.imgix.net/34/iSGu85T8TXS9zXJ20iBU__MG_9585.JPG)"></header>

Agora teste o seguinte Javascript
Código:
$(function() {

   // Aqui você adiciona os banners que quer usar;
   var banners = ['http://i.imgur.com/O3qorj3.jpg', 'http://i.imgur.com/ewjx4Hb.jpg', 'http://i.imgur.com/CA1Bqov.jpg'];
   var rand    = Math.floor(Math.random() * banners.length);

   $('#change_header').css({
      'background-image': 'url("' + banners[rand] + '")'
   });

});

Não coloquei todas as imagens do código anterior, faça o favor de adicionar...



"May the force be with you, young grasshopper!"




Não há assuntos pouco interessantes; apenas há pessoas pouco interessadas.
Ver perfil do usuário

Je4n

avatar
Membro ativo

Resultou. Smile

Muito obrigado, waghcwb!



{WASD}
Ver perfil do usuário

Alexandre51

avatar
Membro elite

Oi Apenas para que eu nao precise abrir outro topico.
Aonde encontro o :

Código:
<header style="background-image: url(https://unsplash.imgix.net/34/iSGu85T8TXS9zXJ20iBU__MG_9585.JPG)"></header>

Ver perfil do usuário http://www.notag.forumais.com

waghcwb

avatar
Membro elite

Não é necessário encontrar... Na verdade, o @Je4n adicionou isso manualmente no template dele... Onde você deseja usar este efeito?



"May the force be with you, young grasshopper!"




Não há assuntos pouco interessantes; apenas há pessoas pouco interessadas.
Ver perfil do usuário

Alexandre51

avatar
Membro elite

eu queria mudar o banner tb mas nao sei exatamente aonde acrescentar este código do head

Ver perfil do usuário http://www.notag.forumais.com

waghcwb

avatar
Membro elite

Pode passar o endereço do seu fórum? Para eu checar qual seletor usar..



"May the force be with you, young grasshopper!"




Não há assuntos pouco interessantes; apenas há pessoas pouco interessadas.
Ver perfil do usuário

Alexandre51

avatar
Membro elite

www.notag.forumais.com

Ver perfil do usuário http://www.notag.forumais.com

waghcwb

avatar
Membro elite

Ta na mão

Código:
$(function() {

  // Aqui você adiciona os banners que quer usar;
  var banners = ['http://i.imgur.com/O3qorj3.jpg', 'http://i.imgur.com/ewjx4Hb.jpg', 'http://i.imgur.com/CA1Bqov.jpg'];
  var rand    = Math.floor(Math.random() * banners.length);

  $('#branding').css({
      'background-image': 'url("' + banners[rand] + '")'
  });

});



"May the force be with you, young grasshopper!"




Não há assuntos pouco interessantes; apenas há pessoas pouco interessadas.
Ver perfil do usuário

Alexandre51

avatar
Membro elite

Opa waghcwb

O codigo ate funcionou legal, mas quando fui colocar minhas imagens elas nao se enquadram, e fica aparecendo a imagem que eu tinha anteriormente

Ver perfil do usuário http://www.notag.forumais.com

Alexandre51

avatar
Membro elite

Ola minha ultima postagem foi dia 9/03 hj já é dia 15.. alguem para ajudar?

Ver perfil do usuário http://www.notag.forumais.com

Je4n

avatar
Membro ativo

Alexandre51 escreveu:Opa waghcwb

O codigo ate funcionou legal, mas quando fui colocar minhas imagens elas nao se enquadram, e fica aparecendo a imagem que eu tinha anteriormente

Olá, procure usar imagens maiores. De qualquer forma, para resolver vá até seu CSS e procure por #branding
O Código será mais ou menos esse:
Código:
#branding {
  background: #000 url(http://i38.servimg.com/u/f38/19/10/09/82/logo12.jpg)repeat-x 42% 28%;
  border-bottom: 6px solid #A7A7A7;
  height: 400px;
}

Aí você troca por esse: (UPDATE! Atualize novamente, havia esquecido de um código)
Código:
#branding {
  background-color: #000;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 6px solid #A7A7A7;
  height: 400px;
}

Tente isso. (Não pude testar por completo, pois o JS não está ativado.)

Ver perfil do usuário

Alexandre51

avatar
Membro elite

Aeee vlw ,, ficou muito Top...

Ver perfil do usuário http://www.notag.forumais.com

Conteúdo patrocinado


Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum