O post de hoje é sobre um plugin muito legal desenvolvido em javascript (jquery) que tem como objetivo auxiliar a criação de galerias de imagens em marcações HTML.Trata-se do JQuery Lightbox Plugin.
Segundo a própria descrição do site oficial do plugin (http://leandrovieira.com/projects/jquery/lightbox/), o JQuery Lightbox Plugin é simples, elegante, discreto, não necessita marcações extras e é usado para sobrepor imagens na página atual através do poder e flexibilidade do seletor do JQuery. O plugin foi desenvolvido pelo brasileiro Leandro Vieira Pinho(http://leandrovieira.com/) e é bastante utilizado por desenvolvedores do mundo inteiro.
No próprio site do plugin é possível conferir exemplos e os arquivos necessários para a implementação das galerias. Você pode fazer o download gratuitamente.
Após baixar e descompactar o plugin, você verificará a seguinte estrutura de diretórios/arquivos:
Executando o arquivo index.htm você já conseguirá ver um exemplo do plugin em funcionamento (Algo semelhante à isto).
Pois bem. Para fazer as alterações de acordo com a página do seu site, vale ressaltar alguns pontos:
1º – No cabeçalho do seu HTML (na tag HEAD) é necessário importar os arquivos css e javascripts para que o plugin funcione, ativar o plugin e definir os estilos(para facilitar, esse estilo pode ser implementado dentro de um arquivo css externo ou dentro do próprio jquery.lightbox-0.5.css).
9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <!-- Arquivos utilizados pelo jQuery lightBox plugin --> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> <!-- / fim dos arquivos utilizados pelo jQuery lightBox plugin --> <!-- Ativando o jQuery lightBox plugin --> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> <style type="text/css"> /* jQuery lightBox plugin - Gallery style */ #gallery { background-color: #444; padding: 10px; width: 520px; } #gallery ul { list-style: none; } #gallery ul li { display: inline; } #gallery ul img { border: 5px solid #3e3e3e; border-width: 5px 5px 20px; } #gallery ul a:hover img { border: 5px solid #fff; border-width: 5px 5px 20px; color: #fff; } #gallery ul a:hover { color: #fff; } </style> |
2º – No corpo do seu HTML (tag BODY) é necessário que suas imagens venham dentro da DIV que foi definida na ativação do plugin(Linhas 17 a 19 do primeiro código). Depois basta colocar o thumb (miniatura) da imagem com link para a imagem original.
47 48 49 50 51 52 53 54 55 56 57 | <body> <h1>Lightbox Plugin</h1> <div id="gallery"> <ul> <li><a href="imagem_original_1.jpg"><img src="imagem_thumb_1.jpg" /></a></li> <li><a href="imagem_original_2.jpg"><img src="imagem_thumb_2.jpg" /></a></li> <li><a href="imagem_original_3.jpg"><img src="imagem_thumb_3.jpg" /></a></li> </ul> </div> </body> |
Com isso sua galeria funcionará perfeitamente e você poderá utilizar ela sempre que julgar necessário.
Espero que lhes ajudem.
Abs.
Siga-me no twitter: @rafaelwendel
Você acha q daria pra pegar as imagens do bd?
E exibir varias galerias numa unica pagina? Por ex, um site de festas, cada festa tem 6 fotos, entao cada galeria como o exemplo teria 6 fotos e umas 8 galerias seriam exibidas por pagina.
estou usando o jquery popeye e ja penei mttt pra conseguir isso, porém, só consegui na unha mesmo. se quiser eu envio o codigo, preciso mt de ajuda. meu email: wwceta at msn.com.
Fala Zanellato,
Você pode salvar o caminho das imagens no banco de dados e depois buscar e exibir em forma de galeria.
A paginação é feita normalmente (Aí vai um helper: http://www.rafaelwendel.com/2011/05/paginacao-em-php-com-paginator/)
Abs
Pois é..é o q eu fiz, só q nao sei aonde devo estar errando na hr de criar os loops.
Cara, sei q é pedir mt, mas se vc pudesse olhar meu codigo. é bater o olho e ver aonde to errando nos loops. manda um email pra wwceta at msn.com e te respondo com o codigo.
as vezes é uma coisa super simples q to penando.
valeu mesmo
Que bom que existem pessoas como vc… estou tentando criar um site sem ter conhecimento nenhum de nada, apenas força de vontade. E vc nao pode siquiera imaginar o quanto me está ajudando.
Um abraço, por aqui continuo sofrendo jajajaj