Fórum grátis: ajuda e atendimento ao utilizador Forumeiros.com

[TUTORIAL] Slidebar com imagens

Fórum dos Fóruns :: Forumeiros e você ::   :: Tutoriais, dicas e astúcias :: Topo do fórum

Ir para baixo

[TUTORIAL] Slidebar com imagens Empty [TUTORIAL] Slidebar com imagens

Mensagem por Ace 17.01.13 13:31


[TUTORIAL] Slidebar com imagens Images10
Slidebar com imagens

Usando como base este tutorial, pode-se adicionar uma barra de slides geralmente usada como uma demonstração de imagens, poderá ser usada também, como um anúncio em seu fórum.

--> Tutoriais, dicas e astúcias <--
Slidebar com imagens


1º - Noção básica da função:
Nós estaremos utilizando um código HTML que funcionará na Home page de teu fórum. O código é bem simples e de fácil manuseio se quiser editar algo dentro dele.
Painel de controle  :seta2: Visualização  :seta2: Página inicial  :seta2: Geral
[TUTORIAL] Slidebar com imagens Img128
[TUTORIAL] Slidebar com imagens 110111Seta Assunto da mensagem Correspondente ao nome do código HTML na Home page. Aconselhamos deixar em branco.
[TUTORIAL] Slidebar com imagens 110210Seta Conteúdo da mensagem.- São destinados os devidos locais para onde você aplicará os efeitos nos fóruns. No nosso caso, nesta área que colocaremos o código HTML.
[TUTORIAL] Slidebar com imagens 110310Seta Código HTML No campo anterior, estaremos colocando o HTML. Em nosso caso, adicionaremos este código:

Código:
     <link href="http://jquerytools.github.io/media/css/scrollable-horizontal.css" type="text/css" rel="stylesheet" /><link href="http://jquerytools.github.io/media/css/scrollable-buttons.css" type="text/css" rel="stylesheet" /><script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js" type="text/javascript"></script>
<!--  HTML structures  -->
<div style="margin:0 auto; width: 634px; height:120px;">
   <!--  "previous page" action  --><a class="prev browse left"></a>
   <!--  root element for scrollable  -->
   <div id="scrollable" class="scrollable">
        
      <!--  root element for the items  -->  
      <div class="items">
             
         <!--  grupo 1  -->    
         <div>
                  <a href="LINK_1"><img title="TITULO_1" src="IMAGEM_1" /></a>        <a href="LINK_2"><img title="TITULO_2" src="IMAGEM_2" /></a>    <a href="LINK_3"><img title="TITULO_3" src="IMAGEM_3" /></a>         <a href="LINK_4"><img title="TITULO_4" src="IMAGEM_4" /></a>    
         </div>
         <!-- Fim do grupo 1 -->    
         <!--  grupo 2  -->    
         <div>
                       <a href="LINK_5"><img title="TITULO_5" src="IMAGEM_5" /></a>        <a href="LINK_6"><img title="TITULO_6" src="IMAGEM_6" /></a>   <a href="LINK_7"><img title="TITULO_7" src="IMAGEM_7" /></a>         <a href="LINK_8"><img title="TITULO_8" src="IMAGEM_8" /></a>    
         </div>
         <!--   fim do grupo 2  -->    
         <!--  grupo 3  -->    
         <div>
                        <a href="LINK_9"><img title="TITULO_9" src="IMAGEM_9" /></a>        <a href="LINK_10"><img title="TITULO_10" src="IMAGEM_10" /></a>   <a href="LINK_10"><img title="TITULO_10" src="IMAGEM_10" /></a>         <a href="LINK_10"><img title="TITULO_10" src="IMAGEM_10" /></a>    
         </div>
         <!--  fim do grupo 3  -->  
         <!--  Adicione aqui mais códigos -->  
      </div>
      
   </div>
   
   <!--  "next page" action  --><a class="next browse right"></a>
</div>
<!--  javascript coding  --><script>
jQuery(function() {
  // initialize scrollable
  jQuery(".scrollable").scrollable();
});
</script>

  • :seta2: IMAGEM Substitua pelo url da imagem que deseja que apareça. Todos os formatos aceitos.

  • :seta2: LINK  Link de redireção de quando for clicado na imagem.

  • :seta2: TITULO O título que aparecerá ao passar o mouse sobre a imagem.


  • Há como adicionar mais um grupo de slides?

    Sim, apenas procure pelo código:
    <!-- Adicione aqui mais códigos-->

    E substitua-o por
    Código:
     <!-- grupo Nº -->
        <div>
          <a href="LINK_ Nº"><img src="IMAGEM_ Nº" title="TITULO_ Nº" /></a>
            <a href="LINK_ Nº"><img src="IMAGEM_ Nº" title="TITULO_ Nº" /></a>
        <a href="LINK_ Nº"><img src="IMAGEM_ Nº" title="TITULO_ Nº" /></a>
            <a href="LINK_ Nº"><img src="IMAGEM_ Nº" title="TITULO_ Nº" /></a>
        </div>
    <!--Fim do grupo  Nº-->
    Adicionando-o um abaixo do outro para que possa colocar mais grupos de imagens.

  • Há como remover grupos de imagens?
    Sim, apenas remova o código que começa com
    "<!-- grupo Nº -->" até o final onde terá "<!--Fim do grupo  Nº-->".


Resultado:

[TUTORIAL] Slidebar com imagens 3da4d369057a40528a06891e572c25cc



© Fórum dos Fóruns
[TUTORIAL] Slidebar com imagens Questi11 Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Slidebar com imagens
Ace
Ace
Membro Entusiasta

Membro desde : 06/07/2011
Mensagens : 8881
Pontos : 11608

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

Fórum dos Fóruns :: Forumeiros e você ::   :: Tutoriais, dicas e astúcias :: Topo do fórum

 
Permissões neste sub-fórum
Não podes responder a tópicos