efeito galeria

nesse breve tutorial irei explicar colo colocar um efeito bem legal como esse ....




isso é feito através de um efeito chamado LightBox


este é um serviço “open source” (código aberto) e gratuito. Esse é o site oficial com todos os detalhes e formas de uso:
http://www.huddletogether.com/projects/lightbox2/


Como criar o efeito LightBox no Blog

A primeira coisa a fazer é abrir o código-fonte de seu blog.

Passo 1: O JavaScript.

Se for no WordPress.org, abra o menu “Aparência” ~> “Editor” e abra o modelo “Cabeçalho (header.php)”.

Procure pela linha ““. Imediatamente ACIMA dela, cole o seguinte trecho de código.

Se for no Blogger (Blogspot), vá ao menu “Layout” ~> “Editar HTML” então procure a linha “” e imediatamente ACIMA, cole o trecho que segue:

<link href="http://www.ferramentasblog.com.br/imagens/lightbox/css/lightbox.css" media="screen" rel="stylesheet" type="text/css">

<script src="http://www.ferramentasblog.com.br/imagens/lightbox/js/prototype.js" type="text/javascript">

<script src='http://www.ferramentasblog.com.br/imagens/lightbox/js/scriptaculous.js?load=effects,builder' type='text/javascript'/>

<script src='http://www.ferramentasblog.com.br/imagens/lightbox/js/lightbox.js' type='text/javascript'/>


<script type=text/javascript src="http://www.ferramentasblog.com.br/imagens/lightbox/js/prototype.js">
<script src='http://www.ferramentasblog.com.br/imagens/lightbox/js/scriptaculous.js?load=effects,builder' type='text/javascript'/>
<script src='http://www.ferramentasblog.com.br/imagens/lightbox/js/lightbox.js' type='text/javascript'/>

Salve sem modificar nada nesse código.

Agora vem a parte mais complicada. É preciso hospedar as imagens em algum lugar ou usar imagens que já estejam hospedadas. O problema é que não funciona se a imagem estiver no PicasaWeb (padrão do Blogger) – não sei o motivo disso.

Se você usa o WordPress.org, pode simplesmente usar as imagens em sua hospedagem normalmente. Se você usa o Blogger (Blogspot) terá que arrumar um local para armazená-las.

Passo 2: Como inserir no Blog

Em qualquer lugar de seu blog, seja dentro de um post ou até na sidebar (barra lateral), use o seguinte código para fazer funcionar o LightBox:

Se for usar uma miniatura da imagem:

<a href="URL_da_IMAGEM_ORIGINAL" rel="lightbox">

<img src="URL_da_IMAGEM_MINI" border="0">

</a>

Então altere apenas onde está marcado de vermelho. Nesse caso você pode usar duas imagens, sendo uma a original e a outra uma miniatura que será exibida como opção de clique. Você também pode simplesmente redimensionar a original.

Se for usar um link texto:

<a href="URL_da_IMAGEM_ORIGINAL" rel="lightbox">Texto do Link</a>

Coloque a URL de endereço da imagem no tamanho original onde está de vermelho. E onde está azul, escreva o texto para clicar e exibir a imagem.

O que mostramos aqui no passo 2 é exatamente o código HTML para adicionar imagens em qualquer lugar de seu blog ou site. Para que o LightBox funcione, inserimos um trecho “REL” que busca a função a ser executada no JavaScript.

Este Tutorial foi um tutorial pré-editado de

http://www.ferramentasblog.com/2010/03/efeito-lightbox-para-imagens-no-blog.html

Qual quelquer dúvida postem um comentário...

^ ^