terça-feira, 4 de outubro de 2011

Lightbox no seu blog - Pirobox

O efeito lightbox pode ser uma boa opção para você quer quer deixar seu blog diferenciando quando o assunto é visualizações de imagens, vídeos, arquivos em flash e até mesmo a abertura de outros sites dentro da sua página. E nesta pequena aula estarei mostrando como colocar este efeito muito bacana em seu blog.

Pirebox

Clique aqui e veja os exemplos

Estaremos usando códigos pronto em jQuary oferecido pelo site PIROLAB. Este sistema foi muito bem elaborado, apresenta-se no aspecto preto, deixando sua página mais moderna, profissional e interativa. O lightbox Pirobox além de possibilitar a visualização de imagens de uma forma mais agradável, possibilita também a visualizações de vídeos do youtube, de links e arquivos em swf (flash).

Então se você gostou da idéia de adquirir este recurso, vamos ver agora como colocar o sistema no seu blog e utilizar umas das opções citadas para ser visualizada no lightbox pirobox.

1. Primeiro de tudo, acesse o Editar HTML do seu blog e procure por </head>.

2. Antes dessa tag cole o código abaixo:

<link rel="stylesheet" type="text/css" href="http://www.pirolab.it/pirobox/css_pirobox/style_1/style.css"/>
<!--::: OR :::-->
<link rel="stylesheet" type="text/css" href="http://www.pirolab.it/pirobox/css_pirobox/style_2/style.css"/>
<!--::: it depends on which style you choose :::-->
<script type="text/javascript" src="http://www.pirolab.it/pirobox/js/jquery.min.js"></script>
<script type="text/javascript" src="http://www.pirolab.it/pirobox/js/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript" src="http://www.pirolab.it/pirobox/js/pirobox_extended.js"></script>
<!-- or use minified version  "pirobox_extended_min.js"  -->
<script type="text/javascript">
$(document).ready(function() {
    $().piroBox_ext({
        piro_speed : 900,
        bg_alpha : 0.7,
        piro_scroll : true //pirobox always positioned at the center of the page
    });
});
</script>

 

Obs. Para evitar a perda dos scripts, evitando o funcionamento do lightbox, baixe os códigos destacado em negrito no seu computador. Para baixar, apenas clique nos links dos códigos, copie o código, cole no notepad do windows e salve na extensão conforme mostra no código. em seguida hospede-os em seu servidor e por fim, substitua o link do mesmo no código.

3. Pronto, o código está instalado em seu blog, agora vamos ver as diferentes formas de usá-lo. Você pode estar usando esses códigos numa postagem ou até mesmo como um novo gadget HTML/Javascript. Sendo assim, veja abaixo os códigos para abrir a lightbox. Não se esqueça de ver as partes destacadas para fazer a modificação.

Link para imagem

<a href="URL DA IMAGEM" rel="gallery" title="DESCRIÇÃO" class="pirobox_gall1">TÍTULO</a>

Vídeo

<a href="URL DO VÍDEO"
rel="iframe-640-505" class="pirobox_gall1">TÍTULO</a>

Abrir Site


<a href="URL DO SITE" rel="iframe-full-full"
class="pirobox_gall1" >TÍTULO</a>

Arquivos em Flash


<a href="URL DO SWF" rel="iframe-900-350" class="pirobox_gall1" >TÍTULO</a>

Galeria de imagens com miniatura

<a href="URL DA IMAGEM" rel="gallery"  class="pirobox_gall" title="DESCRIÇÃO DA IMAGEM"><img src="URL DA MINIATURA DA IMAGEM"/></a>
<a href="URL DA IMAGEM" rel="gallery"  class="pirobox_gall" title="DESCRIÇÃO DA IMAGEM"><img src="URL DA MINIATURA DA IMAGEM"/></a>
<a href="URL DA IMAGEM" rel="gallery"  class="pirobox_gall" title="DESCRIÇÃO DA IMAGEM"><img src="URL DA MINIATURA DA IMAGEM"/></a> 

Obs. Para adicionar mais fotos na galeria, copie o código destacado em negrito acima, e cole abaixo do mesmo, fazendo as devidas alterações.

Então é isso ai pessoal, espero que tenha curtido a dica. E por favor, deixe seu comentário! Dê +1 e até mais!

Marcadores: , , , ,

7 Comentários:

Às 5 de outubro de 2011 13:59 , Blogger Iglotec.com disse...

Sim pois e no meu blog não prestou por que o jQuary entra em conflito o jeito mesmo e tirar o codico e nao botar nenhuma mais cara esta opção e boa mais que pena que não funcionou no meu blog acho que deve ser por causa dos slide e o menu.

 
Às 5 de outubro de 2011 16:58 , Blogger Holtz disse...

Tem como por automatico em todas as imagens?

 
Às 7 de outubro de 2011 11:34 , Blogger Holtz disse...

Tem??

 
Às 9 de outubro de 2011 22:15 , Blogger Códigos Blogger disse...

Com esse código não.

 
Às 4 de dezembro de 2011 06:34 , Blogger Bmalloy disse...

desisto fiz tudo sertim e nao funciona ,,,, no iapsetubal.blogspot.com nao funciona mas no www.dowmalloy.com funciona ???????

 
Às 5 de dezembro de 2011 13:59 , Blogger Códigos Blogger disse...

Creio que no iapsetubal deve ter algum scrept que está causando um conflito com o script do pirobox. Mas não sei lhe informar que script é esse.

 
Às 7 de novembro de 2015 12:58 , Blogger Hsoplay Filmes disse...

Amigo o código funcionou em meu blog, estou utilizando com videos, mais quando clico no botão para o video ocupar a tela inteira não funciona o video continua do tamanho especificado no código, como faço para corrigir este erro?

 

Postar um comentário

Se você gostou deste artigo deixe um comentário!

Duvidas ou sugestões comentem aqui! =D
*Não insultar autor ou leitores da postagens
*Não pedir parceria por comentários
*Não publicar spam ou similar.

Assinar Postar comentários [Atom]

Links para esta postagem:

Criar um link

<< Página inicial