Antes de mais os meus parabéns a este grande projecto e a todos que pertencem à família pplware. Parece que ainda foi ontem que tudo começou mas já la vão 3 anos… e ainda vamos crescer mais. Hoje como é dia de festa trago-vos um post diferente do normal. A ideia é darem um toque profissional aos vossos sites através do uso de um pequeno script (LightBox), que vos permite dar uma efeito especial na apresentação de uma série de imagens (vejam o post “e porque hoje é sexta“) para terem uma ideia do que vos falo.
Os passos para colocar isto em funcionamento são os seguintes:
1º Download do script aqui
2º Descompactar e colocar na raiz do vosso site
3º Editar a página que contem as imagens e colocar a seguir a <header> o seguinte código:
<script type=“text/javascript” src=“js/prototype.js”></script> <script type=“text/javascript” src=“js/scriptaculous.js?load=effects”></script> <script type=“text/javascript” src=“js/lightbox.js”></script> <link rel=“stylesheet” href=“css/lightbox.css” type=“text/css” media=“screen” />
4º Criem um “thumbnail” da imagem original e coloquem um link na imagem do tipo:
<a href=”images/imagem1.jpg” rel=”lightbox” title=”Minha foto”>Carregue Aqui</a>
onde: imagem1.jpg – é o nome da imagem (em tamanho original). A imagem está dentro da pasta imagens. title – Um título para a imagem
5º Um pequeno truque 🙂 Este truque serve para que as imagens sejam tratadas como um grupo de imagens, sendo adicionado um menu de navegação. Experimentem.
<a href=”images/imagem1.jpg” rel=”lightbox[roadtrip]”>imagem 1</a> <a href=”images/imagem2.jpg” rel=”lightbox[roadtrip]”>imagem 2</a> <a href=”images/imagem3.jpg” rel=”lightbox[roadtrip]”>imagem 3</a>