Olá, vamos aprender hoje como utilizar o famoso script lightbox para ampliar as imagens.
Para quem não sabe o que é lightbox:
É um script que 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. A vantagem é que não precisar ser aberta em outra página ou popup ela é ampliada ali mesmo, com um clique para ampliar e um clique para “desampliar”.
Para visualizar o exemplo, clique aqui.
Para fazer o download do arquivo, clique aqui.
1º Passo – Instalação
1. Incluir três arquivos Javascript no cabeçalho de sua página:
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
2. Incluir o CSS no cabeçalho de sua página:
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
3. Verifique se as imagens do CSS estão com os caminhos corretos.
2º Passo – Ativação
1. Para ampliar uma imagem basta adicionar um rel = "lightbox" na tag do link que irá ampliar a imagem. Exemplo:
<a href="images/image-1.jpg" rel="lightbox" title="Legenda da imagem">ampliar</a>
2. Usar a tag “title” no link é opcional, ela serve como legenda da imagem.
3. Se você pretende agrupar algumas imagens como se fossem galerias basta adicionar rel="lightbox[nome_do_grupo]” na tag do link que irá ampliar cada imagem. Exemplo:
<a href="images/image-1.jpg" rel="lightbox[galeria]" title="Legenda 1">ampliar 1</a>
<a href="images/image-2.jpg" rel="lightbox[galeria]" title="Legenda 2">ampliar 2</a>
<a href="images/image-3.jpg" rel="lightbox[galeria]" title="Legenda 3">ampliar 3</a>
Esse exemplo é muito útil quando precisamos montar uma galeria com navegação “próxima” e “anterior”. Assim conseguimos ir navegando de imagem em imagem sem precisar fechar o lightbox.
05 de fevereiro de 2009 às 09:36
Heheh…:)
Bom artigo!
Abraço!
23 de junho de 2009 às 11:19
Felipe, você já usou alguma vez o lightbox na página principal do site, por exemplo para substituir um banner e chamar mais atenção? Se sim, poderia compartilhar o código de como chamar na carga do site uma imagem com lightbox?
obrigado
Rafael
25 de junho de 2009 às 10:28
Rafael Roberto,
Mas daria pra você fazer isso mais simples só com CSS, vcoê coloca um div alinhado em cima de TUDO e nesse div tem o banner.
Para fechar é só você fazer um js que dê display: none.
abs,
Felipe
27 de junho de 2009 às 10:59
Oi Felipe, fiquei com uma dúvida no passo 3 da "Ativação": eu coloco o nome do grupo em rel="lightbox" mas eu tenho que colocar esse "nome do grupo" em outro lugar antes, no CSS por exemplo?
Obrigada!
27 de junho de 2009 às 14:46
Daniela,
Não precisa ter ter o nome do grupo no CSS.
abs,
Felipe
22 de julho de 2009 às 21:29
olá, gostei muito deste tutorial, mas me surgiu uma duvida, teria como aumentar o tamanho da imagem ? Para que esta abra em tamanho maior …?
29 de julho de 2009 às 12:20
Oi. Estou fazendo um site para um amigo e tenho procurado por um script de onde ao clicar na imagem, pudesse aparecer a imagem ampliada ao lado, em baixo ou outro local que quisessemos. Já encontrei um em que ao passar por cima ela amplia no mesmo local. O vosso é o que se aproxima mais do que desejo. Conhece algum script para o que pretendo.
Obrigado.
14 de agosto de 2009 às 16:44
Olá, eu usei exatamente este codigo em um site, para imagens, e na mesma pagina que estão as imagens eu gostaria de fazer um link assim como os da imagens só que para abrir um formulario de contato no lightbox, e não estou conseguindo, ja tentei diversas maneiras, ainda sou inciante nesse tipo de programação, talvez por isso não esteja conseguindo, por favor vc poderia me ajudar?
24 de outubro de 2009 às 19:55
Minha página é de frames. Inserí o light box numa página linkada. Ela aparece no frame principal(MainFRame)e o link que a chama está no TopFrame. Quando se clica nas imagens elas abrem apenas no Main Frame.Não tem um jeito delas abrirem full? Na tela toda sem ser dentro do frame?
25 de outubro de 2009 às 22:31
Juscelino,
Não rola pq o lightbox é executado dentro do iframe.
O único jeito seria não usando iframe..
abs,
Felipe
27 de novembro de 2009 às 21:48
Olá amigo, fiz um blog hospedado no blogspot com o lightbox e ficou perfeito até eu colocar um dominio proprio e o lightbox parar de funcionar, será que pode me ajudar?
30 de novembro de 2009 às 10:04
Ivan,
Pode me passar o link para eu dar uma olhada?
Provavelmente deve estar com o caminho errado, pq isso é JavaScript, funciona em qualquer lugar.
abs,
Felipe
12 de dezembro de 2009 às 14:29
Muito bom esse artigo, continue assim.
28 de dezembro de 2009 às 22:16
Olá Felipe!
Eu posso chamar a função que gera o lightbox direto do javascript ou eu necessariamente preciso chamá-la no formato de parâmetro da tag html?
Grato desde já!
Abraço!
05 de janeiro de 2010 às 16:23
Paulo,
Eu sempre utilizo chamando via tag HTML.
Abs,
Felipe
20 de fevereiro de 2010 às 16:30
Oi Felipe.
Essa do Lightbox foi realmente o que eu estava procurando. Valeu mesmo.
Porém, me sobreveio uma dúvida. Se eu quiser separar as imagens da galleria em uma pasta dierente da images onde ficam prevlabel.gif, nextlabel.gif, loading.gif e closelabel.gif tem como ou cada galeria que eu fizer vai trabalhar com uma pasta images própria e única para todas as imagens de sua galeria.
Parabéns pelo trabalho, muito obrigado e um grande abraço.
02 de março de 2010 às 09:42
Venâncio,
As imagesn você pode colocar no diretório que quiser, basta mudar o caminho.
Exemplo:
ampliar 1
03 de março de 2010 às 10:31
Parabéns pelas dicas! Bem estou precisando de um efeito que vi no link: http://notebook.pontofrio.com.br/Notebook-CCE-ILP-432-c-Intel-Dual-Core-T4200-4GB-320GB-LCD-141-HDMI-Wireless-e-Linux-30870.html?Filtro=C56, onde a partir de uma imagem abra-se uma janela com as outras imagens, como nesse link! tem como vocês me ajudar? É este script que você está mostrando só que o inverso, de uma para várias, como no link acima. Obrigado.
22 de abril de 2010 às 13:22
Olá, primeiramente parabens pelo post…
Estou com um pequeno problema…fiz o layout da página em abas com Jquery e tentei colocar as imagens com o efeito lightbox no conteudo das abas, mas o efeito não funciona…se faço coloco as fotos fora das abas funciona, oque mostra que instalei o lightbox corretamente. Sabe me dizer oque esta acontecendo e como poderia resolver isto?
Obrigado.
22 de abril de 2010 às 13:33
André,
Pode me passar o link para eu dar uma olhada?
Abs,
Felipe Oliveira
24 de abril de 2010 às 16:43
Olá
Instalei no meu site e funcionou tudo legal. Entretanto, ocorre o seguinte, a página é grande e as imagens ficam no meio dela e nem sempre as pessoas percebem que abriu a janela com a imagem ampliada.
Voce saberia me informar como faço para manter a abertura das janelas sempre no incio da pagina?
Desde ja te agradeço
Artur
25 de abril de 2010 às 13:13
Artur,
O lightbox é feito para abrir sempre no meio da página independente de onde para a rolagem, ou seja, quando o cara clica na foto para ampliar ela vai abrir no centro da página. Isso facilita o usuário visualizar a abertura da foto.
Se ela abrisse no início da página seria ruim pq o link na foto poderia estar no rodapé e isso sim faria com que ele não visse a foto ampliada.
Abs,
Felipe
06 de junho de 2010 às 13:46
Como faço para aumentar o div? quero além da imagem mostrar informações do produto…atraves do codigo q passei no link eu consigo fazer isso?
obrigada
07 de junho de 2010 às 07:56
Kézia,
Para aumentar o div é necessário apenas mudar o CSS.
Abs,
Felipe
21 de setembro de 2010 às 22:54
Felipe, valeu pela dica mais quando tento visualizar no IE ele não funciona. tem algum cod extra?
25 de março de 2011 às 14:19
Amigo Gostei muito de sua explicação, do efeito lightbox, mas gostaria de umas informações.
onde mudo para que a foto que vai ser ampliada esteja maior na pagina.
outra pergunta como tiro o qudro lilás ao torno dela, se for no css em qual linha?
29 de março de 2011 às 13:10
Olá Felipe…
Gostei muito do exemplo, só que tem um problema.
No site que estou montando tem um menu em JQuery, o LightBox só funciona se eu tiro o efeito do menu, o arquivo que chama o jquery.js.
O que devo fazer para funcionar os dois?
25 de agosto de 2011 às 17:19
ola, gostaria de fazer esse efeito em um banner de promoção, logo q o cliente entrasse a página inicial, puxasse o banner ( Lightbox )..tem como fazer isso???
o site é em PHP.
28 de novembro de 2011 às 15:36
Felipe, estou com um probleminha, ela funcionou perfeitamente porem ela entra em conflito com um outro script. que uso no Menu. Você poderia me dar uma ajuda?
o Script é esse:
Se eu tiro o script ele funciona porem o menu para.
08 de janeiro de 2012 às 15:59
bom, em primeiro lugar quero ressaltar que sou uma eterna aprendiz…
E estou com um problema em LightBox, pois configurei o mesmo no meu site e na página principal tem uma dentro desta tenho detalhes dos produtos como nome, preço e também dois links de produtos um é para abrir a imagem do mesmo em lightbox e outro é para um link para o carrinho de compras, no primeiro eu quero que tenha este lightBox e no segundo eu não quero pois é um link de “continuar comprando” do carrinho de compras, o problema é que os dois estão ficando em lightbox.
Não sei se deve ser feita alteração se é em CSS e como fazê-la, ou também não sei se devo alterar o javascript das funções do lightBox para desabilitá-lo no segundo link.
Então venho aqui pedir socorro aos universitários…
Na minha index tem as funções do lightBox:
$(function() {
$(‘#lista a’).lightBox();
});
$(function() {
$(‘#lista-heart a’).lightBox();
});
$(function() {
$(‘#local a’).lightBox();
});
e na listagem do produto tenho:
“.$prod["nomeProd"].”
R$ “.$prod["preco"].”
Adicionar ao Carrinho
Você pode me ajudar?
deusadru@gmail.com
Agradeço desde já