[TUTORIAL] Slidebar com imagens

1 [TUTORIAL] Slidebar com imagens Ter Mar 26, 2013 5:28 pm

T-Lord
Admin

Premios ( 4 )

Posts : 611
Pontos : 1597
Reputação : 5
Data de inscrição : 17/03/2013

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º - Código a ser utilizado:

Código:: [list=1] [*]<link rel="stylesheet" type="text/css" [*] href="http://jquerytools.org/media/css/scrollable-horizontal.css" /> [*]<link rel="stylesheet" type="text/css" [*] href="http://jquerytools.org/media/css/scrollable-buttons.css" /> [*]<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script> [*]<div style="margin:0 auto; width: 634px; height:120px;"> [*] [*]<a class="prev browse left"></a> [*] [*]<div class="scrollable" id="scrollable"> [*] [*] [*]<div class="items"> [*] [*]  [*] <div> [*] <a href="LINK_1"><img src="IMAGEM_1" title="TITULO_1" /></a> [*] <a href="LINK_2"><img src="IMAGEM_2" title="TITULO_2" /></a> [*] <a href="LINK_3"><img src="IMAGEM_3" title="TITULO_3" /></a> [*] <a href="LINK_4"><img src="IMAGEM_4" title="TITULO_4" /></a> [*] </div> [*] [*]  [*] <div> [*] <a href="LINK_5"><img src="IMAGEM_5" title="TITULO_5" /></a> [*] <a href="LINK_6"><img src="IMAGEM_6" title="TITULO_6" /></a> [*]<a href="LINK_7"><img src="IMAGEM_7" title="TITULO_7" /></a> [*] <a href="LINK_8"><img src="IMAGEM_8" title="TITULO_8" /></a> [*] </div> [*] [*]  [*] <div> [*] <a href="LINK_9"><img src="IMAGEM_9" title="TITULO_9" /></a> [*] <a href="LINK_10"><img src="IMAGEM_10" title="TITULO_10" /></a> [*]<a href="LINK_10"><img src="IMAGEM_10" title="TITULO_10" /></a> [*] <a href="LINK_10"><img src="IMAGEM_10" title="TITULO_10" /></a> [*] </div> [*] [*] [*]  [*] [*]</div> [*] [*]</div> [*] [*] [*]<a class="next browse right"></a> [*]</div> [*] [*]<script> [*]jQuery(function() { [*]// initialize scrollable [*]jQuery(".scrollable").scrollable(); [*]}); [*]</script> [/list]

IMAGEM -> Substitua pelo url da imagem que deseja
LINK -> Link de redireção de quando for clicado na imagem
Título -> O título que aparecerá ao passar o mouse sobre a imagem

2º - Adicionando o código:
Para que possamos adicionar o código, teremos que publicá-lo na mensagem da home page, para isso devemos aceder ao Painel de controle -> Visualização -> Pagina Inicial -> Geral -> Mensagem da Home Page -> Conteúdo da mensagem

(carregue na imagem para aumentar)

Expandir esta imagem Ver em tamanho real
[TUTORIAL] Slidebar com imagens Img128

Agora iremos colar o código e clicar no botão confirmar.

Resultado:

1 [TUTORIAL] Slidebar com imagens Ter Mar 26, 2013 5:28 pm