Implementei mais uma funcionalidade interessante no meu blog, a funcionalidade Lightbox.
Essa funcionalidade permite a abertura das imagens em tamanho real sem a utilização dos pop-ups e/ou novas janelas. O Lightbox cria uma camada sobre o site e resgata, por AJAX, a imagem no tamanho real. Isso é muito interessante pois nos facilita a visualização de imagens maiores, que não caberiam no espaço destinado ao post, sem ter que abri-la em nova janela. Todos os créditos para o Lokesh Dhakar .
Imagens Simples
Imagens em Grupo
 |  |  |  |
Clique nas imagens e veja como o LightBox funciona.
As dicas abaixo funcionam e foram testadas para a versão LightBox 2.02 em 02/03/2007.
Como implementar no seu site:
Onde baixar os arquivos
Primeiro de tudo, você deve baixar os arquivos JavaScript, Imagens e CSS no site do criador. Segue o link abaixo:
http://www.huddletogether.com/projects/lightbox2/
Provavelmente terá um link para um arquivo compactado (.ZIP). Esse arquivo compactado possui as seguintes pastas: css, images, js.
Sugiro extrair essas três pastas para a raiz do seu site, para facilitar na hora de referenciar esses arquivos. No meu caso, defini como raiz do site o endereço http://www.brunocunha.com/blog , portanto, coloquei estas pastas abaixo da pasta blog.
Parte 1 – Instalação
1 – O Lightbox usa três arquivos JavaScript para criar essa mágica na hora de exibição das imagens. É necessário acrescentar na sua página as três referências JavaScript abaixo, entre as tags <head> e </head> do HTML.
<script type=”text/javascript” src=”js/prototype.js”></script>
<script type=”text/javascript” src=”js/scriptaculous.js?load=effects”></script>
<script type=”text/javascript” src=”js/lightbox.js”></script>
Tenha um cuidado especial com essa referência. Tenha certeza de que o caminho para o arquivo js esteja correto. Se seguir a minha dica de extrair para a raiz do site, isso vai facilitar nesse ponto.
2 – Você deve fazer uma referência ao CSS do LightBox, que está na pasta css que você acabou de extrair. Outra possibilidade é copiar as classes css do LightBox e colocá-las no arquivo CSS do seu site, caso você já tenha um. Acho até melhor fazer assim. Fica tudo num arquivo só, mais organizado. Caso queira fazer a referência ao arquivo mesmo, acrescente o código abaixo entre as tags <head> e </head> do HTML.
<link rel=”stylesheet” href=”css/lightbox.css” type=”text/css” media=”screen” />
Tenha um cuidado especial com essa referência. Tenha certeza de que o caminho para o arquivo css esteja correto.
3 – Tanto o JavaScript quanto o CSS possuem referências à essas imagens que deverão ser verificadas.
CSS – Abra o arquivo css que contém as classes do LightBox e procure pelas imagens prevlabel.gif e nextlabel.gif. Coloque o caminho correto para elas. Veja abaixo a dica de caminho relativo para você poder apontar corretamente para essas imagens.
JS – Abra o arquivo lightbox.js, procure pelas imagens loading.gif e closelabel.gif e coloque o caminho correto para elas. Mesma coisa, aplique a dica sobre o caminho relativo.
Dica: Caminho Relativo x Caminho Absoluto
Sugiro, nesse ponto, que você coloque um caminho relativo, mas partindo da raiz do seu site. Como assim né!? Caminho relativo é suprimir o domínio e partindo da raiz do site é colocar a “/” (barra), antes das pastas.
Exemplo:
Meu domínio : www.brunocuha.com
Meu blog : www.brunocuha.com/blog
Imagens do LightBox : www.brunocuha.com/blog/images
JavaScript do LightBox : www.brunocuha.com/blog/js
CSS do LightBox : www.brunocuha.com/blog/css
Todos os caminhos acima são caminhos absolutos, pois eu coloco o domínio na frente de todas as pastas. Para referenciar por caminho relativo, simplesmente suprimo o domínio e coloco a “/” na frente da pasta:
Meu domínio : www.brunocuha.com
Meu blog : /blog
Imagens do LightBox : /blog/images
JavaScript do LightBox : /blog/js
CSS do LightBox : /blog/css
Assim tenho a referência correta independente do domínio.
Pronto, acabamos de configurar o LightBox para trabalhar por você. Agora vamos aprender a habilitar ele em suas imagens
Parte 2 – Ativando
1 – Adicione o atributo rel=”lightbox” em todos os links para imagens que você deseja que o LightBox atue. Exemplo:
<a href=”images/image-1.jpg” rel=”lightbox” title=”my caption”>image #1</a>
Opcional: use o atributo title se você quiser adicionar um título à sua imagem.
2 – Se você possui um grupo de imagens e gostaria de exibi-las como um álbum, com a possibilidade de avançar e voltar, proceda como no passo anterior, mas acrescente um nome de conjunto para essas imagens. Exemplo:
<a href=”images/image-1.jpg” rel=”lightbox[roadtrip]“>image #1</a>
<a href=”images/image-2.jpg” rel=”lightbox[roadtrip]“>image #2</a>
<a href=”images/image-3.jpg” rel=”lightbox[roadtrip]“>image #3</a>
Não existe limite para a quantidade de imagens que você pode agrupar.
Se você utiliza o WordPress como gerenciador do seu blog, baixe e instale o Lightbox 2 WordPress Plugin. Fica bem mais fácil. 
Bruno, como faz para colocar um link para uma outra imagem dentro da janela com a imagem ligthbox? Quando a pessoa abre a foto tem a opção de ver um detalhe desta foto.
agradeço desde já
obrigadao ai cara me ajudou muito com esse tutorial
abrass
sucesso
como configurar o tamanho dele ao abrir
Olá Alexandre! Infelizmente faz tanto tempo que não trabalho mais com programação que realmente não me lembro como fazer isso.
Sugiro visitar a página do desenvolvedor do Lightbox que certamente terá um tutorial para isso.
Desculpe não poder ajudar tanto, mas obrigado pela visita ao blog! []s
Olá, estou usando plugin LightBox no meu blog http://decionit.blogspot.com, funciona perfeito, com exceção quando clico na imagem pequena, a maior não abre na mesma pagina, usei todo meu conhecimento para que abrice na mesma pagina do blog, não consegui, se poderem me ajuda agradeço mais uma vez, meus arquivos e imagens estão hospedados no Google Site. Obrigado!
Olá, estou usando plugin highslide-4.1.12 no meu local host, funciona perfeito, no blog não http://decionit.blogspot.com/ usei todo meu conhecimento para que desse certo no blog, não consegui, se poderem me ajuda agradeço,meus arquivos e imagens estão hospedados no Google Site. Obrigado!
Muito bom o tutorial, queria saber como abrir o lightbox automaticamente quando a página for carregada. Valeu. Aguardo respostas.
Alguém indica Sítios onde possa iniciar um estudo sobre HTML, CSS e JS. Me parece que é necessário um conhecimento prévio destas ferramentas para configurar o Lightbox. Valeu galera. Aguardo informações.