• Olá pessoal, estou precisando criar um recurso na index que deixe 3 imagens de fundo em fullscreen e que elas sejam alteradas quando a página for atualizada, alguém tem ideia de como fazer isso? Eu peguei um exemplo mas usado no header, não sei se vai dar certo na index.

    Ex: <img src=”<?php bloginfo(‘template_url’); ?>/img/index<?php echo rand(1,3); ?>.jpg” alt=”Imagem Index” />

    Ai na pasta img eu coloco as imagens index1.jpg, index2.jpg e a index3.jpg

    Agora minha dúvida esta em como deixar as imagens em fullscreen usando esse recurso.

    Abrs.

Visualizando 5 respostas - 1 até 5 (de um total de 5)
  • @wstech,

    A index tem altura fixa?

    Se não, você quer que o background seja fixo enquanto o conteúdo rola na tela, ou quer que ele role junto?

    Criador do tópico Wesley Rodrigues

    (@wstech)

    Olá, estou tentando fazer o projeto seguindo os exemplos abaixos, e pra variar quebrando a cabeça pra encaixar as peças kkkk, pra entender melhor vou explicar o meu job ok.

    Na index deve ser full seguindo o mesmo tamanho das demais páginas conforme exemplos abaixo, para isso estou criando a estrutura na mão pois é muito difícil adaptar um layout pronto. Basicamente o layout vai ter um menu no topo, o conteúdo no centro e um rodapé com menu.

    Estrutura do projeto
    Index – http://i.imgur.com/DkNibw1.jpg
    Contato – http://i.imgur.com/znbOGhS.jpg
    Info – http://i.imgur.com/THHJNN2.png
    Demais páginas – http://i.imgur.com/mlAhsrj.jpg / http://i.imgur.com/Xy0g8IC.jpg

    Para as demais páginas vou usar o plugin chamado WP Electric Carousel – link: http://codecanyon.net/item/wp-electric-carousel-full-width-responsive-lazy-load-slider/full_screen_preview/6554799 e para chegar no efeito com a imagem selecionada a esquerda vou alterar o código dele.

    Objetivos do job:
    – Layout responsivo;
    – Index com imagens aleatórias quando houver o refresh;
    – Independente da página que esteja ao selecionar a página contato e info deve ser exibido um box sobre o conteúdo atual, seja ele fashion, editorial…

    Se puder me ajudar com dicas ai ficaria muito grato, sou iniciante e estou apaixonado com o WordPress… Fiz trabalhos pequenos e esse é um grande desafio.

    Abrs.

    Para o box sobre o conteúdo sugiro o plugin Easy Fancybox. Ele é muito completo e flexível.
    https://wordpress.org/plugins/easy-fancybox/

    Para a imagem do index o seu body vai ter que ter width:100% e a div que vai conter a imagem também. Aí você deve usar a imagem como fundo dessa div e colocar background-size:cover.

    Para que o seu layout seja responsivo e mobile friendly, você vai precisar definir fundos diferentes para cada tamanho de tela. Assim um vistante que abra a página em um celular de 320x200px não vai baixar uma imagem de 1920x1080px que deve servir monitores de alta resolução.

    Para alterar a imagem de acordo com o tamanho da tela e, ao mesmo tempo, servir uma imagem aleatória, você vai precisar usar o css incorporado no html. A melhor prática seria o css com uma folha de estilo externa para cada media-query e a randomização das imagens com jQuery, mas você pode começar com esse código que apesar de ser mais sujo é mais fácil de implementar e aprender. Vai ficar mais ou menos assim:

    <body style="width:100%">
    <style type="text/css">
    .imgcontainer {
         background-size:cover;
         width:100%}
    @media only screen and (max-width: 480px) {
            .imgcontainer {
               background-image: url(<?php bloginfo('template_url'); ?>/img/index480<?php echo rand(1,3); ?>.jpg);
               height:320px; //no height colocar a atlura da img }
        }
    @media only screen (min-width: 481px) and (max-width: 720px) {
            .imgcontainer {
               background-image: url(<?php bloginfo('template_url'); ?>/img/index720<?php echo rand(1,3); ?>.jpg); }
               height:560px}
    .
    .
    .
    continua com todas as media-queries
    </style>
    <div class="imgcontainer">
    &nbsp; <!--só pra garantir compatibilidade com alguns browsers antigos -->
    </div>
    </body>
    Criador do tópico Wesley Rodrigues

    (@wstech)

    Muito obrigado pelas dicas BRG Web, elas estão me ajudando pakas aqui viu. Vamos as dúvidas kkk.

    Obs: Eu ainda não acabei o tableless, estou ajustando os elementos, menus, e etc…

    No caso @media only screen, eu notei que existe valores no nome das imagens para as resoluções, nesse caso ai eu terei que gerar as imagens nesses tamanhos? Isso não seria automático?

    No caso da index estou quebrando a cabeça aqui para fazer no tableless, depois vou partir pro WP….

    Vlw!!!

    Criador do tópico Wesley Rodrigues

    (@wstech)

    Olá BRG Web, estou aplicando o tableless e coloquei online, assim fica mais fácil de te mostrar ok.

    Link: http://www.eddiemendes.com.br/tableless/index.html

    Da uma olhada ai, tentei aplicar o esquema das imagens na index, mas não rolou, essa imagem ai possui um tamanho de 1920×1281, e ela esta cortada.

    O menu esta de forma inversa da que eu coloquei, isso ainda estou arrumando, porque quando insiro o float:left ele alinha junto com a logo e o menu fica certo, quando coloco float:right ele vai pro lado que eu quero, mas o menu inverte a ordem.

    Abrs e mais uma vez, muito obrigado pela atenção e ajuda.

Visualizando 5 respostas - 1 até 5 (de um total de 5)
  • O tópico ‘Imagem aleatória fullscreen na index’ está fechado para novas respostas.