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: , , , ,