Bem vindo ao SOS Designers

Faça o seu cadastro gratuito no Portal SOS Designers e tenha um acesso personalizado.

Empresas

Cadastre gratuitamente suas vagas, crie sua propria Lista de Curriculos Favoritos, e tenha um acesso personalizado.

Usuarios

Cadastre gratuitamente seu curriculo, crie sua propria Lista de Noticias Favoritas e tenha um acesso personalizado.

Área de Empresas | Vagas

Área de acesso a empresas cadastradas que desejam postar vagas de empregos no Portal e pesquisar curriculos.

Cadastre-se gratuitamente
Esqueceu a sua senha?

Área de Usuarios | Curriculos

Área do Usuario que deseja cadastrar seu curriculo e pesquisar vagas.



Cadastre-se gratuitamente
Esqueceu a sua senha?


Redes Sociais
Siga o Portal SOS Designers no Twitter Siga o Portal SOS Designers no Facebook

JavaScript / jQuery


Você está aqui: Home » JavaScript / jQuery » Criando um sistema de destaques – Parte 2

Criando um sistema de destaques – Parte 2


Pesquisar no Portal SOS Designers





Tempo Real



Siga o SOS Designers








pub_flash( 'http://www.sosdesigners.com/banners/mkt digital_flash_300x250.swf', 300, 250 ); " alt="Tecnoponta - 300 x 250 - MKT Digital" />

Tá na hora de continuar com a segunda parte do tutorial de destaques… Muita gente pediu e eu não vou deixar vocês esperando! :)

 

Pra quem não lembra, na Parte 1 criamos todo o HTML e CSS do destaque (o resultado ficou assim) e hoje, como prometido, 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 (até agora é a 1.4.2) 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 do jquery.cycle.all.min.js… Insira-o no <head> 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! :D

 

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! :D


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 de callback 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! :D 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');
}


Pra quem quiser dar uma olhada no jquery.destaques.js completo: Pastie

Pronto! Terminamos o nosso sistema de destaques! :D


Muita gente pode parar por aqui e ir fazer o seu sistema de destaques, mas sei que muitos de você, como eu, vão preferir que esse seja um bloco de destaques dinâmico, vindo direto do banco de dados… Então aguardem mais um pouco pela Parte 3, onde criaremos o arquivo PHP que fará a conexão com o banco de dados e trará os dados (titulo e link) de uma tabela do MySQL. :)


Quer ver como ficou o sistema de destaques até agora? Veja online ou faça download do RAR com os arquivos.


Abraços e até a próxima!



Sobre o Colunista:

Thiago Belem


Profissão: Desenvolvedor PHP, WebMaster e Geek

Descrição: Sou WebMaster e Desenvolvedor PHP há cinco anos, trabalho no Jornal do Brasil, estou cursando o 3º período de Ciência da Computação na Unicarioca e atuo como Desenvolvedor Freelancer na Clio Interactive. Estudo programação desde os 12 anos de idade e trabalho com PHP e MySQL voltados para o desenvolvimento WEB desde o fim de 2006. Atualmente mantenho meu blog sobre PHP, MySQL, jQuery e Desenvolvimento WEB e sou colunista do portal iMasters, onde também sou moderador do Fórum de PHP e do Fórum Oficial de CakePHP (Brasil).
Thiago Belem

Deixe seu comentário:





© Copyright 2002-2017
Portal SOS Designers
Webmaster: Luiz Antonio Bovi