[TUTORIAL] Slidebar com imagens

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

[TUTORIAL] Slidebar com imagens

Mensagem por Ace em 17/01/13, 11:31 am



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


- 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
Seta Assunto da mensagem Correspondente ao nome do código HTML na Home page. Aconselhamos deixar em branco.
Seta 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.
Seta 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:





© Fórum dos Fóruns
Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Slidebar com imagens
avatar

Ace
Principal contribuidor
Principal contribuidor

Inscrito dia : 06/07/2011
Mensagens : 8880
Pontos Ativos : 11605

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