Efeito Lightbox
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!
toda vez que faço um da erro, e esse deu erro
ResponderExcluirOlá amigo td bem??
ResponderExcluirEu estava pesquisando este script, para add no meu blog, tentei usar este hack mas só que deu erro, descubrir qual era, é este aqui:
< link rel="stylesheet" href="http://URL_DO_ARQUIVO/lightbox.css" type="text/css" media="screen" > {Tires os espaços}
;está faltando você feichar a tag, então ficaria asim:
< link rel="stylesheet" href="http://URL_DO_ARQUIVO/lightbox.css" type="text/css" media="screen"/ > {Tires os espaços}
parece algo inutil mas só que sem isso o blogger não reconhece a tag, blz??
agradeço desde já!
E aproveitando aqui, gostaria de saber se vocÊ está aceitando parceria??
Espero resposta!
Vlw por ajudar @Croz, o erro foi corrigido (desculpa se eu escrevi seu nome errado)!
ResponderExcluirpra que baixar aquilo que tá ali em cima se não ira precissar ??
ResponderExcluir@Cullens, Você precisa baixar o arquivo, descompactar, hospedar os arquivos extraidos em um servidor de sua preferência, anotar os links e depois passar para a parte 3!
ResponderExcluir