Tutoriais

Lightbox2 – Visualização de imagens com estilo no teu site

34 Comentários

Agora com suporte para o IE9!

Em 2008  (uffff ja passaram 3 anos), apresentamos aqui o Lightbox que permite dar um toque profissional e moderno ao nosso site, disponibilizando um efeito especial para apresentação de imagens. Esse efeito é bastante usado aqui no pplware e podem confirmar carregando na imagem de introdução deste artigo. Recentemente foi disponibilizado o Lightbox v2.05.

Vamos aprender como colocar em funcionamento o Lightbox no vosso site.

light_00

Como usar o Lightbox2 no nosso site?

Para colocarem o lightbox2 a funcionar no vosso site, devem seguir os seguintes passos:

Passo 1 – Download do script aqui (lightbox2.05.zip)

Passo 2 – Descompactar e colocar na raiz do vosso site

Passo 3 –  Editar a página que permitirá visualizar 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,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

Passo 4 – (Imagem única) 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

light_01

Passo 5 – (Grupo de imagens) Quem pretender disponibilizar um grupo de imagens, e incluir um menu de navegação devem usar o código seguinte em substituição do anterior:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

light_02

E está feito. Agora basta abrir a página que acabaram de desenvolver para observar se as imagens são apresentadas com estilo. Alguma duvida ou questão que tenham, podem colocar em comentário para vos podermos ajudar.

Alguém conhece outros scripts do género?

Artigos relacionados

Homepage: LightBox2

PUB
Autor: Pedro Pinto
Partilhar:
Tags:

PUB.

Questão Semanal

Deveria haver uma marca obrigatória em todas as imagens geradas por IA?

Ver Resultados

Loading ... Loading …
Arquivo de Questões

PUB.

Velocímetro Pplware

Teste a velocidade da sua Internet
Artigo anterior

Tardes de Cinema
Próximo artigo

Apple afinal não recolhe localização dos utilizadores
PUB

Comentários

34

Deixe um comentário

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

  1. Avatar de Brito
    Brito

    Costumo utilizar o Simpleviewer. Uso como plugin do Adobe Lightroom, e apenas tenho que expostar e colocar no servidor, não me obrigando a “abrir o capôt” ao nível da edição do script…

    Para já. tem funcionado.

    Responder
  2. Avatar de Adérito Valentim
    Adérito Valentim

    Eu gosto bastante do fancybox: http://fancybox.net/

    Responder
    1. Avatar de qb
      qb

      x2

      Responder
  3. Avatar de Tharos
    Tharos

    Parabéns por mais um excelente artigo. Já tive que usar e funciona mto bem.

    Responder
  4. Avatar de Porconta
    Porconta

    Não há nada mais complicado para eu instalar, isto é de caras, não?

    Responder
  5. Avatar de Miguel Chaves
    Miguel Chaves

    também existe o Lightbox Web Gallery Generator http://www.codeproject.com/KB/cs/GalleryCreator.aspx e este http://visuallightbox.com/

    Responder
    1. Avatar de R@lf
      R@lf

      @Miguel Chaves

      No Lightbox Web Gallery Generator, por acaso tens ideia de como é que se faz para, ao passar o rato sobre o thumbnail, não aparecer aquela caixinha com o nome do ficheiro?
      Já mexi no HTML, consegui mudar o texto e a descrição, mas não queria que a caixinha aparecesse, queria sim que aparecesse só depois no slideshow, na descrição da foto.
      Será no CSS?

      Responder
      1. Avatar de Miguel Chaves
        Miguel Chaves

        Oi R@lf… nunca fiz isso, mas em princípio deve ser nas CSS, tenta pesquisar no fórum deles em Questions & Answers – Ask a question http://www.codeproject.com/KB/cs/GalleryCreator.aspx eles de certeza que te vão ajudar. Cumps!

        Responder
  6. Avatar de Miguel Chaves
    Miguel Chaves

    OFFTOPIC

    existe aqui outro Miguel Chaves no PPLWARE??? WTF :O

    eu sou o Miguel Chaves, mas sou músico…

    Responder
  7. Avatar de .::MPn::.
    .::MPn::.

    Onde já vi isto?? ahah
    Pelo menos aqui funciona bem 🙂

    Responder
  8. Avatar de Pedro Lamas
    Pedro Lamas

    Já agora deixo a alternativa via jQuery (em vez de Prototype como é este caso):

    http://balupton.com/sandbox/jquery-lightbox/demo/

    E para quem tiver WordPress, pode sempre usar o plugin que eu desenvolvi com base no link acima:

    http://www.pedrolamas.com/projectos/jquery-lightbox/

    Responder
  9. Avatar de Emannxx
    Emannxx

    Era mesmo isto que eu precisava para o meu portfolio. Obrigado 🙂

    Responder
  10. Avatar de hm
    hm

    e pronto… é nestas alturas que me sinto um nabo e tenho pena de não perceber mais um pouco disto 🙁
    tentei aplicar na minha droppage mas sem grande sucesso, aparecia um link para ver a imagem mas não estava a ir para o sitio correcto e além disso nunca a conseguia colocar no sitio certo e aparecia sempre o mesmo link nas páginas todas…
    fico à espera do tutorial para fazer isto nas nossas droppages eheh (e por tutorial leia-se passo a passo para gente estúpida como eu)

    cumps

    Responder
    1. Avatar de Sílvio Bernardo
      Sílvio Bernardo

      Será que não lhe falta a pasta “JS”, na raíz da sua WebPage? Após sacar os 3 ficheiros do LightBox (prototype.js, lightbox.js, scriptaculous.js), deve guardá-los numa pasta designada por “JS”, criada na raíz do website.

      Quanto às imagens tem duas opções: ou guarda-as numa pasta designada por “images”, também na raíz do website, e garantir que o nome destas é igual ao nome que está a ser utilizado no código (image-1.jpg, image-2.jpg, etc) ou então, indica um URL directo da net. Ou seja: em vez de,
      href=”images/image-1.jpg” , pode ser deste género href=”https://pplware.sitedev.pt/wp-content/uploads/2011/04/light_00_thumb.jpg” o que interessa é que no atributo “rel”, que define o nome do grupo, todas tenham a mesma designação, para que pertençam ao mesmo grupo.

      Depois aplicar o código deixado neste tópico.

      Se mesmo assim não resultar, só deve faltar uma coisa: realizar o PASSO 3, não dentro da tag , mas sim imediatamente antes da tag .

      De certeza que assim resulta.

      Responder
      1. Avatar de Sílvio Bernardo
        Sílvio Bernardo

        Este blog cortou as tags que indiquei… aqui fica a rectificação:

        Será que não lhe falta a pasta “JS”, na raíz da sua WebPage? Após sacar os 3 ficheiros do LightBox (prototype.js, lightbox.js, scriptaculous.js), deve guardá-los numa pasta designada por “JS”, criada na raíz do website.
        Quanto às imagens tem duas opções: ou guarda-as numa pasta designada por “images”, também na raíz do website, e garantir que o nome destas é igual ao nome que está a ser utilizado no código (image-1.jpg, image-2.jpg, etc) ou então, indica um URL directo da net. Ou seja: em vez de,
        href=”images/image-1.jpg”, pode ser deste género href=”https://pplware.sitedev.pt/wp-content/uploads/2011/04/light_00_thumb.jpg” o que interessa é que no atributo “rel”, que define o nome do grupo, todas tenham a mesma designação, para que pertençam ao mesmo grupo.
        Depois aplicar o código deixado neste tópico.
        Se mesmo assim não resultar, só deve faltar uma coisa: realizar o PASSO 3, não dentro da tag “header” , mas sim imediatamente antes da tag “/body”.

        De certeza que assim resulta.

        Responder
    2. Avatar de Sílvio Bernardo
      Sílvio Bernardo

      Tuturial original do LightBox:

      http://www.huddletogether.com/projects/lightbox2/

      Responder
      1. Avatar de hm
        hm

        Obrigado Silvio, vou dar uma espreitadela, mas sim tinha lá as pastas todas que aliás nem criei, já ficaram lá quando extraí o ficheiro

        cumps

        Responder
  11. Avatar de Francisco Ferreira
    Francisco Ferreira

    Sou só eu que continuo a ter problemas com o IE9 aqui no Pplware?

    Já agora, alteraram alguma coisa no layout da página principal? O texto está estranho, maior e parece que está todo em bold.

    Responder
    1. Avatar de Pedro Lamas
      Pedro Lamas

      De facto, creio que o IE9 tem alguns problemas com esta versão do Lightbox (pelo menos a mim, clicando em qualquer parte da página ela fica toda preta!)

      Responder
      1. Avatar de Sílvio Bernardo
        Sílvio Bernardo

        Sim é verdade! Tem que se activar o modo de compatibilidade com o IE8, ou IE7, e já passa a comportar-se bem! 😉

        (No IE9 facilmente de muda o modo de compatibilidade, num botão existente imediatamente antes do botão “Refresh”)

        Por causa destas, e de outras coisas, desinstalei o IE9. è muito mais bonito de aspecto gráfico, mas ainda assim, prefiro o IE8.

        Responder
        1. Avatar de Pedro Lamas
          Pedro Lamas

          Bem, puxando a brasa à minha sardinha, penso que o que tenho no meu blog (jQuery Lightbox) funciona tão bem no IE9 como em qualquer outro browser…

          http://www.pedrolamas.com/projectos/jquery-lightbox/

          Responder
          1. Avatar de Francisco Ferreira
            Francisco Ferreira

            No IE9 funciona 🙂

          2. Avatar de Sílvio Bernardo
            Sílvio Bernardo

            🙂 Há um mesito atrás também experimentei essa versão, e realmente está excelente! É muito mais compatível que a versão original! 😀

        2. Avatar de Francisco Ferreira
          Francisco Ferreira

          Mas isso devia ser o site a fazer, não devia ser preciso eu ir lá carregar.
          E eu perguntei isto pois neste artigo diz logo no início que já é compatível com o IE9, mas afinal parece que não.

          Responder
  12. Avatar de Sílvio Bernardo
    Sílvio Bernardo

    Mas por vezes, o código que faz a ligação aos ficheiros externos de JavaScript, deve ficar “imediatamente” antes da tag , e não dentro do , pois é mais compatível com todos os browsers. Já testei!

    Mesmo neste maravilho blog (pplware) 🙂 têm desta maneira.

    Responder
  13. Avatar de vicio
    vicio

    já usei mas substitui pelo shadowbox.
    modo de funcionamento muito idêntico mas fixa a imagem ao ecrã (não se desloca com o scroll e molda o tamanho), menos ficheiros a usar (1 css + 1 js + 2 linha de css para correcção de bugs no IE), possibilidade de usar em imagens, videos, flash, paginas.
    na minha opinião é um pouco melhor.

    Responder
  14. Avatar de André Cruz
    André Cruz

    Boas, alguém sabe se existe algum script que faça a mesma coisa mas para pdf?

    Responder
  15. Avatar de DiegoTech
    DiegoTech

    Olá, esse Lightbox eu aprendi a instalar mais no IE9 não funciona quando clica na foto ele abra outra página com a foto, só no mozila, safari que funciona alguem pode me ajudar a compatibilizar com o IE9?
    abraço!

    Responder
    1. Avatar de Pedro Lamas
      Pedro Lamas

      Mas que versão de Lightbox está a utilizar? É que há muitas mesmo…

      Responder
  16. Avatar de FLed
    FLed

    Amigo estou tendo um conflito com outro script e ja tentei de tudo, você poderia me ajudar?

    Responder
  17. Avatar de Eduardo
    Eduardo

    Amigo…
    estou querendo saber como faço para exibir diversas imagens através de um link, mas não gostaria que abrisse um popup..
    teria como me ajudar? URGENTE!!!

    Responder
  18. Avatar de Rudy Veiga
    Rudy Veiga

    o download do script não está mais disponível, tem como arrumar?

    Responder
  19. Avatar de Gildeon
    Gildeon

    Aqui não deu certo, faço tudo certo mas nao adianta.

    Responder
  20. Avatar de joao
    joao

    ola tenhum um problema no meu site, não tou conseguindo coloca tem algum tutorial ja fiz do mesmo jeito que diz mais não pega continua abrindo outra janela só da imagem por favor mim ajuda.

    Responder
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. A administração deste site reserva-se, desde já, no 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.