Lightbox o que é e para que serve!

Com certeza já todos viram em algum site, um efeito quando se clica nas imagens que faz um sobrepõe a imagem à página, perguntaram-me hoje como é que se faz isso. Ora ai vai a minha tentativa de explicação.

Em quase todos os sites em que aparece este efeito, recorrem ao lightbox, que é um pequeno script em javascript que cria este efeito quando se clica numa imagem que linka outra, por exemplo um thumbnail que é um link para a imagem em tamanho real, em que a segunda aparece sobreposta á página mostrada no browser.

Para usar o lightbox é necessário fazer download do mesmo do site (Download Lightbox) .

Em seguida na imagem (Thumbnail) que tem o link para a imagem em tamanho real acrescentar o atributo rel=”lightbox” no link. Ficando o link completo já com a imagem com a seguinte sintaxe <a href=”ImagemReal.jpg” rel=”lightbox” ><img src=”Thumbnail.jpg” alt=”” /></a>.

Para que isto funcione é necessário acrescentar no header da página a referencia ao ficheiro onde está o o script do lightbox e suas dependências e também do css usado pelo lightbox,para o fazer é necessário acrescentar duas linhas no header que são:

<link rel=”stylesheet” href=”CaminhoaPara/lightbox.css” type=”text/css” media=”screen” />
<script type=”text/javascript” src=”CaminhoPara/prototype.js”></script>
<script type=”text/javascript” src=”CaminhoPara/scriptaculous.js?load=effects”></script>
<script type=”text/javascript” src=”CaminhoPara/lightbox.js”></script>

E de uma forma simples temos um efeito que agora está na moda em tudo em que é site.

No site de download podem encontrar mais informações sobre o uso e também exemplo de utilização…

12 comentários em “Lightbox o que é e para que serve!”

  2. Pingback: Lightbox

  3. Gostei porem aqui nao apareceu loading nen o button de Close!

  4. Olá António Campos Fiz o teste do Lightbox e não funcionou. Ja verifiquei o caminho dos arquivos e está tudo correto. Como a colega acima comentou… não apareceu os botões, e em meu caso nem o efeito de abertura… Tem alguma idéia do que pode ser?

  5. O motivo deste post pode ser fútil para a maioria dos usuários aqui, senão todos, mas precisei postá-lo para ver como funciona o sistema. Pois estou desenvolvendo um sistema de blog e quero ver se esta mensagem vai ser publicada sem moderador e se vai haver ‘recarga’ no navegador sem usar ajax.

  6. Estou fazendo aqui mais um teste… To pensando em habilitar esta opção no blog somente se o usuário for cadastrado no sistema. Permitir que alguém poste algo somente se for cadastrado. O que acham?

  9. Se pretenderem colocar uma imagem de loading, têm de especificar a sua localização no topo do ficheiro lightbox.js

    exemplo:
    var loadingImage = ‘loading.gif’;

  10. Olá pessoal, fiz o download, tudo certinho e nao funcionou tbm, nada simplesmente abre a imagem como link normal!

    Alguem poderia me dizer porque?

  11. Bá cara! tava a horas procurando um lugar que explicasse isso, e encontrei aqui de uma maneira fácil e simples de entender. Parabéns e obrigado pela ajuda =)
    abraços

Os comentários estão fechados.