[TUTORIAL] Slidebar com imagens

Item: [TUTORIAL] Slidebar com imagens
Rating: 1

por Ace 17.01.13 13:31

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 - [TUTORIAL] Slidebar com imagens Img128

TUTORIAL - [TUTORIAL] Slidebar com imagens 110111

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

TUTORIAL - [TUTORIAL] Slidebar com imagens 110210

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 - [TUTORIAL] Slidebar com imagens 110310

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>  <div style="margin:0 auto; width: 634px; height:120px;"> <a class="prev browse left"></a>  <div id="scrollable" class="scrollable">  <div class="items">  <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>   <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>   <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>   </div> </div> <a class="next browse right"></a> </div> <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:
 <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> 
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á "".

Resultado:

TUTORIAL - [TUTORIAL] Slidebar com imagens 3da4d369057a40528a06891e572c25cc

TUTORIAL - [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