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

[BichodoMato]

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! ^^

[Kyo Panda]

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

o/

[BichodoMato]

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>
     

[Kyo Panda]

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.

[BichodoMato]

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?

[Kyo Panda]

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;
}

[BichodoMato]

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

[Kyo Panda]

Adicione mais essa peça ao CSS:

Código:

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

o7

[BichodoMato]

Perfeito! Obrigado de novo Kyo!

[Kyo Panda]

À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".