Neste tópico abordarei o assunto galeria de imagens, onde será observado como criar uma apresentação das imagens com um plugin jQuery chamado ColorBox.

O primeiro passo a ser tomado é realizar o download do plugin no site do desenvolvedor.

Após a conclusão do download, descompacte o arquivo em qualquer diretório e observe que foi criado um diretório chamado colorbox.

Observe que no interior do diretório colorbox há outro diretório colorbox com um arquivo “jquery.colorbox-min.js” e alguns diretórios chamados “example” com exemplos de utilização do plugin.

Na raiz do seu site crie um diretório chamado “js”.

Copie o arquivo “jquery.colorbox-min.js” e coloque dentro do diretório js junto com o arquivo do jQuery.

No HTML de sua galeria, dentro do head, faça a chamada do jQuery e do colorbox conforme mostrado abaixo:

Em seguida, copie o conteúdo do diretório “example5″ (menos o index.html) para a raiz do seu site.

Faça a chamada do arquivo “colorbox.css” antes dos arquivos .js, conforme exemplo abaixo:

No local onde deve ficar a galeria, você deve criar alguns links (tag a) com o atributo rel=”galeria”.

Observe abaixo:

Agora crie uma função em jquery para que a lista de imagens seja exibida ao clicar:

Observe no código acima que todos os links (tag a) que possuem o atributo rel=”galeria” receberão a função .colorbox().

Caso hajam dúvidas sobre o tutorial estou %100 a disposição de qualquer leitor, comentem que responderei.

Para visualizar o exemplo em funcionamento do tutorial clique aqui.

Para baixar os arquivos do tutorial clique aqui.