Tutorial - Implementando o efeito Lightbox JS em fotos

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 viistantes 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 src="lightbox.js" type="text/javascript"><!--mce:0--></script>

2. Adicionar o atributo rel=”lightbox” a qualquer link para activar a lightbox nesse link. Por exemplo:

   <a title="minha legenda" rel="lightbox" href="imagem.jpg">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 seus 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; }

   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");
   }

   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

   Exemplos de galerias com variações de Lightbox que desenvolvi:

   • Galeria Placebo - Exemplo feito em aula para os alunos do curso Técnico em Informática do SENAI Londrina
   • Site Metalúrgica Gavião

• Variantes do efeito Lightbox para imagens, videos, HTML e sites externos.
• Curso de Introdução ao CSS em 10 vídeo-aulas
• Como instalar o Wordpress: tutorial para quem está iniciando
• Como instalar temas no Wordpress: tutorial para quem está iniciando
• Melhorando a tipografia de interfaces web com o Google Font Directory

Tags:CSS, javascript, lightbox, SENAI, tutorial