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 dependencias 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…
Gostei António. Cumprimentos
Gostei porem aqui nao apareceu loading nen o button de Close!
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?
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.
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?
teste
Estava procurando esse sisteminha mesmo vlw lek
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’;
Olá pessoal, fiz o download, tudo certinho e nao funcionou tbm, nada simplesmente abre a imagem como link normal!
Alguem poderia me dizer porque?
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