Pular para o conteúdo principal

Efeito Lightbox

Esse hack e muito legal. As imagens podem ser visualizadas sem sair da página.

Para ver um exemplo, clique na imagem abaixo:

Vamos a primeira parte:
1. Clique AQUI, para baixar os arquivos necessários para esse hack e hospede em um local desejado (anote o endereço dos arquivos).
2. Vá em Editar HTML, marque a opção Expandir Modelos de Widgets e procure pela tag:

]]></b:skin>


3.Depois, cole embaixo dela o seguinte código substituindo as URLs pelos links que você anotou a pouco:

<script src="http://URL_DO_ARQUIVO/prototype.js" type="text/javascript"></script>
<script src="http://URL_DO_ARQUIVO/effects.js" type="text/javascript"></script>
<script src="http://URL_DO_ARQUIVO/scriptaculous.js" type="text/javascript"></script>
<script src="http://URL_DO_ARQUIVO/lightbox.js" type="text/javascript"></script>

<link rel="stylesheet" href="http://URL_DO_ARQUIVO/lightbox.css" type="text/css" media="screen" />


4.Agora, Para que a imagem abra com o efeito do lightbox, você precisará usar este código:

<a title="Descrição da Imagem" href="Endereço da Imagem que será carregada" rel="lightbox"><img src="endereço da imagem pequena"/></a>


Colocando a descrição e os endereços da imagem pequena e da imagem normal.
5. Você também pode abrir varias imagens, como se fosse um slideshow, basta colocar o seguinte código:

<a title="Aqui vai a descrição que aparace no Lightbox-1" href="http://www.blogger.com/endere%C3%A7o%20da%20imagem%20que%20vai%20ser%20carregada-1" rel="lightbox[roadtrip]"><img src="http://www.blogger.com/endere%C3%A7o%20da%20imagem%20pequena-1" /></a>
<a title="Aqui vai a descrição que aparace no Lightbox-2" href="http://www.blogger.com/endere%C3%A7o%20da%20imagem%20que%20vai%20ser%20carregada-2" rel="lightbox[roadtrip]"><img src="http://www.blogger.com/endere%C3%A7o%20da%20imagem%20paquena-2" /></a>
<a title="Aqui vai a descrição que aparace no Lightbox-3" href="http://www.blogger.com/endere%C3%A7o%20da%20imagem%20que%20vai%20ser%20carregada-3" rel="lightbox[roadtrip]"><img src="http://www.blogger.com/endere%C3%A7o%20da%20imagem%20pequena-3" /></a>


Veja abaixo o efeito:

O original deste hack pode ser encontrado, clicando aqui.

Update dia 13/11/08:
Novo template no blog, sem esse hack!

Update dia 11/11/09

Havia um pequeno erro no artigo mas, graças ao @The Croz que me avisou, eu pude consertar e agora está tudo certo. Vlw @Croz!

Postagens mais visitadas deste blog

Mudar Imagem ao Passar o Mouse

A interatividade é o que muitas vezes (quando combinada com bom conteúdo) faz com que os leitores gostem e voltem a visitar o seu site. Nesse tutorial você aprende um código em JavaScript que altera a imagem quando o cursor do mouse passa sobre ela.

E-Referer - De onde vem seus visitantes?

O site E-Referer oferece uma ferramenta gratuita que mostra a origem dos visitantes do seu blog e a quantidade de visitas que lhe enviou.