Como Fazer o efeito LightBox - Imagens em Destaque

O efeito Light Box é mais simples do que parece de ser colocado no blog, esse efeito faz que ao clicar numa imagem ela apareça sobre o pagina inteira do blog e cobrindo o restante da tela com um tom de cor mais escura. Vamos mostrar numa imagem para ficar mais fácil de entender.

1-Baixe o Codigo

Download-CH



Ou entao pegue o codigo logo abaixo

<style type="text/css"><br /><br /><!--<br /><br />#lightbox{background-color:#eee;padding: 10px;border: 2px solid #000000;}<br /><br />#lightboxCaption{font-size: 0.8em;padding-top: 0.4em;}<br /><br />#lightbox img{ border: none; }<br /><br />#overlay img{ border: none; }<br /><br />#overlay{background-image: url(http://img534.imageshack.us/img534/6039/overlayo.png);}<br /><br />* html #overlay{<br /><br />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");}<br /><br />--><br /><br /></style><br /><br /><script type="text/javascript" src="http://acessoriosparablogs.com.br/scripts/lightbox.js"></script><br /><br /><a href="<span class=">imagem em destaque</span>" rel="lightbox" title="<span class="destaque">minha legenda</span>"><span class="destaque">imagem ou texto</span></a>

2-Vai em adicionar widget>html/java scripit e cole o codigo e dite como abaixo





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 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.

By:Equipe CH