Lightbox JS explicado em português
Este tutorial tem base no próprio site do criador do Lightbox JS é praticamente uma tradução do seu conteúdo para ajudar quem não se dá muito bem com inglês.
Benefícios
Sobrepõe imagens á página corrente e não dentro da página. Isto faz com que as imagens não sejam limitadas por um layout. Exemplo é uma imagem que sai fora do layout por ter uma largura maior.
Mantem os utilizadores na mesma página em vez de os levar para outra para terem de ver a imagem em ponto maior. Clicam para visualizar a imagem e clicam de novo para a fechar em vez de terem de voltar á página ou carregar no botão return.
Como utilizar:
- Incluir o script lightbox.js no header da página.
<script type="text/javascript" src="lightbox.js"></script>
- Adicionar o atributo rel=”lightbox” a qualquer link para activar a lightbox nesse link. Por exemplo:
<a href="imagem.jpg" rel="lightbox" title="minha legenda">image #1</a>Opcional: Usar o atributo title se pretenderem dar uma legenda á imagem.
Agora vem a parte divertida
Como personalizar
- Podem utilizar CSS para adaptar as imagens ao vosso layout.
#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#lightboxCaption{
font-size: 0.8em;
padding-top: 0.4em;
}
#lightbox img{ border: none; }
#overlay img{ border: none; } - Para criarem o efeito de sombra que sobrepõe a página, que fica por detrás da imagem, vão precisar de uma imagem. Neste caso vamos utilizar uma imagem PNG e mais algum CSS mas não deverá causar problemas no IE.
#overlay{
background-image: url(overlay.png);
}* html #overlay{
background-color: #000;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
}
- Se pretenderem colocar uma imagem de loading, têm de especificar a sua localização no topo do ficheiro lightbox.js.
var loadingImage = 'loading.gif';
DOWNLOADS
- lightbox.js - O script
- lightbox.css - O estilo básico com o suporte PNG para o Internet Explorer.
- overlay.png - 80% opacidade, padrão escuro utilizado para criar o efeito de sombra sobre a página
- loading.gif - Imagem de barra de progressão
Site Oficial: Lightbox v2
Ana Flávia
January 29, 2008
Boa tarde tudo bem?
Estou usando o lightbox em um website que estou fazendo. Tudo funcionou perfeitamente, a única coisa que nao estou conseguindo fazer é qdo abre a imagem grande (como se fosse a popup) por cima do website, gostaria que tivesse a opção de next, como já vi em outros websites que usam lightbox, para nao ter que ficar fechando e ter que clicar na próxima. Gostaria de habilitar esta opção caso o usuário queria ir dando next sem ter que fechar esta janela. Vc poderia me ajudar ou dar uma luz. Já pesquisei em varios lugares, mas não encontrei a solução para isso.
Desde já agradeço!
Ana Flávia
Mario Andrade
January 29, 2008
O lightbox usado neste artigo é a versão1. Existe a versão 2 que já vem com os botoes previous e next.
Pode ser encontrada aqui:
http://www.huddletogether.com/projects/lightbox2/
Alison
February 22, 2008
muito bom cara
parabens
Diego Matias
March 8, 2008
cara, eu tenho que subir o arquivo zipado pro header?? Vou tentando aqui…
Valeu :wink:
diego
May 26, 2008
ola, muito legal o ligthbox, porem queria saber se tem como abrir um arquivo em vez de uma imagem estilo um iframe …
valeu.
Richard
June 2, 2008
coom faço para usar com varias imagens??
Web Designer Demétrios
June 3, 2008
Ótima tradução para PT. Faz uma tradução do Lightbox JS versão avançada (com prev e next).
Islene
June 4, 2008
Olá…
cheguei ao tutorial através do google e achei legal, só queria te fazer uma pergunta… pra onde tenho q mandar o arquivo lightbox.js - O script??? Só to com dúvidas ai. Obrigada!
Mario Andrade
June 4, 2008
Colocas a onde quiseres desde que depois indiques o caminho quando chamares o script.
No primeiro passo está indicado como chamar o script. Nesse caso o lightbox.js está na mesma pasta onde está a página mas se estiver dentro de outra página é so indicar o caminho:
<script type=”text/javascript” src=”scripts/lightbox.js”></script>
Morgan
June 5, 2008
Existe algum plugin que faça o mesmo que o lighbox faz com as imagens mas com arquivos PDF , DOC, XLS, ETC?
Mario Andrade
June 5, 2008
Sim, penso que o Shadowbox serve para o efeito:
http://wordpress.org/extend/plugins/shadowbox-js/faq/
Richard
June 25, 2008
pega a versão 2.0
meu unico problema é que ao abrir a foto ela nao abre na tela. .somente mais embaixo.
Thiago
August 8, 2008
Olá, muito bacana a tradução e as dicas principalmente da v2.
Estou usando ela e não estão aparecendo os botões de next e previous. O que será que está acontecendo? Se puder me ajudar… Muito obrigado.
Grande abraço.
Thiago
August 25, 2008
Caracas meu. Ninguém me responde. O que tá pegando?
Mario Andrade
August 25, 2008
Em Setembro publico algo sobre a lightbox v2
SC
January 9, 2009
andava para implementar isto num site à uns tempos, mas com a preguiça, ainda não o tinha feito, agora com a explicação em português já não tenho desculpa
obrigado
Thiago Senna
April 30, 2009
Bom dia, parabéns pelo tutorial. Estava precisando de algo no estilo de uma lightbox para abrir arquivos pdf, doc, etc… perguntaram isso acima e voce respondeu
P: Existe algum plugin que faça o mesmo que o lighbox faz com as imagens mas com arquivos PDF , DOC, XLS, ETC?
R: Sim, penso que o Shadowbox serve para o efeito:
http://wordpress.org/extend/plugins/shadowbox-js/faq/
Acessei o faq e nao encontrei nada sobre, pode dar uma ajuda de como fazer?
Diego Monge
June 8, 2009
Valeu hein, me ajudou muito
Depois eu te mostro o resultado
Abração