Galera, já surgiu aquela necessidade de fazer uma visualização de fotos mais eficiente e rápida de fazer.
Então, eis a solução, o LightBox 2 (by Lokesh Dhakar). Existem muitos lightboxes por aí, mas esse eu acho o mais simples de usar, e mais direto.
O lightbox utiliza o framework prototype e a biblioteca de efeitos Scriptaculous.
Vamos aprender aqui á usá-lo. Baixe aqui o exemplo.
##INTALAÇÃO
<script type=”text/javascript” src=”js/prototype.js” mce_src=”js/prototype.js”></script>
<script type=”text/javascript” src=”js/scriptaculous.js?load=effects,builder” mce_src=”js/scriptaculous.js?load=effects,builder”></script>
<script type=”text/javascript” src=”js/lightbox.js” mce_src=”js/lightbox.js”></script>
<link rel=”stylesheet” href=”css/lightbox.css” mce_href=”css/lightbox.css” type=”text/css” media=”screen” />
3º Coloque as imagens da pasta images no seu site, e cheque se no arquivo .css, as imagens prevlabel.gif e nextlabel.gif estão referenciadas corretamente, e também as imagens loading.gif e closelabel.gif no arquivo lightbox.js.
http://www.huddletogether.com/projects/lightbox2/
##ATIVAÇÃO
1º Nos links que você quer abrir o lightbox, só adicionar o atributo rel=”lightbox” na tag <a>:
O atributo title informa qual será o título do box.
2º Para um grupo de imagens, onde os botões de próximo e anterior serão ativados, coloque o nome do imageset entre chaves, assim:
<a href=”imagens/imagem1.jpg” mce_href=”imagens/imagem1.jpg” rel=”lightbox[setImage]“>Abrir imagem 1</a><a href=”imagens/imagem2.jpg” mce_href=”imagens/imagem2.jpg” rel=”lightbox[setImage]“>Abrir imagem 2</a>
<a href=”imagens/imagem3.jpg” mce_href=”imagens/imagem3.jpg” rel=”lightbox[setImage]“>Abrir imagem 3</a>
Isso aí galera. Prático, fácil e rápido de instalar. Vale a pena usar!
Lembrando que não dá pra abrir .swf via lightbox. A não ser que seja feita uma alteração no código .js.
#1 por gregory em Maio 28th, 2008
amigo, ao inves de colocar imagens posso colocar video tutorial em flash, .sfw??? ou ele so aceita formato .jpg ou .gif?? obrigado
#2 por Weverton Naves em Maio 29th, 2008
Amigo, não funciona com .swf.
Mas se tiver as manhas, dá uma mechida no código que pode ser que consiga!
Abs.
#3 por Web Designer Demétrios em Junho 3rd, 2008
Como ativar aqueles botões de próximo e anterior ???
Já tentei e não consigo !
#4 por Weverton Naves em Junho 4th, 2008
Demétrios,
Para ativar os botões de proximo e voltar, vc tem que ter várias imagens atreladas ao mesmo lightbos, para isso, no link de todas as imagens do msm lb, vc coloca isso: lightbox[setImage] (setImage é o nome do seu grupo de imagens).
#5 por P3p em Junho 19th, 2008
muito bom o lightbox, mais estou encanado numa coisa, tipo… meu site abre um popup 352×450 congelado, sem toolbar navbar etc… quando aplico o lightbox ele abre dentro do popup estendendo as scrollbars e exibindo a imagem dentro do popup, como faço para mudar os parâmetros para exibir na tela toda mesmo q for dentro do popup… tipo um método “window.top” entenderam? e mais uma coisa…
tipo eu quero que a imagem abra mais que inclua um JS que insere efeito reflexo na imagem que será aberta dentro do lightbox, vou tentar explicar melhor…
tudo está bem desse jeito:
imagem?img=teste.jpg
[resultado ele emite um efeito reflexo pra qualquer imagem que passa por esse parêmtro]
na “imagem” (PHP) chama automaticamente um efeito reflexo (class=”reflexo”), e se eu quiser adicionar o lightbox com esse efeito reflexo??? como faço isso?
tipo assim
image #1
já tentei mais o lightbox não pega como imagem, e não reconheçe o parâmetro
é mais ou menos isso
alguém sabe se existe essa forma?
valew, abraços e parabéns pelo Post, fiquem com Deus.
#6 por Weverton Naves em Junho 24th, 2008
Então P3p.
O lightbox é um codigo pronto, para adaptar os parametros, tem-se que mecher no código fonte.
Quanto ao efeito nas imagens, vc já viu esse esquema aqui.. talvez seja útil:
http://www.webdesignerwall.com/tutorials/css-decorative-gallery/
#7 por Rafae Marinho em Julho 18th, 2008
Gostaria de saber se me pode ajudar a activar o download de imagens no Lightbox 2. A imagem download-icon esta na pasta de imagens mas não esta activa.
Dês de já obrigado!!
#8 por Rafa Lacerda em Agosto 26th, 2008
E pra colocar texto? Sabe?
Abrax
#9 por Weverton Naves em Setembro 1st, 2008
Rafael, coloque a propriedade title na tag
Abs.
#10 por Almeida em Setembro 4th, 2008
Cara, favor enviar dicas Lightbox utilizando banco de dados Asp. Tenho um q encontrei na net(http://www.plugmasters.com.br/sys/materias/740/1/Galeria-de-Fotos-com-Efeito-Lightbox), mas não consigo exibir somente uma imagem na página e sim vários. Vc pode me ajudar.
#11 por rocks-hd em Setembro 9th, 2008
parabens pelo belo tutorial, acabei de testar e aprovei
um abraço!
#12 por Leandro Marino em Setembro 11th, 2008
Bom dia!
Estou colocando o lightbox 2 no meu site, mas por algum motivo minhas galerias de fotos funcionam apenas no Firefox. Tanto no chrome quanto no IE elas não funcionam, você saberia me dizer qual pode ser o motivo?!
abçs
#13 por paulo em Setembro 15th, 2008
como eu faço para colocar em uma galeria php ?
#14 por paulo em Setembro 15th, 2008
$paginas = ceil(count($imagens) / $ipp);
$inicio = $pg * $ipp;
$thumb=”imagemdim.php?imagem=”;
$var1 = “&evento=$evento&data=$data&local=$local”;
for ($i=$inicio; $i
<a href=”zoom.php?dir=&pg=”rel=”lightbox”>
<img src=”" hspace=”1″ vspace=”1″ border=”1″>
#15 por paiva em Setembro 29th, 2008
Weverton
primeiramente parabéns pelo blog !!!
cara, faz 5 dias que estou tentando fazer funcionar o lightbox e não consigo !!!
não sei o q estou errando…
eu joguei em http://www.photomind.com.br
veja se pode me ajudar…
agradeço desde já !!!
#16 por Gabriel em Setembro 30th, 2008
Rafae Marinho 18 Julho , 2008 às 3:31 am
Gostaria de saber se me pode ajudar a activar o download de imagens no Lightbox 2. A imagem download-icon esta na pasta de imagens mas não esta activa.
Dês de já obrigado!!
#17 por Johnny em Novembro 17th, 2008
Cara, isso é muito bom.
Sempre quis fazer isso em minhas galerias, smepre vi em outros sites, mas imaginava que fosse mais complicado.
Valeu pelo post.
E parabéns.
#18 por Cj em Novembro 19th, 2008
Galera, alguém conseguiu ativar o download de imagens ?
#19 por Patrick C. Brito em Dezembro 17th, 2008
Weverton, como faço para alterar o tamanho das imagens no Lightbox? eu queria que ficasse maior a imagen, teria como você me ajudar?
Obrigado!
#20 por Dede em Janeiro 6th, 2009
Cara eu consigo linkar o texto que ponho no “title”?
#21 por Giuliano em Janeiro 7th, 2009
Muito obrigado por esta explicação…
Não entendo nada de javascript e consegui aplicar o efeito!
Uma dúvida…
Qual a função deste atributo…
-> mce_href= <-
Parabéns pelo blog!
Giuliano Varriale
#22 por joao de souza em Janeiro 21st, 2009
Olá cara tem como abrir SWF no Lightbox ?
#23 por Weverton Naves em Janeiro 22nd, 2009
joao de souza,
não tem como colocar um swf. a não ser que seja alterado o código .js.
#24 por Weverton Naves em Fevereiro 4th, 2009
joao de souza. Vi um exemplo na net que utiliza jquery para fazer uma janela semelhante que abre .swf. Dá uma pesquisada ae.
#25 por Arthur Correa em Março 12th, 2009
Boa noite!
Desculpe a minha absoluta ignorância, mas quando vc fala:
1º Nos links que você quer abrir o lightbox, só adicionar o atributo rel=”lightbox” na tag :
Abrir imagem
Onde fica isso?
Pq eu só sei adicionar imagens no site através do menu “Midia” do wp-admin do wordpress, e não sei onde ficam esses códigos onde eu devo acrescentar o atributo.
Por favor, vc pode me ajudar?
#26 por Alle em Março 26th, 2009
Olá Weverton,
Te escrevo de Londres onde vivo e trabalho atualmente.
Estou fazendo meu portfolio usando a JS MOOTOOLS.. conhece?… quase todo o conteudo do meu site abrirá e será mostrado em um lightbox…. to com tudo pronto… mas não consegui entender como fazer abrir u html dentro do lightbox….. será que devo fazr uma pagina pra cada coisa que quero abrir?
Podes me ajudar..? Tem um exemplo do que quero fazer no site http://www.alexbuga.com
se puder me dar alguma dica?
Grande abraço.
Alle
#27 por Weverton Naves em Março 27th, 2009
Alle, muito bom esse site aí heim.
Cara, dá uma olhada nesse código aqui:
http://www.e-magine.ro/web-dev-and-design/36/moodalbox/
#28 por Felipe Pina em Maio 13th, 2009
Muito bom mesmo !!
parabéns
#29 por Deiverson em Maio 29th, 2009
Weverton bom trabalho
ñ estou conseguindo fazer funcionar no meu blogspot alias funciona no blogspot… como fazer
segui seu tutorial + ñ consegui fiz assim
coloquei os 3 arquivos js e o css no skydrive que serve pra colocar os arquivos e depois coloquei abaixo do head do meu blog mais ñ funcionou
ficou assim tá certo por favor baixe os arquivos e veja se tá configurado corretamente e se é assim que coloca os links no head
por favor me ajudem já estou há vários dias tentando
e ñ consigo
alias os outro arquivos js precisam colocar em algum lugar
#30 por Weverton Naves em Junho 4th, 2009
Deiverson, veja esse artigo: http://alaskamassey.blogspot.com/2008/09/lightbox-for-blogger-tutorial.html
#31 por Allan Cesar em Junho 20th, 2009
Bom Weberton, antes de mais nada teu site é 10! dicas legais e muito importantes.
Sou blogueiro de 1ª viagem e gostaria de obter contigo umas informações para deixar meu blog maneiro. Gostaria de colocar o lightbox no meu blog para exibir minhas fotos, dá? O que devo fazer? não domino ainda essa área. Me ajude.
#32 por fabio em Setembro 18th, 2009
cara seuinte estou tentando colocar umlightbox em uma pagina q contem o seguinte
ai so funciona no frame que esta olightbox e nao em toda a pagina como fazer para funcionar em toda a pagina ???????
#33 por Patrick C. Brito em Outubro 27th, 2009
Weverton, como faço para alterar o tamanho das imagens no Lightbox? eu queria que ficasse maior a imagen, teria como você me ajudar?
Obrigado!
#34 por Felipe em Dezembro 3rd, 2009
BLZ
cara muito bom esse Tópico
estou fazendo um site e gostaria de saber se tem como colocar uma pagina HTML dentro do Lightbox …
estou precisando fazer isso muito urgente.
falow
Att.
Felipe
#35 por Weverton Naves em Março 27th, 2009
Amigo, na ferramenta de criação de post do wordpress tem uma opção “HTML” no canto superior direito do box de edição. Clica lá e você vai ver o html da imagem que adicionou.
Só uma pergunta: Vc consegue inserir os .js na sua página utilizando o wordpress? Pq o meu blog aqui é direto no domínio deles, não sei como deve funcionar a ferramenta aplicada em domínio próprio.
Flw.
#36 por Weverton Naves em Março 27th, 2009
Dede, com essa versão de lightbox não. A não ser que vc edite o código.
#37 por Weverton Naves em Março 27th, 2009
Patrick, as imagens ficam do tamanho que você salvá-las, tanto os thumbnails quanto as imagens grandes.
Abs.
#38 por Weverton Naves em Abril 1st, 2009
Amigo, esse parâmetro pode ser deletado. Ele é incluído pelo WPAdmin automaticamente.
Flw.