Swift

LightBox – Efeito nas Imagens com javascript

Atendendo a pedidos de sugestão de postagem, neste tutorial você vai ver como incluir um efeito expansível nas imagens de seus posts, igual a este que está neste blog de teste.
lightbox
Este efeito utiliza arquivos javascript para seu funcionamento.
Se preferir, o blogger dispõe de um efeito padrão bem parecido com este. 

1º Passo – Download dos arquivos javascript:

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

2º Passo – Hospedar os arquivos:

Hospede os arquivos em seu próprio site de hospedagem.
  1. Antes de hospedá-los, crie uma pasta com o nome “lightbox-1”.
  2. Criada a pasta, coloque todos os arquivos contidos na pasta “js” dentro desta pasta.(effects,builder, lightbox.js, scriptaculous, e prototype)
  3. Agora Coloque o arquivo “lightbox.css” nesta mesma pasta.
Agora hospede a pasta com os arquivos.
Após hospedar os arquivos, copie os links e guarde-os, pois você precisará deles para colocar as urls no local indicado no próximo passo.

3º Passo – Inserir código javascript no HTML do seu Template:

Vá no menu “modelon”, 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 -->
Lembrando que você deve de inserir os links dos Arquivos Hospedados no local indicado no código.
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, e devem estar na mesma pasta que os demais arquivos js foram hospedados.

4º Passo – Ativar o efeito Lightbox nas imagens de 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 hospedadar 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:
1. 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.
2. 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.
 
[alerta]ATENÇÃO:
Se você utiliza algum recurso com o javascript JQuery, como Wigets rotativos por exemplo, aconselho que não utilizem o recurso do LightBox 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 com o LightBox se você não estiver usando nenhum recurso com o JQuery.[/alerta]

You Might Also Like

0 comentários

Facebook

Visitas