PplWare Mobile

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


Pedro Pinto é Administrador do site. É licenciado em Engenharia Informática pelo Instituto Politécnico da Guarda (IPG) e obteve o grau de Mestre em Computação Móvel pela mesma Instituição. É administrador de sistemas no Centro de Informática do IPG, docente na área da tecnologia e responsável pela Academia Cisco do IPG.

Destaques PPLWARE

  1. Brito says:

    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.

  2. Adérito Valentim says:

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

  3. Tharos says:

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

  4. Porconta says:

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

  5. Miguel Chaves says:

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

    • R@lf says:

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

  6. Miguel Chaves says:

    OFFTOPIC

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

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

  7. .::MPn::. says:

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

  8. Pedro Lamas says:

    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/

  9. Emannxx says:

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

  10. hm says:

    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

    • Sílvio Bernardo says:

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

      • Sílvio Bernardo says:

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

      • hm says:

        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

  11. Francisco Ferreira says:

    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.

  12. Sílvio Bernardo says:

    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.

  13. vicio says:

    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.

  14. André Cruz says:

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

  15. DiegoTech says:

    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!

  16. FLed says:

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

  17. Eduardo says:

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

  18. Rudy Veiga says:

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

  19. Gildeon says:

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

  20. joao says:

    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.

Deixe uma resposta

O seu endereço de email não será publicado.

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

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.