Implementei mais uma funcionalidade interessante no meu blog, a funcionalidade Lightbox.
Essa funcionalidade permite a abertura das imagens em tamanho real sem a utilização dos pop-ups e/ou novas janelas. O Lightbox cria uma camada sobre o site e resgata, por AJAX, a imagem no tamanho real. Isso é muito interessante pois nos facilita a visualização de imagens maiores, que não caberiam no espaço destinado ao post, sem ter que abri-la em nova janela. Todos os créditos para o Lokesh Dhakar .
Imagens Simples
Imagens em Grupo
 |
 |
 |
 |
Clique nas imagens e veja como o LightBox funciona.
As dicas abaixo funcionam e foram testadas para a versão LightBox 2.02 em 02/03/2007.
Como implementar no seu site:
Onde baixar os arquivos
Primeiro de tudo, você deve baixar os arquivos JavaScript, Imagens e CSS no site do criador. Segue o link abaixo:
http://lokeshdhakar.com/projects/lightbox2/
Provavelmente terá um link para um arquivo compactado (.ZIP). Esse arquivo compactado possui as seguintes pastas: css, images, js.
Sugiro extrair essas três pastas para a raiz do seu site, para facilitar na hora de referenciar esses arquivos. No meu caso, defini como raiz do site o endereço https://www.brunocunha.com/blog , portanto, coloquei estas pastas abaixo da pasta blog.
Parte 1 – Instalação
1 – O Lightbox usa três arquivos JavaScript para criar essa mágica na hora de exibição das imagens. É necessário acrescentar na sua página as três referências JavaScript abaixo, entre as tags <head> e </head> do HTML.
<script type=”text/javascript” src=”js/prototype.js”></script>
<script type=”text/javascript” src=”js/scriptaculous.js?load=effects”></script>
<script type=”text/javascript” src=”js/lightbox.js”></script>
Tenha um cuidado especial com essa referência. Tenha certeza de que o caminho para o arquivo js esteja correto. Se seguir a minha dica de extrair para a raiz do site, isso vai facilitar nesse ponto.
2 – Você deve fazer uma referência ao CSS do LightBox, que está na pasta css que você acabou de extrair. Outra possibilidade é copiar as classes css do LightBox e colocá-las no arquivo CSS do seu site, caso você já tenha um. Acho até melhor fazer assim. Fica tudo num arquivo só, mais organizado. Caso queira fazer a referência ao arquivo mesmo, acrescente o código abaixo entre as tags <head> e </head> do HTML.
<link rel=”stylesheet” href=”css/lightbox.css” type=”text/css” media=”screen” />
Tenha um cuidado especial com essa referência. Tenha certeza de que o caminho para o arquivo css esteja correto.
3 – Tanto o JavaScript quanto o CSS possuem referências à essas imagens que deverão ser verificadas.
CSS – Abra o arquivo css que contém as classes do LightBox e procure pelas imagens prevlabel.gif e nextlabel.gif. Coloque o caminho correto para elas. Veja abaixo a dica de caminho relativo para você poder apontar corretamente para essas imagens.
JS – Abra o arquivo lightbox.js, procure pelas imagens loading.gif e closelabel.gif e coloque o caminho correto para elas. Mesma coisa, aplique a dica sobre o caminho relativo.
Dica: Caminho Relativo x Caminho Absoluto
Sugiro, nesse ponto, que você coloque um caminho relativo, mas partindo da raiz do seu site. Como assim né!? Caminho relativo é suprimir o domínio e partindo da raiz do site é colocar a “/” (barra), antes das pastas.
Exemplo:
Meu domínio : www.brunocuha.com
Meu blog : www.brunocuha.com/blog
Imagens do LightBox : www.brunocuha.com/blog/images
JavaScript do LightBox : www.brunocuha.com/blog/js
CSS do LightBox : www.brunocuha.com/blog/css
Todos os caminhos acima são caminhos absolutos, pois eu coloco o domínio na frente de todas as pastas. Para referenciar por caminho relativo, simplesmente suprimo o domínio e coloco a “/” na frente da pasta:
Meu domínio : www.brunocuha.com
Meu blog : /blog
Imagens do LightBox : /blog/images
JavaScript do LightBox : /blog/js
CSS do LightBox : /blog/css
Assim tenho a referência correta independente do domínio.
Pronto, acabamos de configurar o LightBox para trabalhar por você. Agora vamos aprender a habilitar ele em suas imagens
Parte 2 – Ativando
1 – Adicione o atributo rel=”lightbox” em todos os links para imagens que você deseja que o LightBox atue. Exemplo:
<a href=”images/image-1.jpg” rel=”lightbox” title=”my caption”>image #1</a>
Opcional: use o atributo title se você quiser adicionar um título à sua imagem.
2 – Se você possui um grupo de imagens e gostaria de exibi-las como um álbum, com a possibilidade de avançar e voltar, proceda como no passo anterior, mas acrescente um nome de conjunto para essas imagens. Exemplo:
<a href=”images/image-1.jpg” rel=”lightbox[roadtrip]”>image #1</a>
<a href=”images/image-2.jpg” rel=”lightbox[roadtrip]”>image #2</a>
<a href=”images/image-3.jpg” rel=”lightbox[roadtrip]”>image #3</a>
Não existe limite para a quantidade de imagens que você pode agrupar.
Se você utiliza o WordPress como gerenciador do seu blog, baixe e instale o Lightbox 2 WordPress Plugin. Fica bem mais fácil. :)
Bruno, como faz para colocar um link para uma outra imagem dentro da janela com a imagem ligthbox? Quando a pessoa abre a foto tem a opção de ver um detalhe desta foto.
agradeço desde já
obrigadao ai cara me ajudou muito com esse tutorial
abrass
sucesso
como configurar o tamanho dele ao abrir
Olá Alexandre! Infelizmente faz tanto tempo que não trabalho mais com programação que realmente não me lembro como fazer isso.
Sugiro visitar a página do desenvolvedor do Lightbox que certamente terá um tutorial para isso.
Desculpe não poder ajudar tanto, mas obrigado pela visita ao blog! []s
Olá, estou usando plugin LightBox no meu blog http://decionit.blogspot.com, funciona perfeito, com exceção quando clico na imagem pequena, a maior não abre na mesma pagina, usei todo meu conhecimento para que abrice na mesma pagina do blog, não consegui, se poderem me ajuda agradeço mais uma vez, meus arquivos e imagens estão hospedados no Google Site. Obrigado!
Olá, estou usando plugin highslide-4.1.12 no meu local host, funciona perfeito, no blog não http://decionit.blogspot.com/ usei todo meu conhecimento para que desse certo no blog, não consegui, se poderem me ajuda agradeço,meus arquivos e imagens estão hospedados no Google Site. Obrigado!
Muito bom o tutorial, queria saber como abrir o lightbox automaticamente quando a página for carregada. Valeu. Aguardo respostas.
Alguém indica Sítios onde possa iniciar um estudo sobre HTML, CSS e JS. Me parece que é necessário um conhecimento prévio destas ferramentas para configurar o Lightbox. Valeu galera. Aguardo informações.
Bruno faz uma video aula explicando ,pois vendo vc fazendo fica muito mais facil do que uma coisa escrita.. eu não to conseguindo me ajudaaaaa!! PRECISO FAZER um ligthbox de 70 fotos tem um jeito mais facil???
Olá ! utilizei o script como vc colocou aqui ! e no explorer funcionou perfeitamente ! mais no chrome não funciona ! o fundo escurece mais as imagens nao abrem !
Se puder me ajudar ficarei muito grato pois ainda existem poucas explicações precisas como foi a sua na internet !
meu site : http://www.djratinho.com.br
Abraço !!
Oi, mew, seguinte, só tenho noções de html e um pouco de css, criei a galeria e beleza, ta funcionando normal, porem a página que criei a galeria ta, tipo, em branco sem formatação, entao queria saber se tem algum jeito de eu linkar o meu lightbox com a página separada que eu criei… não sei se fui clara :P, mas resumindo é isso, tenho o lightbox num html e uma página pronta (separada) tambem em html…queria saber se dava pra juntar as duas, ou eu vou ter que criar uma formatação dentro da pasta da galeria mesmo… Valeu, bem direto teu tutorial, abraço ^^
Olá!! Muito bom este tópico…
eu só gostaria de saber como se faz para que todas as imagens sejam exibidas com o mesmo tamanho na tela….
Muito obrigada…Abraço
Olá Natana. Faz tempo que não trabalho ou brinco com o Lightbox. Sinceramente não sei uma resposta rápida e elegante para essa sua dúvida. Uma rápida que soa mais como um gatilho é você disponibilizar sempre as imagens do mesmo tamanho.
Obrigado pela visita!
Cara esse teu topico salvou minha vida…hehehe!!
Parabéns! Grande abraço.
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 (estatica), 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 Foto e Descrição e botao "Veja Mais" o produto B com Foto e Descrição e botao "Veja Mais" e varios outros produtos dessa mesma forma. Mas que o botao " Veja Mais" chamasse o efeito lightbox.
fiz como diz no tutorial, mas fica carregando a imagem (akela rodinha) e nao da em nada…
Gente, o tuto tá bem explicadinho, pelo menos eu achei. Parabéns ao Bruno!
Mas para quem estiver ainda com problemas, tem uma vídeo aula explicando basicamente o mesmo. Acredito que ajude algumas pessoas daqui.
O link é: http://www.oficinadanet.com.br/artigo/javascript/…
Quanto as imagens de " prev/ next "abram o lightbox.css e corrijam o caminho
já o "close e loading" abram o arquivo lightbox.js e alterem o caminho também
Boa sorte !
Galera da uma olhada neste site que eu to criando http://rubempaixao.orgfree.com/distillate (é só colar no navegador)..se alguem tiver uma ideia de como eu consigo fazer com que a galeria que ta no menu..abra diretamente nas imagens que ficam logo abaixo da imagem principal..me falem..to tentando finalizar esse site mas to com algumas dificuldades..essa é uma delas..esse é o meu projeto final de um curso que to fazendo..se puderem ajudar eu agradeço.
Olá, pra mim funcionou perfeitamente, só que a imagem aparece sem margem de top! Ou seja, colada lá em cima!! Onde eu altero pra colocar ela mais pra baixo??
Veja aqui:
http://www.mpa-esquadria.com.br
Obrigado.!!
É o seguinte, estou testando isso aqui e já percebi erros:
– A aspa dupla que você usa não é a mesma utilizada na programação e deve ser substituída.
– O caminho das imagens dentro do Lightbox.js está errado, faltando dois pontinhos (../)
– Faltou colocar a chamada pro builder.js lá na instalação:
Fazendo isso, funcionou normalmente. Vou prosseguir nos testes e volto a postar caso tenha mais erros.
não está funcionando no IE 8…
a imagem carrega sozinha na pagina
De todos os que vi na web o mais completo. Parabéns.
olá gostaria de saber porque o ligthbox está abrindo atras de tudo, ele não aparece na frente como dveria todas imagens do site aperece na frente quando o lightbox carrega.
Aguardo o contato amigão
Bruno e galera,
Alguém pode me ajudar. A primeira parte do tutorial está perfeita. consegui fazer tudo.
Mas quando chega na segunda parte, não consigo entender em que lugar colocar aqueles códigos, nem como.
Eu já havia lido isso no próprio site da Lightbox, mas também não entendi.
Por favor, se alguém puder me ajudar.
Bruno, toh muito triste. na ocnsegui.. so sei o basicao de html mesmo e uso o front page pois eu trabalho mais com o layout mesmo… da pra vc me explicar melhor ??? hellllp !!
O meu efeito só abre no google chrome, porque?
Olá, ja funciona bem, mas no IE as paginas com imagens que usan o Lightbox têm em baixo o simbolo de Erro na pagina, embora funcione bem. No Mozila esta perfeito, o que esta a faltar??? Pode me ajudar?
Obrigado e parabens!
Oi Bruno é o seguinte,eu gostaria de saber se tem como fazer isso em flash?
Eu fiz um menu chamado carrousel com algumas imagens e gostaria de quando o cliente clicar abra dessa forma
Pode me ajudar?
Obrigado e parabens!
La solucion del Lightbox, es magnifica, dio un poco de trabajo pero lo consegui. La descripcion de la imagen va dentro de <a title="Ex" rel="nofollow">
ola tenho uma galeria de imagens e gostaria de saber como posso estar add comentario a cada foto
deu certinho a configuraçaõ da ligth mas nao consigo postar comentario ou quer dizer a descricao da imagem se alguem puder me explicar agradeco..
augustocalado@hotmail.com
lindo depois de instalar seguir a risca… fiz funfa.. so num consigo fazer funfa as images prevlabel.gif e nextlabel.gif os caminhos estao corretos
images/prevlabel.gif
images/nextlabel.gif
poderia me ajudar
Prezado infelizmente não sei o que acontece mas no ie o light box abre e mostra a imagem mas na metade da pagina ele não cobre veja o site http://www.pousadaoasisdocaminho.com.br se alguém souber porque isso acontece no ie… Nos outros navegadores funciona mas preciso achar a solução para o ie.
Ola..
estou com um problema hehehe… nas paginas em que estao o efeito lightbox o menu pop up não funciona… voce tem alguma dica?
obrigadooo
Acredito que houve falha na hora de postar os links iniciais entre o …
////
//
//
//
e na imagem
//link
Bruno, você está de parabéns pela iniciativa.
Para algumas pessoas que estão iniciando neste oficio encontram dificuldades em obter um material de apoio adequado e com qualiudade, por sorte tem a oportunidade de absrover uma parte de seu conhecimento que foi publicado aqui. Mais uma vez parabéns!
Aproveito a ocasião para pedir um auxilio de sua parte sobre a configuração do Lightbox.
referenciei a pasta em que os arquivos estão:
Depois referenciei a foto a ser exibida:
link
Alterei o caminho nos arquivos css/lightbox.css
#prevLink:hover, #prevLink:visited:hover { background: url(..Lightbox/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(..Lightbox/images/nextlabel.gif) right 15% no-repeat; }
e no js/lightbox.js
fileLoadingImage: 'Lightbox/images/loading.gif',
fileBottomNavCloseImage: 'Lightbox/images/closelabel.gif',
Gostaria de saber se existe algo mais que possa ser feito, pois quando clico no link ele abre em uma nova janela do navegador para exibir a imagem.
Poderia me auxiliar?
Agradeço antecipadamente.
Att
Molezinha, é só hospedar em um site que aceite JS manda as pastas pra la via ftp e pronto; meu desafio agora, é tentar carregar uma pagina html ao inves de imagens, sabe com fazer?
se tiver pelo menos uma ideia de algo ja ajuda
Parabéns pelo tutorial. Através do site oficial não conseguia fazer os botões aparecerem por que lá não explica onde e o que é necessário modificar para aparecer os botões. Como minha pasta não fica no caminho padrão, tive que alterar os arquivos .css e .js para funcionar.
Tutorial fácil e intuitivo.
Bruno… Eu acho que você poderia explicar um pouco melhor as partes "CSS – Abra o arquivo css que contém as classes do LightBox e procure pelas imagens prevlabel.gif e nextlabel.gif. Coloque o caminho correto para elas. Veja abaixo a dica de caminho relativo para você poder apontar corretamente para essas imagens.
JS – Abra o arquivo lightbox.js, procure pelas imagens loading.gif e closelabel.gif e coloque o caminho correto para elas. Mesma coisa, aplique a dica sobre o caminho relativo."
É porque esta meio complicado ainda! :) Por Favor,agradeço muito e parabens!
Se quiser me responder pelo e mail ou aqui mesmo..Agradeceria muito!
Ow bruno, me ajuda aqui cara!!
Fiz tudo como vc falou e quando clico na foto pra abrir o lightbox ele some com o meu banner em flash!!
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?
Boa Tarde Bruno,
Fiz a configuração do lightbox, e está funcionando perfeitamente tanto no IE, quanto no FF, porém funciona localmente, executando no IIS, porém qdo envio para o meu provedor onde o meu site será hospedado, o efeito não ocorre.
O que acontece é o seguinte: o heigth da tela é aumentado exageradamente e a imagem aparece no final da página.
Todas as imagens auxiliares aparecem e a funcionalidade está normal (next, prev, close).
Só o efeito que não ocorre corretamente.
Lembrando que isso só ocorre quando eu envio os arquivos para o provedor.
A hospedagem no provedor tb é em Windows.
Se tiver alguma sugestão, fico agradecido.
Obrigado
Brother, muito bom o tuto, mas aqui não ta funcionando de jeito nenhum… Tenho uma barrinha em flash e toda vez que clico no no thumb a barra some e não abre o lightbox…
Alguma idéia do que possa ser isso?
Todas as referências tão certas, já verifiquei várias vezes.
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 sobrepondo todos o frames, na tela toda sem ser dentro do apenas de um frame?
Muito legal seu tuto!
Só estou com um problema, meu site está feito com várias divs (camadas), instalei o Lightbox e quando carrega a foto ele abre a foto por cima das camadas, porém o fundo aquele preto meio transparente que da o chame fica por baixo de tudo, tem como eu jogar isso pra frente?
Jeovan
Olá Bruno já passei por vários tutoriais e depois de passar por
vários consegui finalmente fazer com que funcionasse o meu,
mas estou com uma dúvida não sei nem se realmente tem como.
Dúvida: Existe maneira de se cria um Upload dinâmico para inserir
as fotos da galeria lightbox, mas no meu caso uso um Blog com várias fotos em minha galeria. tem como inserir várias fotos de uma vez só?
sem ter que ficar editanto a URL Rel do Lightbox?
Abraços!
BEC Fotografia
Olá bruno tem como vc explicar melhor como colocar o next eo prev…fico grato funciono direitinho…se puder me explicar oq tenho que mudar…fico grato
Olá, Bruno.
Muito bom o tutorial, entretanto estou com o mesmo problema do colega acima.
Não encontrei o arquivo 'blank.gif' e configurei tudo corretamente (creio eu), mas a imagem abre em uma blank.
Sabe o que pode ser?
Desde já agradeço.
Ola, Bruno nao encontrei o arquivo
blank.gif (dentro do css)
Configurei tudo mais na hora que esta no ar, e clica na imagen, ele abre essa imagem em outra pagina sem o efeito.
Obrigado!
Pingback: Lightbox: Como Configurar | BrunoCunha.com
Bruno, boa tarde!!!
Terminei curso de Web no ano passado, e gostei muito dessa atualização do LigthBox, mas não estou conseguindo fazer com que apareça corretamente. Ele abre uma nova página em Branco.
Coloquei conforme você cita no exemplo, mas abre corretamente.
Você poderia me dar uma ajuda.
Grata
Bruno, meu site com esse efeito abre a imagem em uma nova página em branco… como arrumo isso? Obrigado, abraço, Andrey.
@andrey: você deve estar enfrentando problemas com o JavaScript. Verifique as referências do javascript, verifique como você colocou as tags.
mano tambem gostei do tutorial esta de parabens mais um amigo ai em cima tem a mema duvida que eu ao invez de abrir uma imagem como eu faço para abrir uma pagina em php pq eu to fazendo um site em ajax e gostei muito do efeito estacva com essa iodeia para bota um menu de ferramentas ai vi isso so que ate hoje nao consegui ela fazer chama um arquivo em php ao invez da img tem como se entra em contato comigo e urgente manin vlw
explicando melhor assim que clicka-se na opção ao invez de abri uma galeria mabrir uma pagina em php ou html
não existe nenhum código para que o código: rel=”lightbox” seja aplicado a todas as imagens automaticamente, sem termos o trabalho de por o código em todas as imagens que pomos no site?
Obrigado
@André: Código sempre existe, basta você programar desse jeito no seu site, mas se estiver usando o WordPress, o plugin Lightbox 2 já faz isso. Ele coloca esse rel="lightbox" nas imagens.
Bruno,
Muito bom o tutorial, consegui fazer legal, a única coisa é que as imagens nextlabel e prevlabel não aparece de jeito nenhum, já tentei de tudo…
Olá fera, vi sua obra de tutorial, ficou fabuloso.
Bom quero perguntar uma coisa.
Esse efeito das fotos ao lado (suas fotos) ->
onde o Next e os demais detalhes de foto anterior sucessiva etc..,
estão ao centro do efeito, neste tutorial se aplica estes efeitos?
Aguardo..
Aquele abraço…!
Desculpe a ignorância, mas sou novo em Blogs. Não entendi apenas essa parte "Sugiro extrair essas três pastas para a raiz do seu site, para facilitar na hora de referenciar esses arquivos. " Podeir ame explicar melhor? Obrigado pela atenção.
hola Bruno gostei muito do seu tutorial e tive lendo para ver se eu podia solucionar um problema que tenho com minha pagina http://www.chiringa.com.br/index.php?section=product
mas ainda nao consegui sera que vc poderia me ajudar?
olha só no link que te mandei nao conseguia fazer aparecer a foto entao cologuei um texto galeria de fotos. como faço para que as fotos apareçao antes de aparecer o slide?
a versao que estou usando e 3.22
vlw mano
Jeziel, tive o mesmo problema que você no lance da imagem carregar colada no topo, mas corrigi isso.
No arquivo lightbox.css, adicione na linha #lightbox "padding: 200px;"
Aí vc ajusta de acordo com a sua necessidade.
Fazendo isso, a imagem vai ficar colado no box branco do lightbox, ficando sem margem.
Pra corrigir isso, vá na linha #imageContainer e mude o padding dele até chegar no que você quer.
:D
E mto bom esse post, bruno. Parabens!
Ola Bruno, cofesso que apanhei um pouco para conseguir implementar no meu site,mas consegui o/
so tem um problema de compatibilidade…
No IE7 funciona normal, mas no firefox 3.0.8 nao funciona direito :(
a imagem so carega no topo da pagina (como se fosse um top:0px;)
e nao sobrepoe o fundo "preto", fica embaixo do fundo.
pode me ajudar?
OBRIGADO
Olá o meu só funciona local em uma pagina na outra só funciona normal ?
olá galera,
estou com um grande duvida,
alguém conhece o script lightbox++?
é o seguinte, gostaria de fazer uma galeria de fotos no flash , sendo assim eu clicar na foto e usar essa função, , fiz tudo como ensinado, mas infelizmente não deu certo,
alguém saberia pq?
tenho certeza q o script no meu html está correto mas ja não posso dizer o msm no meu AS do flash.
se alguém ja usou ou vai usar, seila…
se puderem me ajudar…
valeuu…
olá Bruno… então eu tinha baixado do site do desenvolvedor… não veio msm esse arquivo, deletei e baixei de novo e nada… ai achei num outro site pra baixar, ai deu certo…
segui os passo a passo que vc posto aqui e funcionou!
valew!! abraços!
porque no meu CSS que acabei de baixar não tem o arquivo blank.gif???
Olá Bruno!
Alguma dica pra funcionar com templates?
Numa página de teste funciona perfeitamente, mas quando altero no template, as demais páginas não funcionam.
Há algum truque?
Beijos e obrigada pelo tutorial! Muito bom!
Bruno, sou novo por aqui, mas já me dei bem. Nas imagens simples deu tudo tudo certo. Só adicionei os diretórios de scripts na minha pasta raiz fiz as referências e tudo está funcionando. Testei no IE,Safari,FireFox,Opera, tudo Ok. Agora eu queria saber como criar o efeito que você está usando no campo Imagens Aleatórias desse blog. Onde as imagens ampliam e o cursor do mouse vira uma lupa. Obrigado e feliz ano novo !
Tentei, tentei e tentei to a mais de 24 hotras acordado e não consegui acerta pra fazer as imagens do meu site fazer esse efeito, não sei onde estou errando, se puder me mandar um codigo lightbox feito, onde eu troque somente a url da imagem, ficaria agaradecido amigo.
Forte Abraço!!!
eu uso WordPress e gostaria de saber como colocar o esquema de Lightbox para funfar nele, hoje eu uso a versão 2.6.3 se vc souber como me ajudar fico grato.
Eu instalei um plugin que peguei no site oficial mas esta dando um erro de escript.
Valeu!!!
Já tinha usado este script e sempre funcionou.
Hoje usei novamente, funciona no meu computador mas, quando coloco online, não reconhece nada. É como se estivesse a colocar um link vazio. Se possível, apresenta-me uma solução urgente.
Obrigada
Prezado Bruno, seria possivel auxiliar-me na questão postada sobre lightbox++ e Firefox não funcionar devidamente usando arquivos swf? Agradeceria muito!
Olá Bruno, eu estou utilizando o Lightbox++ para abrir uma galeria de fotos em flash (.swf). No IE está funcionando praticamente 'sem problemas" mas nos demais navegadores não funcionam, abre sempre o arquivo flash, o que deve estar errado ou estou utilizando o script incorreto, o que você sugere para que funcione tanto no IE quando no Firefox e outros navegadores?
Os caminhos relativos tanto para o link quanto no lightbox.css para as imagens estão corretos, usando (/).
Agradeço pela ajuda e meus parabens!
Parabéns pelo tutorial
funcionou perfeito!!!
Mesmo problema do amigo!!
em 08 de março de 2008 às 23:47h
Geraldo
Olá, fiz todos os passos conforme o tutorial mas ao abrir as imagens no IE aparece uma faixa mais clara do lado direito da página, isto é, o fundo escurecido que deveria preencher toda a página do site não acontece, gerando esta faixa, e isto somente no IE. Se alguém passou por este problema e puder auxiliar com uma solução, ficarei agradecido! Obrigado.
Olah Bruno, estou tentando testar o lightbox numa pagina asp.net mas ele da erro ao abrir a pagina, falando que o o "Builder não está definido". Voce sabe se funciona no asp.net???
Obrigado,
Rafael
Olá Edson,
O que você quer fazer é possível sim, mas não com o Lightbox, que é destinado exclusivamente à exibição de imagens. Para o que você quer fazer, tente o Highslide JS (http://highslide.com). Ele tem uma versão gratuita para uso pessoal e outras licenças para uso comercial. Dê uma olhada no site deles e veja se é isso que quer.
Outra boa dica é o framework Script.aculo.us (http://script.aculo.us) que possui um conjunto de efeitos em javascript que você pode personalizar para o seu caso.
Se quiser encarar o Java Script Hard Core, dê uma olhada também no framework Prototype JS (http://www.prototypejs.org). Ele trabalha com AJAX que é uma maravilha.
Todos os casos necessitam de conhecimentos avançados em Java Script, mas vale a pena aprender.
Espero ter conseguido ajudar.
[]s
Olá, tudo o que vc ensinou neste tutorial funcionou corretamente, mas tenho uma pergunta: Eu posso abrir outra htm dentro de um efeito lightbox? como eu faria isso?
Olá Luiz!
Para esse caso, você vai ter que reduzir as imagens para o tamanho que você quer antes de publicá-las na internet. O Lightbox sempre abre no tamanho total da imagem.
Existem diversos programas que fazem o trabalho de reduzir o tamanho das imagens: Photoshop, Fireworks, IrfanView, Picasa etc.
Caso não conheça/não saiba mexer em nenhum desses programas, sugiro o IrfanView (http://www.irfanview.net) por ser gratuito e muito simples de aprender/mexer.
Espero ter ajudado.
Obrigado pela visita!
[]s
Cara, muito bom o tuto, mas como padronizo o tamanho da imagem?
tem imagens que são enormes, e outras muito pequenas, quero colocar em um tamanho padronizado(quando amplia)
Aguardo resposta!
Fernando,
Com certeza o endereço para as imagens está errado em produção. Verifique como o link está chegando para o LightBox e depois me diga.
[]s!
cara coloquei esse esquema nesse site na pagina inicial , no pc funcionou uma maravilha em todos os navegadores, so q depois q mandei pro site so funciona no IE7, no firefox e nos outros so fica na imagem de loading e nada de aparecer a imagem, tem algum esquema pra isso? será q fiz algo errado?
valew
Resolvi o problema.
Melhor explicação que já li.
O meu estava funcionando, agora dá erro de página e não consigo ver o problema. Outra coisa, no meu arquivo lightbox.js, não tem as imagens loading.gif e closelabel.gif .
Abraço.
Olá Lucas.
Creio que você tenha ficado com dúvida na parte 1, que trata da instalação né? Revendo o texto, vi que realmente não estava indicando onde entravam as chamadas JavaScript. Em qual lugar do HTML que deveriam entrar. Valeu pela revisão e já atualizei o texto.
O negócio é o seguinte, os scripts abaixo devem ser inseridos entre a tag <head> e a </head> da sua página HTML.
<script type=”text/javascript” src=”js/prototype.js”></script>
<script type=”text/javascript” src=”js/scriptaculous.js?load=effects”></script>
<script type=”text/javascript” src=”js/lightbox.js”></script>
O lance da referência do CSS é a mesma coisa. Também coloque entre as tags <head> e </head>.
Espero ter ajudado um pouco.
Valeu pela visita!
porra tutorial fico mei sem nexo, nao da pra saber em qual lugar do html e pra inserir os codigos , so a parte do ref q fico bem explicado, ele n fala c a img tem q xama 1 link ou coisa do tpw, N CONSEGUI :( me ajuda ae bruno
Ola Bruno, funcionou. Fiz o que você mencionou e também alterei meus arquivos js, pois eram muito antigos.
Valeu e parabéns pelo trabalho.
Olá Rogério,
O que pode estar acontecendo é que o JavaScript com as funções do LightBox não foi completamente carregado quando você clica na imagem, caso 1 que você descreveu. Para minimizar esse problema, caso você tenha inserido a referência ao lightbox.js na mão, sugiro colocar a chamada a esse js dentro da tag <head>. Lembre-se também que o parâmetro "rel=lightbox" deve ser inserido dentro da tag <a> e o nome lightbox tem que ser escrito corretamente.
Para o caso 2, verifique se a url da imagem loading.gif está realmente correta. Tente utilizar um endereço absoluto pra testar.
Confesso que a configuração desse lightbox não é tão simples, mas o trabalho no início compensa o resultado final. Fica bem legal o efeito.
Espero ter ajudado.
[]s</head>
Ola Bruno, parabéns pelo tuto. Muito bom.
EEstou com algumas dificuldades:
1º. Quando minhas imagens começam a carregar e eu clico sem ter concluido todas o efeito não é ativado, apenas aparce uma foto grande em outra pagina sem o efeito. O efeito aparece somente quando carrega todas as imagens. Tenho que esperar todas as fotos carregarem para o efeito ligthbox aparecer?
2º Como tenho que esperar as fotos carregarem o loading.gif não aparece também quando navego pelas imagens.
Pode me ajudar?
Minhas imagens estão em uma tebela com 2 colunas…
Olá Rafael!
Que bom que gostou do tutorial!
Esse efeito é muito maneiro mesmo. Demorei pra entender o conceito mas depois que aprende fica fácil! :)
Depois manda o site pra ver como ficou!!
[]s
Meus parabéns funciona perfeito!!! cara quando vi esse efeito em um site ano passado fiquei loko pra saber como funcionava e hj fui procurar pra montar meu novo site e achei aqui como configurar!
Excelente tutorial!
obrigado
Olá Diego!
Diria que tem 90% de chance de você conseguir fazer isso. Não posso lhe afirmar com 100% de certeza porque faz muito tempo que não trabalho com o flash.
Mas você pode tentar o seguinte: Dentro do flash, chamar uma função Javascript que está no HTML que chama o flash.
Estude sobre Flash com Javascript.
Depois é só entender como funciona o Lightbox e juntar tudo! :)
Espero ter ajudado!
[]s!
Olá gostaria de saber se tem como eu chamar as imagens do lightbox apartir de um botão dentro do flash.
Att, Diego Camargo
Olá, fiz todos os passos conforme o tutorial mas ao abrir as imagens no IE aparece uma faixa mais clara do lado direito da página, isto é, o fundo escurecido que deveria preencher toda a página do site não acontece, gerando esta faixa, e isto somente no IE. Se alguém passou por este problema e puder auxiliar com uma solução, ficarei agradecido! Obrigado.
Sabe como limitar o tamanho da janela? Tipo, independente do tamanho da imagem ele vai ter um espaço limitado para exibir.
cria uma div
Cara … o barato eh loco … muito dez …
valew mesmoo …
E como é para abrir paginas html ou php no lugar da imagem???
tenho a mesma dúvida. Como fazer o lightbox abrir páginas invés de apenas imagens?
brother, eu acho que ficaria melhor se voce inserir imagens monstrando onde inserir cada codigo daquele, porque sou iniciante, e num sei onde colocar aqueles codigos… qualquer coisa me add no msn, é esse email ai mesmo… abraçosss
Nossa, parabéns,, o seu tutorial está excelente, funcionou mesmo… as pessoas não conseguem porque não configuram as pastas e arquivos corretamente. Fiz um teste e funcionou perfeitamente,, em breve colocarei as minhas imagens.
Agora, será que você poderia colocar um tutorial sobre como funcionar o CSS!?, pois eu configuro certo como peguei da fonte, mesmo assim não funciona. Walew!
Cara não consegui fazer funcionar o cara.
Me enrolei no ponto em que tem que colocar referência no HTML.
Qual HTML é esse? Na notícia??
Dê cá 30 quilos de roupa pra eu lavar que prefiro…
Essa "medicina" tá muito avançada pro meu gosto…
Pingback: LightBox Dica at Alam Braga