Faça uma galeria de imagens usando JQuery Lightbox Plugin

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

É formado em Sistemas de Informação, pós-graduado em Sistemas de Banco de Dados e mestre em Educação com foco em Tecnologias Sociocomunitárias. Trabalha como professor de ensino técnico e tecnológico no Instituto Federal de Educação, Ciência e Tecnologia de São Paulo ministrando disciplinas nas áreas de programação, banco de dados, desenvolvimento de projetos e engenharia de software.

Posts relacionados

Comentários

  1. 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.

    1. 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

  2. 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

Deixe um comentário

O seu endereço de e-mail não será publicado.