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>
|
|
|
Tweet |
Pin It
|
Arquivado na categoria: Scripts
33 Comentários
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 site 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 site 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 do seu autor (nome completo e endereço válido de email) também poderão ser excluídos.
Parabéns ao Pplware pelo aniversário. continuem o excelente trabalho !
Dá para blogs também?
@Jorge Oliveira
Sim..claro
Pedro Pinto
Pedro Pinto,
Excelente… só faltava uma indicação: que aplicação usam para criar “thumbnail’s”?
O nextgen gallery é mt melhor, vejam exemplos no meu site.
__________________
http://www.otal.pt.vu
passa-se aqui qualquer coisa porque, depois de fazer os passos todos, não está a funcionar
@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.
As maravilhas do JS….claro que se o javascript estiver desactivado lá se vai o efeito
@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
Nice!
Já procurei bem por este script e não consegui encontrar. Vai ter uso=P
Cumps e mais uma vez Parabéns!
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.
Presumo que o Lightbox não funcione no “WordPress.com”…
Certo?
Abraço!
@ 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
@Zé Miguel,
agradeço a resposta, mas a “plataforma” a que me refiro não é o mesma do Pplware, 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!
@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 Pplware usa a plataforma wordpress, mas assente num servidor próprio e que controlamos.
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.
Bom post e Bom aniversário.
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!!
Já não consigo viver sem o Pplware…..
Parabéns e continuem a melhorar sempre!!!!
Olá
Consegui utilizar o “efeito”, mas não aparece as abas de prev e next.
Alguém pode me ajudar.
Obrigada
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!
Caramba!!! Muito show, com esse script dá pra fazer uma bela galeria de fotos!!!
Valeu!!!
imagem 1
imagem 1
imagem 1
tenho esse tipo de lightbox acima, blz funciona, e depois queria outra galeria diferente ou seja uma nova contagem de 1 ate 5 vamos supor no mesmo html, conforme o debaixo. como fazer essa façanha ?
imagem 7
Cara ja tentei colocar isso ai de umas 1000 maneiras
e nao consegui
ME ajudaaaaaaaaaaaaaa
E seu trabalho e muito legal
Att
Rodrigo
Perfeito! Funcionou direitinho! Só alterar mesmo as aspas…e o caminho das imagens de acordo com sua necessidade!
=D
cara, parabéns…
li diversos tutos sobre isso e nada de funcionar, o seu está bem completo e simples!!! funcionou certinho!!
abração!!! sucesso!!!
Amigo teria como eu invés de carregar uma imagem jpg carregar um swf, até alguns tuto na net mas dizem para colocar no html, mas que html?
Grato
‘
Wensley
… uma salva de palmas!!!!
olá, tudo bem?
desculpe incomodar, gostaria apenas de tirar uma dúvida, seguindo teu passo a passo ai, quando no site clico na imagem ela não abre.
será que você poderia dar uma revisada nisso e me comunicar algo por e-mail?
fico grato desde já pela paciência e bondade.
um abraço
Aqui não ta funcionando… Já troquei as aspas mas não funcionou… Alguem sabe o que devo fazer? É pra usa num site (não wordpress)
Thanks!
Olá. Não consigo colocar no blogger.com.
Obrigado
Ola a todos, eu estou com uma duvida. Quando eu copio o codigo para a imagem aparece o texto “carregue aqui” e se clicar aí fica tudo ok, aparece o efeito. Eu queria saber como fazer para em vez de aparecer o tal texto, apenas clicar na imagem e fazer o efeito.
Desde já muito obrigado.
Não funciona no blogger, já tentei mais de 3 codigos, não funciona. Troquei até de tema!