3
2007
Lightbox JS explicado em português
An article by 
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;
background-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
33 Comments + Add Comment
Leave a comment
Advertisement
Seguidores
614
899
246
1759
Newsletter
Subscreve as feeds
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
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/
[...] script que permite ver conteúdo multimédia em popup sem sair do site. Muito á semelhança do Lightbox mas com mais capacidade. Enquanto o lightbox permite apenas ver imagens o ShadowBox permite ver [...]
muito bom cara
parabens
cara, eu tenho que subir o arquivo zipado pro header?? Vou tentando aqui…
Valeu
ola, muito legal o ligthbox, porem queria saber se tem como abrir um arquivo em vez de uma imagem estilo um iframe …
valeu.
coom faço para usar com varias imagens??
Ótima tradução para PT. Faz uma tradução do Lightbox JS versão avançada (com prev e next).
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!
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>
Existe algum plugin que faça o mesmo que o lighbox faz com as imagens mas com arquivos PDF , DOC, XLS, ETC?
Sim, penso que o Shadowbox serve para o efeito:
http://wordpress.org/extend/plugins/shadowbox-js/faq/
pega a versão 2.0
meu unico problema é que ao abrir a foto ela nao abre na tela. .somente mais embaixo.
[...] Planetozh compilou uma lista de clones do Lightbox. Lightbox é um script de visualização de imagens bastante popular mas que neste momento se encontra [...]
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.
Caracas meu. Ninguém me responde. O que tá pegando?
Em Setembro publico algo sobre a lightbox v2
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
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?
Valeu hein, me ajudou muito
Depois eu te mostro o resultado
Abração
usa o lightbox da versão do jquery ele ja vem com next tambem e sem contar que e tão facil quanto esse!
Queria por um pequeno logotipo em todas as imagens do lightbox. Tem como ?
alguem poderia me explicar como fazer esses icones quadradinhos (tem ali em cima) com esse efeito legal, que passa o mouse e sobe?
respondeee POR FAVOR!
É um plugin para wordpress chamado sexy bookmarks
gostaria de saber como colocar a legenda da imagen na foto
ou onde tem o contadode de arquivos
Estou fazendo este exemplo em PHP, com o template Smarty.
O que ocorre é que quando clico em cima da figura, ela não abre em popup, e sim no final da página.
Alguem sabe como arrumar isso? É um problema do Smarty?
Para que apareça o NEXT e PREVIUS como alguns acima pediram, é bem simples: adicione [roadtrip] ao final do comando.
Ou seja: :hum:
este é o comando, rel=”lightbox”
vai ficar assim: rel=”lightbox[roadtrip]”
lembrando que tem q haver mais de uma foto no projeto.
E para mudar o nome NEXT e PREVIUS para português, ou seja, PROXIMO e VOLTAR, abra o arquivo no fireworks e o edite.
Só isso, abraços
muito boa essa tua dica.. e simples parabens..
Legal o post !
porém, estou com o mesmo problema que duas pessoas postaram.
Ao clicar na imagem ao invés de aparecer o efeito a imagem abre no fim
da pagina.
Alguém sabe o que fazer ?
Abraços…
Estou desenvolvendo um site e em baixo tem a galeria com as fotinhas pequenas e quero colocar o next e o back como se coloca em flash, mas quero em jquery o cliente que pediu por que ae os visitantes podem escolher qual foto abrir exemplo: <>
muito bom o tutorial. Mas eu tenho um problema que nao consegui resolver ainda. Tenho um projeto de um site e estou usando o lightbox, mas na pagina de produtos eu tenho uma foto do produto, a descriçao e logo abaixo um botão “Veja Mais’ onde eu gostaria que ao ser clicado o efeito lightbox apresentasse outras imagens desse mesmo produto em angulos diferentes, ou seja eu tenho o produto A com uma galeria o produto B com outra mas que o botao ” Veja Mais” chamasse o efeito lightbox.
Para que não restem dúvidas quanto ao NEXT e ao PREV eu explico o resto =D
Para abrir uma foto em lightbox usam rel=”lightbox”, mas isto não chega para abrir uma sequência de fotos ou álbum. Para isso têm de indexar as fotos que querem abrir no mesmo álbum. Assim: rel=”lightbox[nome_do_album]” em que nome_do_album pode ser qualquer coisa.
Todas as fotos do mesmo álbum, na mesma página, vão abrir num “set” de fotos e o lightbox activa automaticamente as setas NEXT e PREV.
Hope it helps =)
Em qual parte do arquivo eu insiro as imagens que eu quero que apareça no lightbox? Pode me enviar um arquivo onde tenha inserido o lightbox? Agradeço.