Home » » Geral » Lightbox JS explicado em português

Lightbox JS explicado em português

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:

  1. Incluir o script lightbox.js no header da página.

    <script type="text/javascript" src="lightbox.js"></script>

  2. 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

  1. 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; }

  2. 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;
    back\ground-color: transparent;
    background-image: url(blank.gif);
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
    }

  3. 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

  1. lightbox.js - O script
  2. lightbox.css - O estilo básico com o suporte PNG para o Internet Explorer.
  3. overlay.png - 80% opacidade, padrão escuro utilizado para criar o efeito de sombra sobre a página
  4. loading.gif - Imagem de barra de progressão

Site Oficial: Lightbox v2

Partilha esta entrada:
  • del.icio.us
  • DoMelhor
  • Mar.cant.es
  • Rec6
  • Sapo
  • StumbleUpon
  • Technorati
  • TwitThis
  • Ueba
  • E-mail this story to a friend!
  • Pownce
Subscreve as Feeds

RSS Comentários Comentários

  1. Ana Flávia

    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

  2. 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/

  3. muito bom cara
    parabens :D

  4. cara, eu tenho que subir o arquivo zipado pro header?? Vou tentando aqui…

    Valeu :wink:

  5. ola, muito legal o ligthbox, porem queria saber se tem como abrir um arquivo em vez de uma imagem estilo um iframe …

    valeu.

  6. coom faço para usar com varias imagens??

  7. Ótima tradução para PT. Faz uma tradução do Lightbox JS versão avançada (com prev e next).

  8. 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!

  9. 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>

  10. Morgan

    Existe algum plugin que faça o mesmo que o lighbox faz com as imagens mas com arquivos PDF , DOC, XLS, ETC?

  11. Sim, penso que o Shadowbox serve para o efeito:
    http://wordpress.org/extend/plugins/shadowbox-js/faq/

  12. pega a versão 2.0

    meu unico problema é que ao abrir a foto ela nao abre na tela. .somente mais embaixo.

  13. 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.

  14. Caracas meu. Ninguém me responde. O que tá pegando?

  15. Em Setembro publico algo sobre a lightbox v2 :)