Efeito LightBox para imagens no Blog Blogger e Wordpress
As imagens s�o parte importante para a estrutura de um blog e para a qualidade do conte�do. Vou mostrar como exibir imagens em miniatura e abrir na mesma janela, sem fechar seu blog. � um efeito super profissional e �timo para quem tem blog de fotografia ou precisa destacar as imagens com mais qualidade, sem reduzir pra caber na �rea de postagem.
Esse modelo que vou ensinar funciona bem tanto no Blogger (Blogspot) quanto no Wordpress e � bem simples de usar. Para ver o exemplo do que vamos fazer e qual o resultado, visite o link de teste:
- Testando efeito Lightbox no Blog
Obs.:Esse recurso da conflito com o gadget de Seguidores do Blogger, quando aberto no Internet Explorer. Por isso recomendamos que fa�a testes antes de aplicar definitivamente em seu blog. Vale lembrar: sempre fa�a backup de seu blog antes de mudar qualquer coisa.
Cr�ditos do LightBox
O servi�o do LightBox � "open source" (c�digo aberto) e gratuito. Esse � o site oficial com todos os detalhes e formas de uso:
- LightBox2 � Vis�o Geral (em ingl�s)
Como criar o efeito LightBox no Blog
A primeira coisa a fazer � abrir o c�digo-fonte de seu blog.
Passo 1: O JavaScript.
Se for no Wordpress.org, abra o menu "Apar�ncia" ~> "Editor" e abra o modelo "Cabe�alho (header.php)".
Procure pela linha "</head>". Imediatamente ACIMA dela, cole o seguinte trecho de c�digo.
Se for no Blogger (Blogspot), v� ao menu "Layout" ~> "Editar HTML" ent�o procure a linha "</head>" e imediatamente ACIMA, cole o trecho que segue:
<!-- JavaScript efeito Lightbox em fotos --> <link href=http://www.ferramentasblog.com.br/imagens/lightbox/css/lightbox.css media=screen rel=stylesheet type=text/css/>
<script src=http://www.ferramentasblog.com.br/imagens/lightbox/js/prototype.js type=text/javascript/>
<script src=http://www.ferramentasblog.com.br/imagens/lightbox/js/scriptaculous.js?load=effects,builder type=text/javascript/>
<script src=http://www.ferramentasblog.com.br/imagens/lightbox/js/lightbox.js type=text/javascript/>
<!-- JavaScript efeito Lightbox em fotos -->
Salve sem modificar nada nesse c�digo.
Agora vem a parte mais complicada. � preciso hospedar as imagens em algum lugar ou usar imagens que j� estejam hospedadas. O problema � que n�o funciona se a imagem estiver no PicasaWeb (padr�o do Blogger) � n�o sei o motivo disso.
Se voc� usa o Wordpress.org, pode simplesmente usar as imagens em sua hospedagem normalmente. Se voc� usa o Blogger (Blogspot) ter� que arrumar um local para armazen�-las.
Passo 2: Como inserir no Blog
Em qualquer lugar de seu blog, seja dentro de um post ou at� na sidebar (barra lateral), use o seguinte c�digo para fazer funcionar o LightBox:
Se for usar uma miniatura da imagem:
<a href="URL_da_IMAGEM_ORIGINAL" rel="lightbox"> <img src="URL_da_IMAGEM_MINI" border="0">
</a>
Ent�o altere apenas onde est� marcado de vermelho. Nesse caso voc� pode usar duas imagens, sendo uma a original e a outra uma miniatura que ser� exibida como op��o de clique. Voc� tamb�m pode simplesmente redimensionar a original.
Se for usar um link texto:
<a href="URL_da_IMAGEM_ORIGINAL" rel="lightbox">Texto do Link</a>Coloque a URL de endere�o da imagem no tamanho original onde est� de vermelho. E onde est� azul, escreva o texto para clicar e exibir a imagem.
O que mostramos aqui no passo 2 � exatamente o c�digo HTML para adicionar imagens em qualquer lugar de seu blog ou site. Para que o LightBox funcione, inserimos um trecho "REL" que busca a fun��o a ser executada no JavaScript.
