Muuuita gente quer saber, e traduzindo do site do projeto explico como usar o famoso Lightbox ja na versão 2.04, para que quando clicarmos na imagem deixar o fundo escuro e dar o devido destaque a imagem ampliada.
1 – Baixar o pacote:
Você precisa baixar o pacote com arquivos que farão o efeito.
CLIQUE AQUI para baixar.
Baixado, descompacte os arquivos para a pasta que está o seu site, e vamos aprender como usar:
2 – Como Usar:
Primeiro, você precisa incluir os arquivos JS baixados no site, Inclua estas linhas dentro do Cabeçalho <head> do seu HTML:
<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>Cuide o caminho… a pasta js neste caso está na raiz da pasta do site.
Inclua também o arquivo CSS:
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />Verifique a CSS e certifique-se o prev.gif referenciado e arquivos next.gif estão no local certo. Além disso, certifique-se o loading.gif e close.gif, arquivos referenciados no topo do arquivo lightbox.js estão no local certo.
Agora ativamos o script:
Adicionar um rel=”lightbox” a qualquer link para ativar a tag lightbox. Por exemplo:
<a href="images/image-1.jpg" rel="lightbox" title="titulo aqui">image #1</a>
Se você tem um grupo de imagens relacionadas e quer que apareça em grupo,siga este código abaixo (note que tem parâmetro a mais entre colchetes):
<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 tem limites para o número de conjuntos de imagens por página ou quantas imagens são permitidos em cada conjunto.
Assuntos Relacionados
8 internautas respondeu este post
Profiiiiii!!! Como a gente faz pra acertar esse lightbox para o mozilla e google chrome, pois nesses navegadores a imagem fica centralizada, mas a parte cinza transparente vaza na parte inferior e no lado direito. No IE fica certinho.
Karen sumida, como vai?
Colocou no ar o exemplo que você usou? Queria ver!
Até +
Boa tarde Amigo, preciso saber como centralizo (horizontal e vertical) o quadro da imagem do efeito lightbox, pois testei as linhas de comando e ele fica grudado no topo da página ( http://www.performanceinformatica.com/teste_gabinete.htm )como podes ver aqui.
Olá Pablo.
Eu gosto de usar o Firebug (plugin do firefox) pra achar estas coisas…. no teu caso, vi que na linha: da DIV class=”lightbox” tem estas configurações: top: 226px; left: 0px;. Dá uma busca neste valor de top e diminui ele, já vai te ajudar bastante! Até a próxima!
Buenas professor, tentei seguir sua recomendação, porém sou meio manco neste proço, e não achei a tal referencia citada acima, poderia ser um pouco mais claro? Não achei os valores acima citados.
http://www.performanceinformatica.com/produtos_gabinetes.htm
Olá!
Usei o lightbox numa página que estou desenvolvendo, mas as bordas das imagens só ficam azuis e não consigo mudar isto, mesmo com css.
Segue o link:http://pablovaladarescom.sitebr.net/portfolio.html
Grato por qualquer luz
Hola Professor,
Gostaria de uma ajuda sua, estou usando este magnifico script na minha página, mais estou lutando aqui para que cada imagem quando clicar nela a pagina com a outra imagem do mesmo tamanho da segunda imagem
Tens que ter duas pastas separadas, uma com as miniaturas e a outra com as maiores.
Deixe sua resposta