[Tutorial] Slidebar com imagens

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

avatar
Admin
Administrador
Tempo Online : 250d 6h 21m 59s
Mensagens : 693
Reputação : 4
Ver perfil do usuário http://bestweb.forumais.com

MensagemAdmin em Qui Set 29, 2016 4:01 pm

Informações:

Autor: Desconhecido
Versões: Todas as versões
Introdução: Poderá criar um slide com seus próprias imagens

Instalação:

Acesse:
Painel de Controle -> Visualização -> Pagina Inicial -> Geral
E coloque esse código em mensagem da pagina inicial:

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:

    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
    "" até o final onde terá "".

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

Cria uma conta ou logue para postar uma mensagem.

Você precisa ser um membro, para poder postar uma resposta.

Criar conta

Participe de nossa comunidade, basta se registrar. É Fácil!


Criar uma conta

Logar

Já tem uma conta? Sem problemas, Logue agora.


Logar-se

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