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…
Recent Comments