Como criar Galeria de imagens para Blogs usando Lightbox Effect

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

Aplicar efeitos no modo como são exibidas as imagens e fotos no seu blog pode ser um diferencial especialmente na qualidade. Nesse tutorial vou ensinar como inserir uma galeria de imagens/fotos em seu blog que pode ser usada individualmente em páginas ou posts específicos. Usaremos os efeitos criados pelo Lightbox Effect e funcionam muito bem tanto no Blogger quanto no WordPress.org. Já começo esse post mostrando um exemplo prático para ilustrar.

Uma galeria de imagens feita com a ajuda de recursos como o Lightbox Effect e seus códigos, pode ficar assim:

 

Nas fotos uma viagem que fiz à Dinamarca (visitando meu amigo Mikkel Fessel, junto com o Marcelo Marinho Xangô), vista da cidade de Ribe. E uma última foto com a Mariana em Arraial da Ajuda. Não reparem meu cabelo, rs!

Aqui nesse modelo estou usando um plugin para WordPress.org, que é bem simples e fácil de configurar, incluir dentro de um post e manipular. Mas se você usa o Blogger, pode ver aqui um exemplo de como pode ficar e como funciona:

Para quem usa o Blogger:

Se você usa o Blogger como plataforma, será preciso integrar alguns códigos de JavaScript no blog e fazer praticamente tudo via códigos, pois não há plugins que facilitem essa integração. Já apresentei aqui um tutorial completo e passo a passo de como fazer isso (também serve para WordPress.org).

Como já temos esse tutorial, recomendo que vá lá no link indicado para ver os passos. Eu o revisei e está atualizado e corrigido. A parte chata é que você precisará criar os arquivos das imagens em miniatura e montar as sequências manualmente para ter um efeito de galeria.

Para quem usa o WordPress.org (com plugin):

Já para quem tem um blog no WordPress.org esse recurso fica um pouco mais profissional e fácil de instalar, sem nem precisar usar códigos, já que existe um plugin. Esse plugin vai adicionar novas funções à aba “Galeria” quando você faz o upload de suas imagens para adicionar numa postagem.

Quando você usa a modelo de Galeria padrão do WordPress.org as imagens em miniaturas, quando clicadas, abrem numa página separada, o que não é muito apresentável nem prático. Assim, o plugin do Lightbox insere um novo efeito, como nos exemplos acima.

Assim, a primeira coisa a fazer é procurar e instalar o plugin jQuery Lightbox For Native Galleries. Você pode fazer isso baixando o arquivo ZIP ou indo direto pelo menu “Plugins” ~> “Adicionar Novo” e fazendo uma busca pelos termos/nome.

Instalado e ativado o novo plugin, agora é hora de criar a galeria e aplicar os efeitos desejados. Então, normalmente, vá ao editor de posts no menu “Posts” ~> “Adicionar Novo” e faça o upload das imagens que você quer usar na nova galeria, como de costume.

Quando você salvar a inclusão das novas imagens, a aba “Galeria” aparecerá no topo para os passos seguintes.

Então configure a Galeria como deseja e clique no botão “Inserir galeria” para que ela ocupe o espaço que você quer dentro do seu post.

Agora é só publicar o post para ver a nova Galeria e os efeitos do Lightbox funcionando em sua página.

O melhor uso desses recursos só pende da sua criatividade e de seu interesse, bem como as suas necessidades para seu Blog. Imagens são parte importantíssima da estrutura de conteúdo de um blog e saber usá-las é fundamental.

Outros posts e tutoriais sobre imagens:

Já pensou em ser um(a) Blogueiro(a) mais Profissional?

Está cansado(a) de ser um blogueiro mediano(a) e que não tem resultados com seu Blog, não ganha dinheiro e não recebe as visitas que gostaria?

Você chegou aqui procurando como aprofundar seus conhecimentos em Blog, como Ganhar Dinheiro com seu Blog, aplicar as melhores técnicas de SEO, divulgar seu Blog e fidelizar seu público alvo. E posso te ajudar com essas coisas e muito mais, elevando o nível de qualidade do seu projeto.

Desenvolvi um curso completo, totalmente online, cobrindo tudo o que é necessário para um Blog atingir seu potencial máximo, detalhe por detalhe, que vão te tornar um Blogueiro de Elite:
  • Técnicas de produção de conteúdo
  • Fidelização do Público alvo
  • Divulgação e Técnicas de SEO
  • Métodos e técnicas de Monetização
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Esta é sua chance de ser mais profissional e ter um blog eficiente, completo e que pode ser sua fonte de renda permanente. Sou Blogueiro desde 2007 e condensei todo este conhecimento dentro do curso Blogueiro de Elite para entregar a você.

23 Comentários

  1. kra eu estou doido pra sair do blogger e ir logo pra esse WordPress…
    Sabe me informar algum host que faz “Permuta”?
    Não tava afim de desenbolsar 40,00 mensais, estou quase no vermelho e ainda tem uma galera que me ajuda a mante-lo atualizado!

    Aguardo respostas!

    Responder

  2. Adorei as fotos… especialmente a de Arraial D ´Ajuda porque eu moro aqui rs Volte sempre!!!
    Olha o link acima para o blogspot cai numa página em branco e eu me interessei muito por essa galeria. Pode me ajudar?

    Responder

    • Isabella,
      Voltarei sim. Foi uma viagem ótima e Arraial é linda.

      Sobre o link, está funcionando perfeitamente e vai para a página do tutorial correto. Veja se você não fez algo errado.

      Responder

      • Ok… Vou ver amanhã com mais calma que agora já tô acabadaaaaaaaaaaa
        Bjs e quando vier mande um e-mail que terei prazer em recepcionar vc e Mariana! Um abraço!

        Responder

  3. Gostei por um lado, porém ainda não me ganhou. Gostava mesmo do plugin Lightbox 2, qualquer imagem inserida no post abria com efeito Lightbox, mas após a atualização do WP para 3.1, não funciona mais.

    Esse plugin apresentado é maneiro, carrega as imagens super rápido, porém só mesmo nas imagens que estão na galeria. As vezes uso muito, uma unica imagem no post, ela é grande coloco em miniatura, e deixo para os visitantes ampliar para ver as características, com este plugin não é possível, lamentável.

    Até agora só consegui, resolver meus problemas com este plugin Auto Thickbox que aplica o efeito(ampliar) para todas as imagens.

    Obrigado pela dica do plugin, sempre passo por aqui, só para ver as novidades, caso alguém tenha um plugin de galeria, mais bonito do que estou usando hoje, e que se aplica a todas as imagens, fico grato

    Responder

  4. Ajudou muito,
    Mas se alguém souber como resolver um probleminha…, se na mesma página tiver um post de vídeo a imagem abre sob o vídeo, mesmo sendo posts distintos. Tentei outros plugins mas continua a mesma coisa.

    Responder

  5. Olá, então adorei a ferramenta, but…
    No meu site, na lateral fica um vídeo, e o video fica por cima do slide, queria saber como edito para o slide não abrir no meio, e sim mais para a esquerda, ficando sobre o post e não chegando perto da lateral(onde tem o vídeo).
    Você pode conferir isso, aqui: http://staypop.net/selena-gomez-faz-secao-de-fotos-para-a-revista-elle-mexicana

    Também queria saber como tirar o nome “imagen 1 of 6”, pq fica sobre o titulo da foto, dependendo do tamanho… daew queria colocar só “1 de 6”

    Como faço? =) Obrigado, seu site tem sido bem útil.

    Responder

    • Paulo,

      Esse é um plugin para WordPress e todo plugin tem seu código aberto para que o usuário faça as adaptações necessárias.
      Para traduzir o texto do rodapé das imagens você pode ir direto no código.

      Mas quanto à mudança de posição, acho que não seja possível fazer isso, pois o padrão é centralizado. você pode tentar procurar no código alguma possibilidade de modificar isso, mas eu não sei como fazê-lo.

      Responder

      • Eu consegui mudar o texto, mas ainda to na duvida com a posição.
        Achei a pasta jquery-lightbox-for-native-galleries/colorbox/theme3/colorbox.css algumas coisas que tem a ver com a posição, não sei em qual tag devo mudar… você pode olhar e me falar qual a tag eu mudo. Grato

        Responder

  6. Que ótima dica..
    Não sabia dessa possibilidade.. Adorei e já fiz hoje mesmo post usando sua dica..

    Vou aproveitar pra dizer que adorei conhecer seu site. Já estou seguindo no twitter e já indiquei lá pra te seguirem..

    Excelente trabalho. Parabéns!!!

    Carol.
    Blog GlamforAll

    Responder

  7. Oi Marcos, suas dicas sempre me salvam ! 😀
    o meu blog é Blogger, eu já coloquei o efeito nas imagens,
    ficou ótimo ! Mas eu não consigo de jeito nenhum colocar
    as miniaturas juntas, como as suas deste post. já coloquei
    diversos códigos e não consigo, elas ficam uma embaixo da outra e desalinhadas. Poderia me ajudar?
    Obrigada

    Responder

  8. Olá. Instalei o plugin q vc mencionou para wordpress. Fiz todos os passos. Inseri a galeria, e aparecem as miniaturas. Só que quando clico para abrir a miniatura ela abre numa nova janela no tamanho grande. Só que eu queria q ficasse com o efeito de lightbox. O que pode estar acontecendo? Uso o Tema Brightpage. Já perdi muitas horas e ainda não consegui resolver meu problema. Até tentei mudar o tema, mas não adiantou. Em todos dá o mesmo problema. Agradeço desde já.

    Responder

  9. Oi Marcos! Eu tb uso o nivoslider no meu blog e parece que colocando o lightbox dá confusão no código. Sabe como resolver? Como?
    Muito obrigada!!!!

    Responder

  10. Muito bom seu tutorial, me ajudou muito mesmo, obrigado por compartilhar seus conhecimentos.
    Visite nosso site e veja, o efeito lightbox que voce nos ensinou, abraços

    Responder

Deixe um comentário

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