[TUTORIAL] Slidebar com imagens

[Ace]

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   Visualização   Página inicial   Geral

Assunto da mensagem Correspondente ao nome do código HTML na Home page. Aconselhamos deixar em branco.

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.

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>

IMAGEM Substitua pelo url da imagem que deseja que apareça. Todos os formatos aceitos. LINK  Link de redireção de quando for clicado na imagem. 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