Veja aqui o efeito lightbox funcionando em uma pagina de amostra. Esse código é um pouco longo, mas é simples de colocar no blog e modificar no seu blog, entre na pagina layout, adicionar gadget, html/javascript e insira o código abaixo:
<style type="text/css">
<!--
#lightbox{background-color:#eee;padding: 10px;border: 2px solid #000000;}
#lightboxCaption{font-size: 0.8em;padding-top: 0.4em;}
#lightbox img{ border: none; }
#overlay img{ border: none; }
#overlay{background-image: url(http://img534.imageshack.us/img534/6039/overlayo.png);}
* html #overlay{
background-color: #333;background-color: transparent;background-image: url(http://img43.imageshack.us/img43/3623/fundomg.gif);filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://img179.imageshack.us/img179/5197/loading.gif", sizingMethod="scale");}
-->
</style>
<script type="text/javascript" src="http://acessoriosparablogs.com.br/scripts/lightbox.js"></script>
<a href="imagem em destaque" rel="lightbox" title="minha legenda">imagem ou texto</a>
As únicas coisas que precisa alterar aqui são os endereços das imagens ou texto e as legendas nesta linha.
<a href="imagem em destaque" rel="lightbox" title="minha legenda">imagem ou texto</a>
Tenha cuidado para usar o endereço certo das imagens, senão o código não funcionará, vamos mostrar como alterar esse código para colocar suas imagem com o efeito LightBox, veja as partes do código:
Imagem em destaque essa é a imagem que aparecerá na janela Light Box quando alguém clicar no link
Minha legenda este texto aparece embaixo da imagem em destaque dentro da janela Light Box.
Imagem ou texto, aqui é como aparecerá no blog o link para ver a tal imagem em destaque, você pode escrever, por exemplo, “Gato Bêbado” como fizemos em nosso exemplo ou colocar qualquer outro texto.
Também é possível usar uma miniatura da imagem que será exibida como se fosse uma galeria de fotos, então use esse código <img src="url da miniatura" border="0" /> no lugar do texto. Porém sugerimos não usar a mesma imagem que usará como destaque isso porque vai demorar muito para carregar, o correto é salvar e hospedar duas imagens com tamanhos diferentes, uma em tamanho natural para colocar em destaque (aparecer somente quando clicar) e outra em tamanho reduzido para servir como link para outra imagem grande.
Para mostrar varias imagens neste sistema só precisa repetir essa ultima linha do código quantas vezes forem necessárias, por exemplo:
<a href="imagem em destaque" rel="lightbox" title="minha legenda">imagem ou texto</a>
<a href="imagem em destaque" rel="lightbox" title="minha legenda">imagem ou texto</a>
<a href="imagem em destaque" rel="lightbox" title="minha legenda">imagem ou texto</a>
.....
A parte inicial do código que não está aqui é porque não é necessário repeti-la, ela funcionará para todos eles não importa quantos sejam.
Para fazer o resto da tela ficar com uma cor mais escura usamos uma imagem semitransparente que está ao lado, mas se muitas pessoas usarem a mesma ela pode ser excluida por estar em uma hospedagem gratis, então sugerimos salvar e hospedar essa imagem e depois colocar o endereço dela neste trecho do código:#overlay{background-image: url(http://img534.imageshack.us/img534/6039/overlayo.png)
Claro que se desejar pode usar qualquer outra imagem para cobrir o restante da tela, isso é uma questão de gosto pessoal.
Nenhum comentário:
Postar um comentário