Imagens no teu site com LightBox

36 Comentários

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:

Download do script aqui

Descompactar e colocar na raiz do vosso site

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” />


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

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>


Partilhar:
Tags:

Comentários

36

Deixe um comentário

O seu endereço de email não será publicado. Campos obrigatórios marcados com *

  1. Avatar de MARCOS GARCIA SOUTO

    Parabéns ao Pplware pelo aniversário. continuem o excelente trabalho !

  2. Avatar de Jorge Oliveira
  3. Avatar de Pedro Pinto

    @Jorge Oliveira

    Sim..claro 🙂

    Pedro Pinto

  4. Avatar de Marcos
    Marcos

    Pedro Pinto,

    Excelente… só faltava uma indicação: que aplicação usam para criar “thumbnail’s”?

  5. Avatar de Miguel

    O nextgen gallery é mt melhor, vejam exemplos no meu site.

    __________________
    http://www.otal.pt.vu

  6. Avatar de puling
    puling

    passa-se aqui qualquer coisa porque, depois de fazer os passos todos, não está a funcionar 🙁

  7. Avatar de Pedro Simões

    @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.

  8. Avatar de Dr. Estagiário

    As maravilhas do JS….claro que se o javascript estiver desactivado lá se vai o efeito

  9. Avatar de puling
    puling

    @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 😉

  10. Avatar de Oliveira
    Oliveira

    Nice!

    Já procurei bem por este script e não consegui encontrar. Vai ter uso=P

    Cumps e mais uma vez Parabéns!

  11. Avatar de BlinZK
    BlinZK

    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.

  12. Avatar de Teixeira

    Presumo que o Lightbox não funcione no “WordPress.com”…

    Certo?

    Abraço!

  13. Avatar de Zé Miguel
    Zé Miguel

    @ 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

  14. Avatar de Teixeira

    @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!

  15. Avatar de Pedro Simões

    @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.

  16. Avatar de Tharos
    Tharos

    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.

  17. Avatar de Jorge Cunha

    Bom post e Bom aniversário.

  18. Avatar de Eduardo
    Eduardo

    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!!

  19. Avatar de aaboavida
    aaboavida

    Já não consigo viver sem o Pplware…..
    Parabéns e continuem a melhorar sempre!!!!

  20. Avatar de cintilanti
    cintilanti

    Olá

    Consegui utilizar o “efeito”, mas não aparece as abas de prev e next.
    Alguém pode me ajudar.

    Obrigada

  21. Avatar de Carlos Eduardo - Kadu

    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!

  22. Avatar de Brugraph

    Caramba!!! Muito show, com esse script dá pra fazer uma bela galeria de fotos!!!

    Valeu!!!

  23. Avatar de paulo

    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



  24. Avatar de Rodrigo
    Rodrigo

    Cara ja tentei colocar isso ai de umas 1000 maneiras
    e nao consegui
    ME ajudaaaaaaaaaaaaaa
    E seu trabalho e muito legal
    Att
    Rodrigo

  25. Avatar de Ariana
    Ariana

    Perfeito! Funcionou direitinho! Só alterar mesmo as aspas…e o caminho das imagens de acordo com sua necessidade!
    =D

  26. Avatar de Daniel

    cara, parabéns…

    li diversos tutos sobre isso e nada de funcionar, o seu está bem completo e simples!!! funcionou certinho!!

    abração!!! sucesso!!!

  27. Avatar de Wensley Adriano Cordeiro

    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

  28. Avatar de David Soares

    … uma salva de palmas!!!! 😉

  29. Avatar de Teodomiro Neto
    Teodomiro Neto

    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

  30. Avatar de Pri

    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!

  31. Avatar de Luis
    Luis

    Olá. Não consigo colocar no blogger.com.

    Obrigado

  32. Avatar de Paulo Cunha
    Paulo Cunha

    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.

  33. Avatar de Wesley
    Wesley

    Não funciona no blogger, já tentei mais de 3 codigos, não funciona. Troquei até de tema!

  34. Avatar de Alessandro
    Alessandro

    Funcionou perfeitamente. Tanto para uma foto ou para mais de uma!

    Só que gostaria de saber se tem como fazer grupos de fotos. Pois adicionando o “[roadtrip]”, todas as que tiverem serão exibidas juntas.
    Preciso determinar grupos para exibição de determinadas fotos. É possível?
    Obrigado!

  35. Avatar de carlos
    carlos

    gostaria de colocar um popup igual ao seu no meu site! teria com compartilhar os aquivos?
    parabens esta muito bacana!

  36. Avatar de alberlabn
    alberlabn

    ola como colocar o lightbox para dimensionar uma imagem no celular tipo: a mesma imagem no pc e quando vou pro celular ela dimensiona para o tamanho proporcional no celualr