Imagens no teu site com LightBox
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>
Este artigo já foi lido 1,528 vezes
Arquivado na categoria: Scripts
21 comentários a “Imagens no teu site com LightBox”
Deixe o seu comentário
Aviso: Todo e qualquer texto publicado na internet através deste sistema não reflete, necessariamente, a opinião deste weblog ou do(s) seu(s) autor(es). Os comentários publicados através deste sistema são de exclusiva e integral responsabilidade e autoria dos leitores que dele fizerem uso. O autor deste weblog reserva-se, desde já, o direito de excluir comentários e textos que julgar ofensivos, difamatórios, caluniosos, preconceituosos ou de alguma forma prejudiciais a terceiros. Textos de caráter promocional ou inseridos no sistema sem a devida identificação de seu autor (nome completo e endereço válido de email) também poderão ser excluídos.
18 de Abril de 2008 às 2:28 pm
Parabéns ao Peopleware pelo aniversário. continuem o excelente trabalho !
18 de Abril de 2008 às 2:42 pm
Dá para blogs também?
18 de Abril de 2008 às 2:50 pm
@Jorge Oliveira
Sim..claro
Pedro Pinto
18 de Abril de 2008 às 2:57 pm
Pedro Pinto,
Excelente… só faltava uma indicação: que aplicação usam para criar “thumbnail’s”?
18 de Abril de 2008 às 2:57 pm
O nextgen gallery é mt melhor, vejam exemplos no meu site.
__________________
http://www.otal.pt.vu
18 de Abril de 2008 às 3:00 pm
passa-se aqui qualquer coisa porque, depois de fazer os passos todos, não está a funcionar
18 de Abril de 2008 às 3:07 pm
@puling,
Cuidado com o copy/paste. As aspas têm mesmo de ser aspas e não o caracter que está apresentado.
Passa isso pelo Notepad++ (ou outro qualquer) e substitui o que parecem ser aspas por aspas.
Caso ainda assim não dê, tenta substituir as aspas por ‘plica’.
Avisa depois se deu.
18 de Abril de 2008 às 3:23 pm
As maravilhas do JS….claro que se o javascript estiver desactivado lá se vai o efeito
18 de Abril de 2008 às 3:50 pm
@Pedro Simões
Obrigado pela dica, era isso mas também tinha outro problema no código que só vi depois.
Agora já rula
Obrigado
18 de Abril de 2008 às 4:19 pm
Nice!
Já procurei bem por este script e não consegui encontrar. Vai ter uso=P
Cumps e mais uma vez Parabéns!
18 de Abril de 2008 às 4:44 pm
Por acaso já conhecia.
Como sou curioso… foi só dar uma espreitadela ao código do pplware às sextas e… PLIM! Lá estava o nome do LightBox
Depois foi só usar o amigo Google
É muito fixe, o LightBox. Eu por acaso não preciso, mas já o recomendei a um amigo que é fotografo.
18 de Abril de 2008 às 8:22 pm
Presumo que o Lightbox não funcione no “Wordpress.com”…
Certo?
Abraço!
18 de Abril de 2008 às 8:46 pm
@ teixeira
sendo ke o próprio pplware é wordpress tens ai resposta à pergunta
podes até instalar uma extensão ke te evita toda a trabalheira fazendo isto automático
18 de Abril de 2008 às 10:35 pm
@Zé Miguel,
agradeço a resposta, mas a “plataforma” a que me refiro não é o mesma do Peopleware, simplesmente porque esta está alojada num servidor pago pelos mesmos enquanto o Wordpress.com é gratuito e já vem com widgets pré-definidos.
É sobre o Wordpress.COM que eu perguntava até porque recentemente mudou o seu interface..
Obrigado de qualquer das formas.
Abraço!
19 de Abril de 2008 às 12:51 am
@Teixeira,
Lamento informa-te mas o wordpress.com não suporta que se instale plugins externos e os que eles têm disponiveis internamente são muito limitados.
E sim, o Peopleware usa a plataforma wordpress, mas assente num servidor próprio e que controlamos.
19 de Abril de 2008 às 6:02 pm
Que jeito me tinha dado este post há uns meses atrás!!! Reparei neste script precisamente na rubrica “e pq hoje é sexta” e googlei por aí até aprender no site do autor como utilizar o script. Dá realmente aquele toque mais profissional à galeria de imagens do nosso site.
Mto bom artigo.
Abraço.
20 de Abril de 2008 às 2:19 pm
Bom post e Bom aniversário.
20 de Abril de 2008 às 5:49 pm
Sinceramente, já pouca coisa me surpreende de vcs, habituaram-me sempre a posts extraordinários …. Magnifico este post …
Bem haja pela vossa existência, e continuem o excelente trabalho …
Parabéns!!
23 de Abril de 2008 às 9:57 am
Já não consigo viver sem o Peopleware…..
Parabéns e continuem a melhorar sempre!!!!
29 de Maio de 2008 às 8:00 pm
Olá
Consegui utilizar o “efeito”, mas não aparece as abas de prev e next.
Alguém pode me ajudar.
Obrigada
19 de Julho de 2008 às 3:16 pm
Olá Pedro!
Achei exatamente o efeito que estava procurando. No meu computador funcionou perfeitamente. Agora quando mando os arquivos para o servidor não funciona muito bem. A imagem abre, só não aparece os botões (close, next). Ja verifiquei as imagens estão dentro da pasta imagens. Até pq tenho no servidor a mesma estrutura que tenho em meu PC. Se possível aguardo uma resposta!
Abração e sucesso!