Boteco Digital

Algo que muitas pessoal tem me perguntado é como criar uma galeria de fotos bem legal. Uma que estou utilizando muito, é feita com um plugin do JQuery chamada PrettyPhoto, ela utiliza um efeito chamado lightbox, que é parecido com um POPUP, mas bem mais estiloso .

Bom para começar baixe o PrettyPhoto 2.4.3 e descomacte em uma pasta. Ele é divido em 3 pastas css, js e images, para usalo você vai precisar das 3.

Crie um novo documento HTML e inclua na tag header a bilbioteca JQuery, o plugin que esta na pasta js, a folha de estilo que esta na pasta css:

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" charset="utf-8" />

Agora para criarmos a nossa galeria vamos precisar das fotos e das suas miniaturas, para nosso exemplo vamos armazena-la em uma pasta chamada img.

Para cada imagem vamos criar um link para imagem grande que quando clicado vai abri-la em nossoo lightbox.

<a href="img/foto1-g.jpg" rel="prettyPhoto">
   <img src="img/foto1-p.jpg" alt="Foto do Espaço 1" />
</a>

O atributo rel=”prettyPhoto” é utilizado para selecionar os links que devem fazer parte de nossa galeria e para isso deve ser aplicado o plugin PrettyPhoto que será responsavel por abrir a imagem que esta no atributo href de nosso link no lightbox.

Para aplicar o plugin nos links acrescentamos na tag header o seguinte código:

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
	    $("a[rel^='prettyPhoto']").prettyPhoto();
	});
</script>

Exemplo de galeria feita com PrettyPhoto.

Bem simples não?

Existem muitos Plugins para JQuery com as mais variadas funções, então não tente reinventar a roda todo dia, apenas procure uma que sirva no seu caminhão.

Aquele Abraço.