Efeito LightBox para imagens no Blog – Blogger e WordPress

Imagens
76
Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

efeito-lightbox-blogger-wordpress As imagens são parte importante para a estrutura de um blog e para a qualidade do conteúdo. Vou mostrar como exibir imagens em miniatura e abrir na mesma janela, sem fechar seu blog. É um efeito super profissional e ótimo para quem tem blog de fotografia ou precisa destacar as imagens com mais qualidade, sem reduzir pra caber na área de postagem.

✅ Canal no Youtube | Inscreva-se AGORA ✅

Esse modelo que vou ensinar funciona bem tanto no Blogger (Blogspot) quanto no WordPress e é bem simples de usar. Para ver o exemplo do que vamos fazer e qual o resultado, visite o link de teste:

Obs.: Esse recurso da conflito com o gadget de Seguidores do Blogger, quando aberto no Internet Explorer. Por isso recomendamos que faça testes antes de aplicar definitivamente em seu blog. Vale lembrar: sempre faça backup de seu blog antes de mudar qualquer coisa.

Créditos do LightBox

O serviço do LightBox é “open source” (código aberto) e gratuito. Esse é o site oficial com todos os detalhes e formas de uso:

  • LightBox2 – Visão Geral (em inglês)

Como criar o efeito LightBox no Blog

A primeira coisa a fazer é abrir o código-fonte de seu blog.

Passo 1: O JavaScript.

Se for no WordPress.org, abra o menu “Aparência” ~> “Editor” e abra o modelo “Cabeçalho (header.php)”.

Procure pela linha “</head>“. Imediatamente ACIMA dela, cole o seguinte trecho de código.

Se for no Blogger (Blogspot), vá ao menu “Layout” ~> “Editar HTML” então procure a linha “</head>” e imediatamente ACIMA, cole o trecho que segue:

<!-- JavaScript efeito Lightbox em fotos -->
<link href='https://ferramentasblog.com.br/imagens/lightbox/css/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='https://ferramentasblog.com.br/imagens/lightbox/js/prototype.js' type='text/javascript'/>
<script src='https://ferramentasblog.com.br/imagens/lightbox/js/scriptaculous.js?load=effects,builder' type='text/javascript'/>
<script src='https://ferramentasblog.com.br/imagens/lightbox/js/lightbox.js' type='text/javascript'/>
<!-- JavaScript efeito Lightbox em fotos -->

Salve sem modificar nada nesse código.

Agora vem a parte mais complicada. É preciso hospedar as imagens em algum lugar ou usar imagens que já estejam hospedadas. O problema é que não funciona se a imagem estiver no PicasaWeb (padrão do Blogger) – não sei o motivo disso.

Se você usa o WordPress.org, pode simplesmente usar as imagens em sua hospedagem normalmente. Se você usa o Blogger (Blogspot) terá que arrumar um local para armazená-las.

Passo 2: Como inserir no Blog

Em qualquer lugar de seu blog, seja dentro de um post ou até na sidebar (barra lateral), use o seguinte código para fazer funcionar o LightBox:

Se for usar uma miniatura da imagem:

<a href="URL_da_IMAGEM_ORIGINAL" rel="lightbox">
<img src="URL_da_IMAGEM_MINI" border="0">
</a>

Então altere apenas onde está marcado de vermelho. Nesse caso você pode usar duas imagens, sendo uma a original e a outra uma miniatura que será exibida como opção de clique. Você também pode simplesmente redimensionar a original.

Se for usar um link texto:

<a href="URL_da_IMAGEM_ORIGINAL" rel="lightbox">Texto do Link</a>

Coloque a URL de endereço da imagem no tamanho original onde está de vermelho. E onde está azul, escreva o texto para clicar e exibir a imagem.

O que mostramos aqui no passo 2 é exatamente o código HTML para adicionar imagens em qualquer lugar de seu blog ou site. Para que o LightBox funcione, inserimos um trecho “REL” que busca a função a ser executada no JavaScript.

Outros tutoriais sobre Imagens:

.

76 Comentários

  1. Olá Marcos,

    Meus parabéns pelo seu blog! Sempre o acompanho, através do RSS! Suas postagens na quarentena estão excelentes!

    Uma melhor que a outra! valeu pelas dicas!

    Em relação a dica desse post: show de bola! Confesso que sempre quis tentar fazer isso no blog, mas ou não sobrava tempo para pesquisar ou acabava encontrando caminhos alternativos para sanar minhas necessidades!

    Um forte abc!

    Parabéns!

    Atenciosamete
    Ricardo Costa
    Computação em Ação

    Responder

  3. @Douglas Costa,
    Você pode usar o tamanho de imagem que quiser em qualquer parte desse processo. Usei o termo "mini" só pra ilustrar que tem que ser uma imagem menor que o original.

    Responder

  4. Marcos, No meu blog eu tentei colocar e fiz tudo direitinho já tentei ver no site orginal, já fiz no modo wordprees, já coloquei em gadget tudo junto na postagem… Um monte de coisa e não pegou!

    Responder

  5. @Roger,
    se seu blog é no Blogger, então faça como recomendado para o Blogger. E, leia com atenção os passos do tutorial para fazer corretamente e entender todo o funcionamento.

    Responder

  6. Nossa, muito show, testei no meu blog de testes e funfou direitinho, no meu próximo post eu vou começar a usar esse efeito
    Muito show mesmo!

    Responder

  8. Já conhecia o Lightbox, e já ate tentei usar ele, do mesmo jeito quando eu baixei e também aqui, ele realmente não funciona com imagens do Picasa, mas no meu caso o maior problema é que o Lightbox funciona apena em blogs que uso para testes com templates do próprio Blogger, quando tento usar no template do meu blog de verdade ele simplesmente não funciona…
    Ainda estou tentando tomar coragem para ver qual outro dos meus javascripts estão entrando ai quem sabe em "conflito" com ele.
    É bem engraçado funcionar em templates padrões e nos personalizados não.
    Outro ponto ruim é ter que usar outro servidor, ate hoje o mais confiável e que oferece melhores opções com certeza é o Picasa.
    Além de ficar mais fácil hospedar as imagens direto pelo painel do blog ou Writer.
    Vou ver aqui depois e tento descobrir se realmente junto com outro hack este do Lightbox deixe de funcionar. =/

    Responder

  9. Achei o problema que comentei aqui em cima.
    Eu fiz um contador inspirado no seu aqui, ele lembra o do codigos blog mas juro ter feito antes o/
    Bom no meu eu troquei comentários por visitantes online, porque uso o Disqus como sistema de comentários. (mas sou usuario do blogger)
    Bom usei o gadget para aparecer os visitantes online e por algum motivo esse codigo não deixa eu abrir o lightbox.
    quem sabe outras pessoas que usam o contador de visitantes online do http://blogutils.net/ esteja tendo este mesmo problema.
    Tentei usar ele sem estar no meio do código do contador
    e ele apresentou o mesmo problema com o lightbox =/

    Fica ai um aviso para quem usa ele e tentar colocar o lightbox.

    Responder

  10. Já precisei disso em outras épocas, mas nem sabia como procurar. Agora que você explicou aqui vou passar a usar esse recurso.

    Marco Damaceno

    Responder

  11. Oi Marcos,

    Ja tinha experimentado este efeito mas no WordPress, obrigado por trazer ele agora para o BLOGGER!

    Pra quando o lançamento do seu e-book?

    So um pequeno aparte… eu tento seguir vc no Twitter, mas nao consigo..

    Abraço, Rudry, PORTUGAL

    Responder

  13. Valeu pelo tutorial Marcos .
    Funcionou de boa no meu blog .
    Seu blog já me ajudou e muito
    a personalizar o meu .

    Valeu Marcos

    Responder

  14. Mano é muito bom o light box, mas to me matando aqui tentando fazer ele funcionar junto com o gadget 'seguidores' ta brabo "/

    Responder

  15. Oi Marcos
    Consegui está funcionando direitonho, mas como faço para que apareça mais fotos.
    Clico no link e quando aparec eu vou clicando em uma setinha para ir passando outras.

    Responder

  17. Marcos
    è sim consegui descobrir isso ontem a noite.
    é só colocar [festa]
    Texto do Link

    nem me pergunte como descobri isso, não entendo bulufas de html e estou fuçando, mas seu tutorial foi o único que consegui fazer funcionar, os outros tem milhões de coisas todas sem proveito, o seu foi simples e objetivo. Muito Obrigada!!!
    Ah! Tem como colocar comentários nas fotos??? Parecido com o do Orkut???

    Responder

  18. Olá Marcos Lemos,

    primeiramente eu gostaria de parabenizar o seu trabalho neste blog e as dicas e tutorias milagrosos e uma mão na roda p/ nós que estamos começando, obrigado pelas dicas e sempre acompanho este blog, pois vem me ajudando muito na minha nova caminhada pela blogosfera.

    Você é referência de blogueiro, assim como outros, nota 10 aos artigos bem elaborados.

    Responder

  19. Marcos, esse efeito é muito legal, sabe se tem como atribuir o efeito a todos os links da página automaticamente, sem a necessidade de colocar o código individualmente em cada link?

    Responder

  21. Não posso deixar de agradecer a você pela boa aula de como fazer o Lightbox.
    Instalei no meu blog e ficou perfeito, obrigada.
    Gostaria que visse meu resultado nesse álbum fototema.
    Bjs

    Responder

  22. Ola Marcos Lemos, eu fiz um comentario que é uma ajuda a seu post, mas ele é muito grande e envolve Script's que não poderam ser colocados no comentario porque a caixa de comentarios de seu site não permite, mas eu botei em um Link o meu comentario que pode ser visto neste Link :http://txtb.in/fUl .
    Espero que meu Script ajude a melhorar este post e também ele irá ajudar outros blogueiros também.

    Abraços do Sr. de Tudo um Pouco.

    Responder

  24. MUITO OBRIGADA MESMO MARCOS!!!
    Eu passei a noite inteira (alem de alguns outros dias) procurando por um codigo assim que funcionasse no blogspot, tentei até mesmo e do link original em inglês antes de achar essa sua pagina, e aquele nao deu certo, eh um pouco diferente o codigo. Mas esse deu certinho!!! Ajudou muito mesmo!!!
    xD

    Responder

  26. Eu tive problemas quando fui colocar lightbox no blogger pois eu não tinha onde hospedar os css's, js's e plugins. Mas o dojo tem tudo dentro da caixa e ainda por cima está disponível no cdn do google e da aol. Encontre mais detalhes de como eu fiz aqui lightbox no blogger

    Responder

  27. Entrou em conflito com o gadget de seguidores,até funcionou,mas o gadget não aparece,então desinstalei o lightbox…uma pena,ficou tão legal!

    Responder

  28. Olá marcos!
    Parabéns pelo trabalho, gostei muito dessa ferramenta! Muito bom, só que quando fui colocar no meu blog, ele entra em conflito com os seguidores e não aparece =/

    Mas mesmo assim, esse blog me ajuda muito XD
    abraço

    Responder

  29. Aconteceu o mesmo comigo eu vim falar isso agorinha cara, de ser bom é mas é um merda em relação aos seguidores eu tirei

    Responder

    • @Walacy,
      Não, não temo como. Conforme explicado no tutorial, há mesmo um conflito entre esses dois e por isso recomendamos que pense bem em qual é mais importantes para o seu blog.

      Responder

  32. Oi Marcos, tudo bem? Graças ao seu post eu consegui colocar o lightbox no meu blog, fico muito bom!! 😀 Mas eu gostaria de saber como eu coloco o botão imprimir (print) ao lado do botão close, eu vi isso num site, esse aqui >> http://sandbox.tse-webdesign.be/lightbox-print
    tá em inglês, tem a explicação de como colocar e tem uma foto como demonstração de que funciona e tal, mas eu não entendi direito! Você pode me dizer se dá certo isso no seu código? e se der, pode me explicar como eu faço?? Pois eu não entendi quase nada 🙁
    Ah, e tem como mudar a palavra ‘close’ para ‘fechar’ ? Aguardo a resposta, e desde já obrigada.

    Responder

  33. Sr Marcos!

    Tutorial ímpar este seu. Simples e objetivo, capaz de me proporcionar o resultado que buscava para o meu blog. Iria coloca-lo apenas em uma página, mas gostei tanto que resolvi aplicar em todo o rocknrodas desta data em diante. Muito obrigado, mesmo!

    Responder

  34. Pingback: Como integrar Wordpress, PicasaWeb e LightBox | [ Ferramentas Blog ]

  36. Marcos foi de grande valia este tutorial para o blogger, antes era complicado colocar galeria de imagens no blogger, agora ficou fácil, apesar da trabalheira.
    Só um dúvida! Como colocar legenda ou nome no lightbox (imagem) como no wordpress?

    Grato

    Responder

  38. eu consegui!!!! ja sei o que aconteceu! apenas clicando em cima da imagem lah no album do picasa, copiar url da imagem…se nao for assim realmente não dá

    Responder

  40. Eae Marcos, blz?
    Cara, muito boa a dica.
    O único problema é que o código JavaScript está hospedado no seu servidor. Caso vc deixe de usar seu servidor, as pessoas que utilizam o código, serão prejudicadas. Eu tentei hospedar em alguns sites de hospedagem e não funcionou. Só consegui fazer funcionar com o seu código. Vc conhece algum site de hospedagem gratuita?
    Vlw… abraço!

    Responder

  42. Marcos, muito bacana o seu tutorial, parabéns! Há tempos procuro uma galeria prática para o Blogger e só agora encontrei 🙂

    Uma pergunta: é possível inserir as setas para trocar para a próxima imagem uma vez que a galeria já está aberta? Pois este modelo permite que a pessoa visualize foto por foto, sempre tendo que fechar uma para abrir a outra.

    Espero ter sido clara…

    Muito obrigada!

    Responder

  46. Gostei muito desse tutorial era o que eu esta procurando para melhorar a visualização do meu blog. De todos os tutoriais desse mesmo tema o melhor foi o daqui do [Ferramentas Blog]. ^^

    Responder

  47. Marcos, meu caro,
    parece que o serviço LightBox atualmente aceita a hospedagem do Blogger.
    Não sei se já consta esta atualização aqui no [Ferramentas Blog] mas, de qualquer forma, espero que esta informação seja válida.
    Um forte abraço.

    Responder

  49. Marcos Lemos,

    Tem algum segredo que eu tenho que fazer para que as imagens do mesmo post sejam ‘setadas’ uma para outra? para deixar mais claro, gostaria de saber se tem como quando clicar em uma imagem e ela abrir sobre a tela, passar de uma imagem para outras com a direcional?

    att,

    Responder

  50. Consegui colocar efeito no meu blog.E não precisei fazer o “PASSO 2”, miniaturas etal.E siiiim!As imagens do blog, do Picasa funcionam com esse efeito.Ficou maravilhoso.As imagens abrem sem sair da página ainda mostra a galeria e as setas de passar as imagens da postagem e no tamanho original.Não foi preciso fazer hospedagem das imagens em outro site.
    Obrigada!

    Responder

  53. O meu código só deu um problema, da metade no menu ele agrupa e aperece a navegação emabaixo para outras fotos, mas no começo ele abre as fotos individualmente. Por que será?

    Responder

  54. Boa tarde! testei a dica acima em um blog que uso para testes, antes de aplicar no blog original e funcionou… gostaria de saber porque consta nas linhas do código o endereço do site ferramenta blog? tipo:

    href=’https://ferramentasblog.com.br/imagens/lightbox/css/lightbox.css’ media=’screen’ rel=’stylesheet’ type=’text/css’/>

    Obs: Desculpem, pois sou leigo em blog, ainda tô aprendendo.

    Att,

    Responder

  55. Esse efeito é uma imitação piorada do Lightbox. O Blogger estragou o antigo efeito, que abria um link da mesma ou de outra imagem (de tamanho maior ou não) e deixava a página do blog em segundo plano. Bastava clicar em qualquer ponto da tela pra voltar ao conteúdo principal. O efeito atual leva a uma segunda página, forçando o visitante a clicar na seta para voltar à página anterior, criando um vaivém desnecessário. Essa imitação mal feita do Lightbox é um retrocesso.

    Responder

  56. Funcionou de boa, porém to com um probleminha, quando a imagem é ampliada, o gadget dos botões flutuantes das redes sociais(igual tem aqui no seu blog) que tem no meu blog fica sobre a imagem ampliada, deixando feio.

    Alguma solução para deixar a imagem ampliada opaco ou o gadget transparente, já que ele é 100% opaco?
    Abç!

    Responder

  58. Adorei esta light box ficou ótima no meu blog, eu estava mesmo procurando uma assim, Parabéns!!!
    No meu blog funcionou com as imagens que hospedo pelo blogger (quando faço upload pelo criador de postagens). Ficou ótimo! Abraços.

    Responder

  60. Eu tenho uma ‘sugestão’ pra fazer. Tem como colocar a foto no meio da página, prqê qndo posto uma foto grande a legenda fica muito embaixo e não dá pra ver, só rolando a página. E seria bom também se a imagem ficasse fixa, descendo junto com a página.

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.