15 de nov. de 2012

Efeito LightBox em Fotos

Near
0
Essa dica permite exibir imagens em miniatura, abrir em zoom dentro da pagina, com um efeito super profissional, essa dica tanto serve para o blogger e Wordpress.org.
Atenção antes de colocar este efeito e bom saber que da conflito com o gadget de seguidores do blogger, portanto e bom não colocar os Seguidores no blog
Para colocar o efeito no seu blog siga as instrunções a seguir:

1° Adicionar no Wordpress.org ou abra o menu depois abra o modelo "Cabeçalho (header.php)
3° Se for no Blogger (Blogspot), vá ao menu "Layout", "Editar HTML"
2° E procure pela tag

</head>

Cole o trecho que segue:
<!-- JavaScript efeito Lightbox em fotos -->
<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'/>
<!-- JavaScript efeito Lightbox em fotos -->

4° E salva as modificações:
5° Agora vá na edição html da sua postagens e cole o código:
Se for usar uma miniatura da imagem:

<a href="URL_da_IMAGEM_ORIGINAL" rel="lightbox">
<img src="URL_da_IMAGEM_MINI" border="0"></a>

E altere onde esta escrito:
URL_da_IMAGEM_MINI: o endereço da mini imagem que vai aparecer na postagens.
URL_da_IMAGEM_ORIGINAL: por endereço da imagem grande que vai aparecer com efeito.

Se for usar um link texto:
<a href="URL_da_IMAGEM_ORIGINAL" rel="lightbox">Texto do Link</a>

URL_da_IMAGEM_ORIGINAL: pelo endereço da imagem que vai aparecer
Texto do Link pelo texto ou link quando clicar
PRONTO !

Nenhum comentário:

Postar um comentário