Lightbox JS explicado em português

• Tweet
• Sharebar

• Tweet

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;
background-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