Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

16 setembro 2011

Blogger e o efeito Lightbox

Efeito Lightbox nativo do Blogger
Ontem um leitor entrou em contato comigo para se queixar que, de uma hora para outra, todas as imagens do seu blog abriam de 'maneira estranha'. Ao verificar o blog, notei que o efeito Lightbox se aplicava à todas elas e que ele não havia colocado nenhum código no template para isso. Uma olhada no código fonte mostrou que o efeito era nativo do Blogger e alguns de vocês já devem ter notado o mesmo em seus blogs: ao clicar nas imagens elas se abrem expandidas sobre um fundo escuro e no rodapé da página aparece miniaturas de todas as imagens do post. Bem, nem eu nem o leitor que me procurou apreciamos o efeito e uma corrida até o Fórum de Ajuda do Blogger (em inglês), mostrou que muitos outros usuários estavam insatisfeitos. Uma coisa é você buscar por um efeito em sua página, outra bem diferente é ele ser imposto e até agora o Blogger não ofereceu nenhuma maneira de desativar o Lightbox (o que eu acredito que irá ocorrer em breve - oremos).

De qualquer maneira, aqui vai um hack para impedir o efeito, desenvolvido por Mark, do blog Code from English Coffe Drinker. Eu testei em alguns dos meus blogs e funcionou perfeitamente.

Copie o código abaixo e cole imediatamente antes da tag </head>:

<script type='text/javascript'>
  //<![CDATA[
function killLightbox() {
 var images = document.getElementsByTagName('img');
 for (var i = 0 ; i < images.length ; ++i) {
  images[i].onmouseover=function() {
   var html = this.parentNode.innerHTML;
   this.parentNode.innerHTML = html;
   this.onmouseover = null;
  };
 }
}

if (window.addEventListener) {
 window.addEventListener('load',killLightbox,undefined);
} else {
 window.attachEvent('onload',killLightbox);
}
//]]>
</script>
Salve a modificação e faça um teste, clicando nas imagens dos seus posts. 
Pelo menos por ora, foi a única solução encontrada.

Artigos Relacionados

27 comentários:

Micael Souza disse...

Eu sou a favor do Light Box. Antes, todas as imagens clicadas abriam na mesma página do blog, substituindo a mesma. Sem falar que o efeito Light Box dá ao blog um designer melhor, mais bonito.

mSc disse...

Poxa ta dificil de conseguir uma ajuda hein. Por favor me ajude no outro tutorial "Colocando Slide no blog", meu blog ta parado por eu não saber como arrumar. Por favor algum retorno.

Obrigado

Sheila Lima disse...

Eu gostei do LightBox, principalmente porque nas minhas imagens eu uso o target="_blank" e isso facilitaria muito a minha vida, pois eu não precisaria ficar modificando o HTML toda vez, seja pro target"_blank" seja pra tirar o link.
Mas é questão de gosto e de costume. Pra quem não quer o código, eu recomendo "beleza" e "paciência": se o Blogger tirar o LightBox "beleza", se continuar, "paciência"...
Amo seus tutoriais, me ajudam muito no meu blog (tenho um blog sobre desenho e variedades).

Mil Sweetkisses \o/
Blog Doce Sonho de Menina (DSM): http://docesonhodemenina.blogspot.com

Daniel disse...

Há tempos que eu queria colocar efeito lightbox nas imagens do meu blog e essa grande novidade da platafroma Blogger veio demais à calhar.
Engraçado, é que ontem de noite, o LightBox tinha um fundo traslúcido e hoje à tarde, o fundo já era um preto opaco.

Agora vou rezar para que a próxima novidade do Blogger seja a opção de remover a navbar, pois fica em meu blog o hack que remove aquela barrinha superior ficou estranho.

Garota Enxaqueca disse...

Olha, o que eu faço pra evitar isso (não que me atrapalhe, até acho simpático... rsrs... mas tem vezes que eu não quero e ponto) é associar o link do meu blog a imagem - na hora da postagem mesmo.

Pois é.
Solução de leiga mesmo...

=)

Layanne Rezende ★ disse...

Muito obg pela dica!!
Eu detestei esse efeito :S
Ja havia colocado um efeito lupa nas imagens do meu blog e esse so fez atrapalhar.
Experimentei o codigo e deu certinho
Obg!!

Isaias disse...

É um efeito legal, mas que deve ser utilizado quando o blogueiro quer, e não quando o Blogger quer! Vou testar, mas já valeu pela informação.

Isaias disse...

Bloqueia mesmo, mas não anula o sobrepeso que o efeito dá no blog.

R.Wesley disse...
Este comentário foi removido pelo autor.
Gasco Gamer disse...

Oi gente, eu to com uma duvida, eu uso o template blue feito por voce, Ariane (obrigada) mas a data dos posts está saindo toda "torta" gostaria de concertar isso... meu blog é de games; gascogamer.blogspot.com por favor alguem me ajuda, obrigado!

Isaias disse...

@R.Wesley

Pesa sim, o Blogger ficou mais pesado, então não apenas o meu blog, o seu ou o da Ariane, mas todos os blogs do Blogger ficaram mais pesados. Posso provar através de prints de testes feitos com o meu blog bem antes e depois do lightbox.

R.Wesley disse...
Este comentário foi removido pelo autor.
Márcio Ferreira disse...

Bom, o efeito existe, mas no meu blog não apareceu esse efeito e isso pra mim foi melhor, não curti o efeito e também não gostei que o blogger implantou do nada... Mas não deixa de ser uma novidade pra mim não serviu em nada! O meu intuito não é mostrar as imagens do post e sim o texto "as imagens é uma mera ilustração", Eu preferia se o blogger oferecesse um para vc adicionar fotos para formar um slide especifico com as imagens que desejar.

Léo Silveira disse...

Alá Ariane, lindopost, para quem não quer este efeito está perfeito. Eu estou com outro problemas aqui que é o seguinte. No NNavegador Chrome o Chat que possuo em meu Blog não está mais aparecendo, mas em outros navegadores sim. Já fis de tudo, mas até agora nada, será que é o Chrome que está com alguém erro? desde já grato e parabéns pela espaço.

Sheila Lima disse...

Ariane, gostaria de dar uma sugestão de tutorial, que seria sobre a barra da Cat-us. Fiz um tutorial no meu blog, mas imagino que seria mais propício ter um tuto assim no seu blog...

Mil Sweetkisses \o/

MiBlogger disse...

Ari, pelo jeito o blogger tirou o efeito, pelo menos isso aconteceu hoje no meu blog, será que teria como fazer um tutorial inverso? "Como colocar efeito Light Box ?" eu preciso muito dele, já que outros deram problema com o widget de seguidores, obrigada

Vitiinho disse...

Ariane eu queria saber com colocar deslizantes de imagens (slide)no blogger.

Arte do Xarpi disse...

Eu gostei do Lightbox pois facilitou muito a minha vida !

Arte do Xarpi disse...

Tambem contordo com MiBlogger, se for possivel fazer um tutorial, de como ativar o Light Box!!!

BLoGaNieLa disse...

Poxa mais eu gostei tanto desse efeito.da para ver as fotos na mesma pagina.eu gostei so que infelismente do nada sumiu.gostaria de por novamente se puder ajudar.obrigada

Mar Vega disse...

O Light Box dá um ar mais profissional ao blog, justamente por ter um design atual e bonito.

Soh Pagode disse...

o meu nao tem isso
como coloco?
abraços

Sheila Lima disse...

Vim dar uma passadinha no seu blog para lhe informar que seu blog é oficialmente o 7º colocado nos "Blogs do Mês" de Setembro (blogs que mais enviaram acessos ao DSM em Setembro).
Para ver a postagem, acesse:
http://docesonhodemenina.blogspot.com/2011/09/blogs-do-mes-setembro.html

Desejo um ótimo Final de Semana e sucesso para seu blog!!!

Mil Sweetkisses \o/

Anims disse...

Olaa
Alguem pode me ajudar??
preciso inserir uma galeria no meu blog, mais ñ sei como
meu blog é esse:
http://animsgallery.blogspot.com/
quero colocar a galeria aonde esta escrito galeria 1.
Alguém sabe como??
s souber me ajude??
jessycroft@yahoo.com.br
Att.

Diego Silva e Castro disse...

ariane, por favor, como faço para colocar akeles botões q vc colocou no inicio de seu blog?

@micael_oficial disse...

Me desculpe por estar fugindo um pouco do assunto da postagem mas vi uma postagem sua sobre aumentar a larggura do blog j´pa procurei no html do meu site o div /* Outer-Wrapper mas não encontrei, como meu template era wordpress agora é blogger talvez seja por isso essa div deve estar de outra forma me ajude por favor.. meu e-mail é micaelycan@hotmail.com

Carmem Neves disse...

Fiquei sabendo que o blogger tirou esse recurso, nos meus blogs pelo menos não esta mais abrindo assim. Eu tinha gostado, mais fazer o que né o Google faz o que quer e nós que aceitemos,

Postar um comentário

Os comentários são moderados.