Criando um sistema de Destaques com jQuery

Neste artigo vamos ver como criar um sistema de destaques usando o jQuery.Vamos estilizar o slideshow com css e criar uma paginação também com jQuery.

por Thiago Belem

No artigo de hoje iremos criar um sistema de destaques.

O sistema de destaques que iremos criar não é específico para o WordPress e sim para qualquer site… Por isso não iremos criar um plugin de WordPress ou usar as funções do mesmo, faremos tudo com código puro.

O sistema de destaques que iremos criar terá a seguinte aparência:

Figura 1: Como ficará o sistema

A marcação XHTML

Antes de mais nada, precisamos criar o HTML do nosso bloco de destaque… Começamos com uma div e dentro dela criaremos uma lista (UL) com três itens (LI):

<!-- destaques -->
	<div id="blocoDestaques">
	    <ul>
	        <li>...</li>
	        <li>...</li>
	        <li>...</li>
	    </ul>
	</div>
	<!-- /destaques -->

Agora, dentro de cada item, vamos adicionar uma imagem (IMG) com um link (A):

<li>
	    <a href="#" title="Destaque 1">
	        <img src="img/destaque1.jpg" alt="Destaque 1" />
	    </a>
	</li>
	 
	<li>
	    <a href="#" title="Destaque 2">
	        <img src="img/destaque2.jpg" alt="Destaque 2" />
	    </a>
	</li>
	 
	<li>
	    <a href="#" title="Destaque 3">
	        <img src="img/destaque3.jpg" alt="Destaque 3" />
	    </a>
	</li>

Agora vamos inserir, após as imagens com links, parágrafos (P) contendo a descrição (ou titulo) do destaque e que também estão com link (A) para o destaque:

<li>
	    <a href="#" title="Destaque 1">
	        <img src="img/destaque1.jpg" alt="Destaque 1" />
	    </a>
	    <div class="fundo"><!--  --></div>
	    <p><a href="#" title="Destaque 1">Destaque 1 - Muita coisa boa!</a></p>
	</li>
	 
	<li>
	    <a href="#" title="Destaque 2">
	        <img src="img/destaque2.jpg" alt="Destaque 2" />
	    </a>
	    <div class="fundo"><!--  --></div>
	    <p><a href="#" title="Destaque 2">Destaque 2 - Nem tão bom assim...</a></p>
	</li>
	 
	<li>
	    <a href="#" title="Destaque 3">
	        <img src="img/destaque3.jpg" alt="Destaque 3" />
	    </a>
	    <div class="fundo"><!--  --></div>
	    <p><a href="#" title="Destaque 3">Destaque 3 - Agora sim... bem melhor!</a></p>
	</li>

Algumas pessoas podem ter pensado que errei ao criar dois links ao invés de inserir o parágrafo (P) dentro do primeiro link, após a imagem… Mas isso seria errado pois o link é um elemento de linha (in-line) e o parágrafo é um elemento de bloco (block) e nunca devemos inserir um elemento block dentro de um in-line.

Criamos também, antes de cada parágrafo, uma div.fundo vazia que será o fundo preto transparente da descrição/titulo de cada item.

Até agora nosso sistema de destaques ficou assim:

Figura 2: Como está o sistema por enquanto

Por fim, nós vamos inserir mais um link, dessa vez vazio, antes da lista (UL)… Esse link será a faixa [Destaques] que teremos sobre a imagem e a nossa marcação HTML está pronta:

<!-- destaques -->
	<div id="blocoDestaques">
	 
	    <a class="faixa" href="#" title=""><!-- --></a>
	 
	    <ul>
	        <li>
	            <a href="#" title="Destaque 1">
	                <img src="img/destaque1.jpg" alt="Destaque 1" />
	            </a>
	            <div class="fundo"><!--  --></div>
	            <p><a href="#" title="Destaque 1">Destaque 1 - Muita coisa boa!</a></p>
	        </li>
	 
	        <li>
	            <a href="#" title="Destaque 2">
	                <img src="img/destaque2.jpg" alt="Destaque 2" />
	            </a>
	            <div class="fundo"><!--  --></div>
	            <p><a href="#" title="Destaque 2">Destaque 2 - Nem tão bom assim...</a></p>
	        </li>
	 
	        <li>
	            <a href="#" title="Destaque 3">
	                <img src="img/destaque3.jpg" alt="Destaque 3" />
	            </a>
	            <div class="fundo"><!--  --></div>
	            <p><a href="#" title="Destaque 3">Destaque 3 - Agora sim... bem melhor!</a></p>
	        </li>
	    </ul>
	</div>
	<!-- /destaques -->

Melhorando a aparência (CSS)

Começaremos criando um arquivo CSS e nele definiremos que a lista (UL), os seus itens (LI) e as imagens não terão estilo, margem ou espaçamento:

#blocoDestaques ul,
	#blocoDestaques ul li {
	    list-style: none;
	}
	 
	#blocoDestaques,
	#blocoDestaques ul,
	#blocoDestaques ul li,
	#blocoDestaques ul li img {
	    margin: 0px;
	    padding: 0px;
	}

Agora nós definiremos a altura e largura de todos os elementos usados no destaque:

	#blocoDestaques ul,
	#blocoDestaques ul li {
	    list-style: none;
	}
	 
	#blocoDestaques,
	#blocoDestaques ul,
	#blocoDestaques ul li,
	#blocoDestaques ul li img {
	    margin: 0px;
	    padding: 0px;
	 
	    width: 600px;
	    height: 215px;
	}
	 
	#blocoDestaques ul li div.fundo {
	    width: 600px;
	    height: 40px;
	}
	 
	#blocoDestaques a.faixa {
	    width: 100px;
	    height: 100px;
	}

Agora nós definimos o posicionamento de todos os elementos, o estilo dos elementos que compoem a descrição de cada item e o fundo da faixa [Desaques] que ficará sobre as imagens:

#blocoDestaques {
	    position: relative;
	}
	 
	#blocoDestaques ul,
	#blocoDestaques ul li {
	    list-style: none;
	}
	 
	#blocoDestaques,
	#blocoDestaques ul,
	#blocoDestaques ul li,
	#blocoDestaques ul li img {
	    margin: 0px;
	    padding: 0px;
	 
	    width: 600px;
	    height: 215px;
	}
	 
	#blocoDestaques ul li {
	    position: relative;
	}
	 
	#blocoDestaques ul li div.fundo {
	    width: 600px;
	    height: 40px;
	 
	    position: absolute;
	    bottom: 0px;
	    left: 0px;
	 
	    background: black;
	}
	 
	#blocoDestaques ul li p {
	    margin: 0px;
	    padding: 10px 15px;
	 
	    position: absolute;
	    bottom: 0px;
	    left: 0px;
	 
	    line-height: 20px;
	    font-family: Verdana, Arial, sans-serif;
	    font-size: 14px;
	}
	 
	#blocoDestaques ul li p a {
	    color: white;
	    text-decoration: none;
	}
	 
	#blocoDestaques a.faixa {
	    width: 100px;
	    height: 100px;
	 
	    position: absolute;
	    top: -5px;
	    left: -5px;
	    z-index: 100;
	 
	    background: transparent url('../img/faixa.png') 0 0 no-repeat;
	}

Agora vamos criar o jQuery que dará o efeito de transição dos destaques.

1. Inserindo o jQuery

Se você já tem jQuery 1.4.2 (ou superior) inserido no seu site, pule essa parte… Caso você não tenha o jQuery ou seja uma versão antiga, recomendo que continue lendo.

Vá ao site do jQuery e baixe a última versão e coloque o arquivo com o nome de jquery-1.4.2.min.js em uma pasta no seu site.

Feito isso nós podemos inserir o jQuery no site utilizando a seguinte linha:

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

Essa linha deve ser inserida dentro da tag <head> do seu site e o nome do arquivo ou a sua pasta não fazem a mínima diferença… Contanto que você acerte o arquivo, tá tudo certo.

2. Inserindo o jQuery Cycle

Agora nós iremos inserir o plugin de jQuery mais útil que existe, o jQuery Cycle, que serve para realizar um efeito de transição entre elementos dentro de um mesmo container… Em outras palavras: você faz slideshows com ele. Já falei um pouco sobre ele em um outro tutorial sobre galerias de fotos (slideshow) com jQuery).

Vá até o site do jQuery Cycle, baixe a última versão (até agora é a 2.80) e insira-a no seu da mesma forma que você fez com o jQuery, apenas mudando o nome do arquivo e, se necessário, a pasta.

Quando você fizer o download encontrará vários arquivos, mas você só precisa dojquery.cycle.all.min.js… Insira-o no do seu site APÓS o código do jQuery:

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>

3. Criando o seu jQuery de Destaques

Agora vamos criar um arquivo chamado jquery.destaques.js que conterá o código para “rodar” o jQuery Cycle no bloco de destaques e fazer o efeito de transição entre os slides dele… Mais uma vez, o nome e a localização do arquivo, contanto que vocês saibam o que estão fazendo e insiram-o de forma correta no site, tá tudo bem.

Começaremos o arquivo com o seguinte código:

/**
	 * Escopo de compatibilidade do jQuery
	 */
	(function($){
	 
	})(jQuery);

Continuaremos o nosso código na linha 5, mas parem um pouco para observar esse código… Ele fará com que o código que estiver ali dentro e usar a função jQuery (através do sifrão $) não entre em conflito com outras bibliotecas (Prototype, Moo-Tools e etc.)… Apenas essas duas linhas resolvem um problema de incompatibilidade que atrapalha MUITA gente por aí.

Agora nós iremos inserir o código que faz o jQuery Cycle agir sobre a lista de slides (destaques) que temos:

$(document).ready(function() {
	 
	    /**
	     * Roda o jQuery Cycle na lista (ul) que está
	     * dentro do bloco de destaques (#blocoDestaques)
	     */
	    $('#blocoDestaques ul').cycle();
	 
	});

Rode o seu site e veja a mágica acontecer… Já está 99% pronto!

Esse código que tem ao redor da linha que roda o jQuery Cycle é um código que você usará sempre que trabalhar com jQuery… Ele faz com o que o código que estiver dentro dele seja executado apenas quando o site (document) estiver pronto (ready) ou seja, depois que o HTML foi todo carregado.. Isso é necessário pois o jQuery trabalha diretamente com os elementos do HTML

Agora vamos ao 1% faltante que são três tarefas bastante simples:

• Colocar os paginadores (os números no canto) que permitem uma troca direta de slides
• Aplicar o efeito que faz a barrinha de descrição (com fundo preto) sumir e aparecer em cada troca de slides
• Inserir o código que trocará o link da etiqueta [Destaques] que fica sobre o slideshow, usando sempre o link do destaque que está aparecendo

3.1 – Inserindo paginadores no seu slideshow

Para inserir os paginadores precisaremos antes criar um container para recebê-los, fazemos isso com esse código:

// Cria uma div.paginas que receberá os paginadores
	var div = $('<div></div>').addClass('paginas');
	// Insere a div criada antes da lista de destaques
	$('#blocoDestaques ul').before(div);

Deveremos inserir esse código dentro do document.ready mas antes do código que chama o jQuery Cycle pois essa div criada será usada pelo Cycle.

Com esse código inserido o nosso document.ready() ficará assim:

$(document).ready(function() {
	 
	    // Cria uma div.paginas que receberá os paginadores
	    var div = $('<div></div>').addClass('paginas');
	    // Insere a div criada antes da lista de destaques
	    $('#blocoDestaques ul').before(div);
	 
	    /**
	     * Roda o jQuery Cycle na lista (ul) que está
	     * dentro do bloco de destaques (#blocoDestaques)
	     */
	    $('#blocoDestaques ul').cycle({
	 
	    });
	 
	});

Perceba que colocamos também um par de chaves dentro da chamada do jQuery Cycle… Ali dentro nós iremos definir as opções para modificar e interagir com o jQuery Cycle (veja mais a diante).

Agora nós já temos o container que receberá os paginadores, vamos inserir o código que criará os links de cada página, já funcionando:

$('#blocoDestaques ul').cycle({
	    pager: 'div.paginas', // Paginadores
	});

Com apenas essa linha os nossos links de paginação já estão aparecendo e funcionando! Não é uma maravilha?!

Vamos agora criar, rapidamente, o CSS para eles ficarem aparecendo sobre os slides, como quadradinhos bonitinhos:

#blocoDestaques div.paginas {
	    position: absolute;
	    top: 5px;
	    right: 5px;
	 
	    z-index: 100;
	}
	 
	 
	#blocoDestaques div.paginas a {
	    height: 20px;
	    width: 20px;
	 
	    display: block;
	    float: left;
	    margin-left: 2px;
	 
	    color: white;
	    font-size: 10px;
	    font-family: Verdana, Arial, sans-serif;
	    text-decoration: none;
	    text-align: center;
	    line-height: 20px;
	    outline: none;
	 
	    background: black;
	}
	 
	#blocoDestaques div.paginas a:hover,
	#blocoDestaques div.paginas a.activeSlide {
	    background: #9FAA27;
	    font-weight: bold;
	}
	 
	#blocoDestaques ul li p,
	#blocoDestaques ul li div.fundo { display: none; }

Esse CSS pode ser inserido no arquivo estilo.css (criado lá na Parte 1)… No fim dele nós inserimos uma regra que esconderá a barra de titulo… Vocês entenderão o motivo mais a frente.

Nossos paginadores estão prontos!

Vamos inserir mais duas opções que farão o slideshow pausar a transição se você estiver com o mouse sobre ele:

$('#blocoDestaques ul').cycle({
	    pager: 'div.paginas', // Paginadores
	    pause: true, // Pausa ao passar o mouse sobre ele?
	    pauseOnPagerHover: true // Pausa ao passar o mouse sobre as páginas?
	});

3.2 – Efeito de transição: escondendo e mostrando a barrinha de titulo

Agora nós vamos inserir uma opção que tem comportamento de callback, que são funções/métodos que são chamados logo após outras ações… Um bom exemplo decallback seria um redirecionamento após um login bem sucedido… Vamos inserir o código de callback que executará uma função antes de cada troca de slide:

// Executa uma função antes de cada troca de slide
	before: function(atual, proximo, opcoes, avancando) {
	 
	}

Você não precisa se preocupar com o formato usado na declaração dessa função, ele já é pré-definido pelo jQuery Cycle… Você só precisa se dedicar ao que vai colocar dentro dela.

E dentro dela vamos colocar o código que esconde a barrinha preta de titulo do slide atual antes de trocar para o próximo slide:

/**
	 * Esconde o parágrafo E a div.fundo que estão dentro do slide atual
	 */
	$('p, div.fundo', atual).slideUp('fast');
A nossa função de callback ficará assim:
	// Executa uma função antes de cada troca de slide
	before: function(atual, proximo, opcoes, avancando) {
	    /**
	     * Esconde o parágrafo E a div.fundo que estão dentro do slide atual
	     */
	    $('p, div.fundo', atual).slideUp('fast');
	}

Vamos também criar o callback que será chamado após a troca de slides:

// Executa uma função depois de cada troca de slide
	after: function(atual, proximo, opcoes, avancando) {
	    /**
	     * Mostra o parágrafo E a div.fundo que estão dentro do slide atual
	     */
	    $('p, div.fundo', proximo).slideDown('fast');
	}

E agora a nossa barrinha de destaques está subindo e descendo como o planejado! Só falta trocar o link da etiqueta [Destaques] para o link exato de cada destaque.

3.3 – Trocando o link da etiqueta [Destaques]

O link da etiqueta deverá ser atualizado logo após a troca de slides, então vamos modificar o callback after para isso:

// Executa uma função depois de cada troca de slide
	after: function(atual, proximo, opcoes, avancando) {
	    /**
	     * Altera dois atributos da etiqueta [Destaques] para
	     * ela ter o mesmo titulo e link do destaque mostrado
	     */
	    $('a.faixa', '#blocoDestaques').attr({
	        title: $('a', proximo).attr('title'),
	        href: $('a', proximo).attr('href')
	    });
	 
	    /**
	     * Mostra o parágrafo E a div.fundo que estão dentro do slide atual
	     */
	    $('p, div.fundo', proximo).slideDown('fast');
	}

Pronto! Terminamos o nosso sistema de destaques!

Artigo originalmente publicado por Thiago Belem: Criando um sistema de destaques – Parte 1e Criando um sistema de destaques – Parte 2

Conheça o curso de Introdução a jQuery da Devmedia