Galeria de imagens – Tutorial

Tudo certo pessoal?
Sexta-feira chegou e hoje é dia de mais um tutorial.

Esse tutorial fica mais como uma dica também para quem ainda não conhece o fancybox2.
Você já teve ter acessado algum site que tenha aqueles álbuns de fotos onde ao clicar o site escurece e a  imagem ampliada aparece em primeiro plano. E por mais complexo que possa parecer é algo muito simples e fácil de fazer.

Primeiro o download da biblioteca que iremos utilizar pode ser feito em:
http://fancyapps.com/fancybox/

Agora mãos a obra?
Primeiro passo é adicionar a biblioteca Jquery, o CSS e a biblioteca Fancybox.
Depois definimos os links, imagens e criamos o script para gerar a galeria de imagens.

<!-- Carregamos a biblioteca Jquery -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  
<!-- Carregamos a Fancybox e seu CSS -->
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<script src="http://fancyapps.com//fancybox/source/jquery.fancybox.pack.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
    	// Todos os itens que usarem a classe fancybox vão abrir como galeria
        $(".fancybox").fancybox();
	});
</script>

<!-- O atributo href serve para informar o link da imagem ampliada -->
<!-- O atributo rel serve para informar que as imagens fazem parte do mesmo álbum -->
<a href="http://hardcodigo.com.br/wp-content/uploads/2013/05/hardcomics_2.jpg" rel="album" class="fancybox">
    <img src="http://hardcodigo.com.br/wp-content/uploads/2013/05/hardcomics_2.jpg" height="70" alt="HQ" />
</a>
&nbsp;-&nbsp;
<a href="http://hardcodigo.com.br/wp-content/uploads/2013/05/hardcomics_1.jpg" rel="album" class="fancybox">
    <img src="http://hardcodigo.com.br/wp-content/uploads/2013/05/hardcomics_1.jpg" height="70" alt="HQ" />
</a>

E para visualizar funcionando:

JS Bin

O Fancybox2 também funciona com vídeos, HTML e outros sites. Muitas vezes podemos usá-lo para abrir cadastros assim o usuário pode realizar outras atividades sem sair da página atual.

Espero que a dica seja útil para vocês nos próximos projetos!
Na semana que vem vamos falar sobre atualizar o HTML usando AJAX, assim podemos mudar o conteúdo sem recarregar a página.

Até a próxima!