Colocar banners móveis no cabeçalho do fórum

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Colocar banners móveis no cabeçalho do fórum

Mensagem por BichodoMato em 30/01/17, 01:09 pm

Detalhes da questão


Endereço do fórum: http://naruto-survival.forumeiros.com/
Versão do fórum: PhpBB2

Descrição


Olá, gostaria de saber como faço para colocar um passador de slides automático no cabeçalho do fórum, desses que você encontra em outros fóruns com banners e informativos passando no topo para orientar o usuário.

Deixo um exemplo para ficar mais nítido como espero ficar os banners e onde devem ficar:

Como está agora:

Como espero que fique:

As imagens para os slides são apenas essas duas que deixarei aqui em baixo:

Slides:


Lembrando que essas imagens precisam ter links, agradeceria se deixassem um espaço para que eu mesmo os coloque. Obrigado! ^^



avatar

BichodoMato
Usuário avançado

Masculino
Inscrito dia : 06/07/2013
Mensagens : 340
Pontos Ativos : 563

Ver perfil do usuário http://naruto-survival.forumeiros.com

Resolvido Re: Colocar banners móveis no cabeçalho do fórum

Mensagem por Kyo Panda em 31/01/17, 01:04 pm

Você poderia tentar seguir esse tutorial, mas aplicando o código em Painel de controle Flecha ajudeiros Visualização Flecha ajudeiros Página inicial Flecha ajudeiros Geral, no campo Mensagem na página inicial.

o/
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

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

Resolvido Re: Colocar banners móveis no cabeçalho do fórum

Mensagem por BichodoMato em 01/02/17, 08:46 am

Olá Kyo, segui os procedimentos que me pediu mas nada aconteceu...

Segue o código que coloquei na "Mensagem da Página Inicial":

Código:
          <script src="http://steeph.vilabol.uol.com.br/slidedenovidades/slide3_script1.js" type="text/javascript"></script>        <script src="http://steeph.vilabol.uol.com.br/slidedenovidades/slide3_script2.js" type="text/javascript"></script>          <script>
        var simpleGallery_navpanel={
            panel: {height:'45px', opacity:0.5, paddingTop:'5px', fontStyle:'bold 11px Verdana'}, //customize nav panel container
            images: [    'http://img801.imageshack.us/img801/833/left.gif', 'http://img185.imageshack.us/img185/4655/playf.gif', 'http://img824.imageshack.us/img824/9263/right.gif', 'http://img291.imageshack.us/img291/3786/paused.gif'    ], //nav panel images (in that order)
            imageSpacing: {offsetTop:[-4, 0, -4], spacing:10}, //top offset of left, play, and right images, PLUS spacing between the 3 images
            slideduration: 500 //duration of slide up animation to reveal panel
        }
        </script>          <script type="text/javascript">
 
        var mygallery=new simpleGallery({
            wrapperid: "simplegallery1", //ID of main gallery container,
            dimensions: [500, 220], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
            imagearray: [
                ["http://i68.tinypic.com/t7il8l.png", "http://naruto-survival.forumeiros.com/]", "_new", "Nova Akatsuki"], ["http://i68.tinypic.com/25kpuva.png", "http://naruto-survival.forumeiros.com/]", "_new", "Novo Mapa"]
           
            ],
            autoplay: [true, 2500, 50], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
            persist: false, //remember last viewed slide and recall within same session?
            fadeduration: 500, //transition duration (milliseconds)
            oninit:function(){ //event that fires when gallery has initialized/ ready to run
                //Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
            },
            onslide:function(curslide, i){ //event that fires after each slide is shown
                //Keyword "this": references current gallery instance
                //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
                //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
            }
        })
 
        </script>
<div style="z-index:1;" id="simplegallery1" class="slideshowborda">
          
</div>
     
avatar

BichodoMato
Usuário avançado

Masculino
Inscrito dia : 06/07/2013
Mensagens : 340
Pontos Ativos : 563

Ver perfil do usuário http://naruto-survival.forumeiros.com

Resolvido Re: Colocar banners móveis no cabeçalho do fórum

Mensagem por Kyo Panda em 01/02/17, 11:13 pm

Eu analisei o código do tutorial e parece que ele já não funciona como esperado. Tente esse:

Código:
<script src="https://cdnjs.cloudflare.com/ajax/libs/unslider/2.0.3/js/unslider-min.js" /></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/unslider/2.0.3/css/unslider.css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/unslider/2.0.3/css/unslider-dots.css" rel="stylesheet" />
<div class="fa-slider">
   <ul>
      <li>
         <img src="http://i68.tinypic.com/t7il8l.png" />
      </li>
      <li>
         <img src="http://i68.tinypic.com/25kpuva.png" />
      </li>
   </ul>
</div>
<script>jQuery('.fa-slider').unslider();</script>

A aplicação continua sendo na descrição.
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

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

Resolvido Re: Colocar banners móveis no cabeçalho do fórum

Mensagem por BichodoMato em 03/02/17, 11:40 am

Na realidade até funcionou, mas parcialmente. Tem algumas coisas meio fora de escalas... A passagem não é automática tbm. Se possivel tem como colocar as duas imagens no mesmo tamanho pelo código?
avatar

BichodoMato
Usuário avançado

Masculino
Inscrito dia : 06/07/2013
Mensagens : 340
Pontos Ativos : 563

Ver perfil do usuário http://naruto-survival.forumeiros.com

Resolvido Re: Colocar banners móveis no cabeçalho do fórum

Mensagem por Kyo Panda em 03/02/17, 05:07 pm

Troque por esse:

Código:
<script src="https://cdnjs.cloudflare.com/ajax/libs/unslider/2.0.3/js/unslider-min.js" /></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/unslider/2.0.3/css/unslider.css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/unslider/2.0.3/css/unslider-dots.css" rel="stylesheet" />
<div class="fa-slider">
  <ul>
      <li>
        <img src="http://i68.tinypic.com/t7il8l.png" />
      </li>
      <li>
        <img src="http://i68.tinypic.com/25kpuva.png" />
      </li>
  </ul>
</div>
<script>jQuery('.fa-slider').unslider({autoplay: true});</script>

E adicione ao CSS:

Código:
.fa-slider img {
  width: 100%;
  height: auto;
}
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

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

Resolvido Re: Colocar banners móveis no cabeçalho do fórum

Mensagem por BichodoMato em 04/02/17, 08:05 pm

Quase lá, se puder dar uma olhada no forum, ficou um espaço em branco que empurra o slide pro lado
avatar

BichodoMato
Usuário avançado

Masculino
Inscrito dia : 06/07/2013
Mensagens : 340
Pontos Ativos : 563

Ver perfil do usuário http://naruto-survival.forumeiros.com

Resolvido Re: Colocar banners móveis no cabeçalho do fórum

Mensagem por Kyo Panda em 04/02/17, 10:56 pm

Adicione mais essa peça ao CSS:

Código:
.unslider-wrap {
    padding-left: 0 !important;
}

o7
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

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

Resolvido Re: Colocar banners móveis no cabeçalho do fórum

Mensagem por BichodoMato em 04/02/17, 11:03 pm

Perfeito! Obrigado de novo Kyo!
avatar

BichodoMato
Usuário avançado

Masculino
Inscrito dia : 06/07/2013
Mensagens : 340
Pontos Ativos : 563

Ver perfil do usuário http://naruto-survival.forumeiros.com

Resolvido Re: Colocar banners móveis no cabeçalho do fórum

Mensagem por Kyo Panda em 04/02/17, 11:06 pm

Às ordens. o/

---
Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

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

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

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