Construindo uma Galeria de Fotos com o plugin PrettyPhoto do JQuery
efeitos, fotos, galeria, Javascript, JQuery, lightbox, plugin JQuery, PrettyPhoto, Web
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:
1 2 3 | <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.
1 2 3 | <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:
1 2 3 4 5 | <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.


















Atualmente existe 4 comentários
é Preciso coloca as imagem dentro da CSS? o meu prettyPhoto mas nao aparece o botao de fechar nem nada!
Não basta adicionar o atributo rel=”prettyPhoto” no link da foto grande, se clicar na foto em miniatura abrir ela sozinha no navegador possívelmente não carregou os arquivos js corretamente e o plugin prettyPhoto não está carregando.
Valeu pelas dicas!
já a funcionar no meu site