![[ Ferramentas Blog ]](/wordpress/wp-content/themes/fb5/images/logo.png){kind=logo}
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:
Muito bom, vou testar no blogger, se conseguir fazer direitinho vai ficar muito bom, Obrigado
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!
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?
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.
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!
amigo,,, tem como fazer esse plugin funcionar a partir do windows live writer???
@Wilton,
Eu até procurei isso também, mas não tem como.
Se quiser usar a galeria tem que ser via editor do painel padrão do WP.
oi amigo! Me diga como vc faz para colocar as imagens para passar uma para outra sem fechar a atual?
Ryaku,
Esse é um recurso do sistema do Plugin para WordPress.org.
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
Cara, eu simplesmente adorei esse plugin. Realmente é muito feio quando o leitor clica na imagem e ela fica abrindo em outras abas.
Mudou minha vida rsrsrs
Se não for problema algum, gostaria de mostrar como ficou.
Esse link: http://brothers.blog.br/momentos-preciosos-entre-pais-e-filhos/
É um post muito bonito com muitas imagens de momentos entre pais e filhos, vale a pena conferir.
Abraço e obrigado pela dica
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.
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.
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.
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
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
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
Carol,
Isto se configura no Plugin. Basta você definir quantas imagens por linha devem aparecer.
E como faz isso ?
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á.
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!!!!
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
Marcos,
Para funcionar com as imagens do Picasa, basta copiar a url do código de incorporação da imagem ao invés do link. Por exemplo:
…<img src="https://lh6.exemplogoogleusercontent.com/-FxGWotXo/UGec7X6VbII/AAEo/mOLakcx20SA/s144/images.jpg"…(apenas o que está entre aspas)
Se tu testares, vais ver que dá certo!
Abraço.