Lightbox GB
Um lightbox normalmente é um gerenciador de imagem em CSS que permite a imagem abrir na tela sem precisar carrega uma nova pagina, facilita a organização das janelas e deixa o ambiente navegável com uma cara moderna.
Com um pouco de CSS, HTMl e JavaSCRIPT eu fiz o meu próprio lightbox.
Pronto para começar a instalação?
Então, vamos lá.
Para começar, vá no painel do seu blog, selecione Layout > Editar HTML e faça um becape do seu template. Ainda nessa página, cole o código abaixo antes de </head> (aperte CTRL+F para encontrar).
Quando quiser acionar o lightbox por um link por exemplo:
É isso. Se ficou alguma dúvida, encontrou algum erro, deixe um comentário.
P.S.: Para ver o script em ação, clique aqui
Com um pouco de CSS, HTMl e JavaSCRIPT eu fiz o meu próprio lightbox.
Pronto para começar a instalação?
Então, vamos lá.
Para começar, vá no painel do seu blog, selecione Layout > Editar HTML e faça um becape do seu template. Ainda nessa página, cole o código abaixo antes de </head> (aperte CTRL+F para encontrar).
<LINK REL="stylesheet" TYPE="text/css" HREF="http://guiab.webs.com/css/lightbox.css"/>
<script src="http://guiab.webs.com/scripts/lightbox.js"></script>
Depois, cole o código abaixo antes de </body>.<script src="http://guiab.webs.com/scripts/lightbox.js"></script>
<!-- Início do Lightbox -->
<div id="lightbox" onContextMenu="return false">
<center>
<div id="between" class="dragme">
<div id="content">
<img src='load.gif'/>
</div>
<h6>Lightbox by <a href="http://guiab.blogspot.com/" target="_blank">Guia Blogger</a></h6>
</div>
</div>
</center>
</div>
<!-- Fim do Lightbox -->
Visualiza para ver se há erros, depois salve.<div id="lightbox" onContextMenu="return false">
<center>
<div id="between" class="dragme">
<div id="content">
<img src='load.gif'/>
</div>
<h6>Lightbox by <a href="http://guiab.blogspot.com/" target="_blank">Guia Blogger</a></h6>
</div>
</div>
</center>
</div>
<!-- Fim do Lightbox -->
Quando quiser acionar o lightbox por um link por exemplo:
<a href="LINK QUE DEVE SER ABERTO PELA LIGHTBOX" onClick="Set_lightbox(this.href,'ALTURA DA CAIXA','LARGURA DA CAIXA','')" >NOME DO SEU LINK</A>
As partes em negrito devem ser alteradas de acordo com a sua necessidade.É isso. Se ficou alguma dúvida, encontrou algum erro, deixe um comentário.
P.S.: Para ver o script em ação, clique aqui
Acho que no Chrome não funcionou...
ResponderExcluirForte abraço
@Seu Noca, no meu funcionou. Eu vou testar no CHROME de outros computadores e ver se dá erro.
ResponderExcluirAbraço
no meu deu erro :((
ResponderExcluirFalaí!
ResponderExcluirLegal, mas precisa corrigir umas ideias aqui do seu blog.
Essa já é a segunda que não funciona!
Eu fiz um site hospedado no Blogger onde fiz funcionar o Light Box. Ainda estou editando o CSS, mas já tá lá.
www.imwarturalvim.com.br
É só dar uma pesquisadinha na web que você encontra uns toques que funcionam!
Flws...