Galeria de fotos Lightbox no Blogger

Dica para os blogueiros de plantão: Use uma galeria de fotos no Blogger!

Irei explicar como usar a galeria de fotos e imagens Lightbox v2.04 no Blogger.

Indolência Blog usa e aprova o plugin Lightbox v2.04!

Veja a galeria funcionando em um de nossos posts: Notebook de Madeira (feito em casa!)

Primeiramente é necessário fazer o download de lightbox V2.04 clicando aqui ou acessando o site http://www.lokeshdhakar.com/projects/lightbox2/

Após concluir o download do arquivo o passo seguinte é descompactar e realizar algumas modificações em seu código:

Você vai precisar de um serviço de hospedagem (recomendo Google Sites).
Então hospede as imagens listadas abaixo que estão na pasta “images” no serviço recomendado ou outro de sua preferência.

. Closelabel.gif
. Loading.gif
. Nextlabel.gif
. Prevlabel.gif

Agora antes de hospedar os outros arquivos vamos fazer algumas modificações:

Abra o arquivo "lightbox.css" (dentro da pasta "css"):

procure por: url(../images/prevlabel.gif)
e substitua por: url(http://link da imagem hospedada prevlabel.gif)

procure por: url(../images/nextlabel.gif)
e substitua por: url(http://link da imagem hospedada nextlabel.gif)

Agora abra o arquivo "lightbox.js" (dentro da pasta "js")

procure por: fileLoadingImage: 'images/loading.gif'
>e substitua por: fileLoadingImage: 'http://link da imagem hospedada loading.gif'

procure por: fileBottomNavCloseImage: 'images/closelabel.gif'
e substitua por: fileBottomNavCloseImage: 'http://link da imagem hospedada closelabel.gif'

Modificações realizadas vamos hospedar os arquivos com os códigos javascript e CSS.

. lightbox.css
. builder.js
. effects.js
. prototype.js
. scriptaculous.js
. lightbox.js

Códigos hospedados, vamos ao Painel do Blogger >> Layout / Editar HTML e colocar essas 4 linhas de código antes da tag </head> do seu tamplate (Atenção!! Faça um backup de seu tmplate clicando em Baixar modelo completo antes de fazer qualquer alteração.) altere as informações conforme destacado em vermelho:

<link href='http://link do arquivo hospedado lightbox.css' media='screen' rel='stylesheet' type='text/css'/>

<script src='http://link do arquivo hospedado prototype.js' type='text/javascript'> </script>

<script src='http://link do arquivo hospedado scriptaculous.js?load=effects,builder' type='text/javascript'> </script>

<script src='http://link do arquivo hospedado lightbox.js' type='text/javascript'> </script>

Clique em "visualizar" para ver se está tudo ok, depois clique em "Salvar Modelo".

E por fim para usar a galeria em seus posts basta criar um link da seguinte forma:

Imagem individual:

Usando uma imagem em miniatura como link:
<a rel="lightbox" href="http://link da imagem a ser usada"><img src="http://link da miniatura da imagem a ser usada" border="0"/></a>

Usando texto como link:
<a rel="lightbox" href="http://link da imagem a ser usada">Seu texto aqui</a>

Imagens em série (slideshow):

<a href="http://link da imagem 1" rel="lightbox[Série]">Seu texto ou imagem para usar como link</a>
<a href="http://link da imagem 2" rel="lightbox[Série]">Seu texto ou imagem para usar como link</a>
<a href="http://link da imagem 3" rel="lightbox[Série]">Seu texto ou imagem para usar como link</a>

Em lightbox[Série], basta colocar entre colchetes o nome da série de imagens relacionadas.

Ex: rel="lightbox[fotos] ", rel="lightbox[imagens_engracadas]", etc...

Para alterar alguns termos para o português é só editar as imagens e procurar no código (lightbox.js) palavras que estão em inglês e trocá-las pelo português. Use Ctrl+F procurar palavras.

É isso, fica essa dica para os blogueiros de plantão.

Este post está participando do Concurso Profissão Blogueiro, que vai premiar três blogueiros com netbook e kit completo para quem quer ter um blog de sucesso. Acesse: www.ideiasnoar.com.br/profissaoblogueiro.