Forums » HTML & HTML 5

Lightbox JS explicado em português

    • 11496 posts
    12 de junho de 2013 17:57:57 ART

    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:
    Incluir o script lightbox.js no header da página.
    Código:
    <script type="text/javascript" src="lightbox.js"></script>


    Adicionar o atributo rel=”lightbox” a qualquer link para activar a lightbox nesse link. Por exemplo:
    Código:
    <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
    Podem utilizar CSS para adaptar as imagens ao vosso layout.
    Código:
    #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.
    Código:
    #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");
    }


    Se pretenderem colocar uma imagem de loading, têm de especificar a sua localização no topo do ficheiro lightbox.js.
    Código:
    var loadingImage = 'loading.gif';


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

    Site Oficial: Lightbox v2


    lightbox.zip [5.9 KB]


    Este post foi editado por Oliveira Dario em 15 de julho de 2013 01:51:58 ART"