Efeito em Imagens com o LightBox

Atendendo a pedidos de sugestão de postagem, neste tutorial você vai ver como incluir um efeito expansivel nas imagens de seus posts, igual a este que está neste blog de teste.

1º Passo - Download dos arquivos javascript:

Faça download dos arquivos javascrits necessários para utilização deste efeito:Download

2º Passo - Inserir código javascript no HTML do seu Template:

Vá na aba "layout", entre na edição HTML do seu template, e procure pela tag ]]></b:skin>
e cole logo ABAIXO dela:

<!-- Início do código Lightbox -->

<script language='Javascript' type='text/javascript'>
var cssNode = document.createElement(&#39;link&#39;);
cssNode.type = &#39;text/css&#39;;cssNode.rel = &#39;stylesheet&#39;;
cssNode.href = &#39;'http://url do lightbox.css&#39;;
cssNode.media = &#39;screen&#39;;
cssNode.title = &#39;using lightbox 2 with GPC&#39;;
document.getElementsByTagName(&quot;head&quot;)
[0].appendChild(cssNode);
</script>

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

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

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

<!-- Final do código Lightbox -->

Na pasta "js", contem os arquivos: effects,builder, lightbox.js, scriptaculous, e prototype.
Hospede todos os scripts contidos nas pasta e procure o seguinte trecho no código e coloque as urls onde está indicado.
Se você notou,no código acima não há espaço para inserir os scripts 'Builder' e 'Effects', mas eles devem ser hospedados na mesma conta.

Procure fazer download dos arquivos javascripts utilizados e hospede em seu próprio site de hospedagem.
- Hospede seus arquivos javascript no Google Site.
- Antes de hospedá-los, crie uma página com o nome "lightbox-1".
- Criada a página, faça o upload dos seus arquivos contidos na pasta "js" dentro desta página.
- Faça upload do arquivo "lightbox.css" em outra página. Repita o procedimento para criar uma página e nomei-a como "lightbox-2" e hospede nela o arquivo css.

Veja o exemplo de como deverá ficar o código completo:

<!-- Início do código Lightbox -->

<script language='Javascript' type='text/javascript'>
var cssNode = document.createElement(&#39;link&#39;);
cssNode.type = &#39;text/css&#39;;cssNode.rel = &#39;stylesheet&#39;;
cssNode.href = &#39;http://sites.google.com/site/mundodarkness/lightbox.css&#39;;
cssNode.media = &#39;screen&#39;;
cssNode.title = &#39;using lightbox 2 with GPC&#39;;
document.getElementsByTagName(&quot;head&quot;)
[0].appendChild(cssNode);
</script>

<script src='http://sites.google.com/site/mundodarkness/lightbox-1/prototype.js' type='text/javascript'/>
<script src='http://sites.google.com/site/mundodarkness/lightbox-1/scriptaculous.js?load=effects,builder' type='text/javascript'/>
<script src='http://sites.google.com/site/mundodarkness/lightbox-1/lightbox.js' type='text/javascript'/>

<!-- Final do código Lightbox -->

Evite utilizar os links dos arquivos que constam no código do exemplo acima, pois pode ocorrer algum problema de hospedagem futuro e o efeito deixará de funcionar no seu blog, por este motivo eu sugiro que sempre hospede seus arquivos utilizados.

3º Passo - Ativar o efeito Lightbox nas suas postagens:

Para ativar o efeito Lightbox nas suas postagens, você deverá hospedar todas as imagens que irá utilizar,fora do Blogger (Não utilize o modo fazer 'upload de imagem' no próprio editor html da postagem).
Hospede as imagens no seu álbum Picasa.web
Depois de hospedadas suas imagens, copie a url fornecida(endereço da imagem) e cole neste código, no local indicado:

<a href="URL-DA-IMAGEM" rel="lightbox"><img border="0" src="URL-DA-IMAGEM" style="height: 300px; width: 300px;" /></a>

Importante:
- O efeito funcionará em qualquer postagem, desde que você utilize o código acima para inserir a imagem.
Sempre que for utilizar este efeito nas imagens que irá postar, use o código acima, incluindo o URL da sua imagem no local indicado.

- Ajuste os valores de Width e height, pois será ali que você vai definir o tamanho que sua imagem se apresentará no post, antes de se expandir.
Quando se clica na imagem, ela expandirá e se apresentará no tamanho original.


Confira o demo deste efeito nesta postagem.

Atenção: Se você utiliza algum recurso com o javascript JQuery, como Wigets rotativos por exemplo, aconselho que não utilizem o recurso deste tutorial, pois estes dois códigos javascript quando usados juntos, no mesmo template, entram em conflito, e ambos deixam de funcionar. Portanto só ative o recurso de efeito nas imagens se você não estiver usando nenhum recurso com o JQuery.