Novidade: Blogger adiciona efeito LightBox nativo para imagens

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+

Muitos blogueiros por todo o mundo que usam o Blogger, começaram a notar que suas imagens estavam abrindo com um efeito conhecido como LightBox. A equipe do Blogger não avisou nada sobre a mudança ou se há algo diferentes em seu sistema, mas há algo novo sendo feito e aos poucos liberado para todos usarem. Este código novo está sendo descoberto aos poucos e você já consegue usar.

Siga o [Ferramentas Blog] no Youtube
Clique no botão ao lado para se inscrever no nosso canal.



AVISO: A equipe do Blogger desabilitou temporariamente o recurso. Saiba mais, aqui:

Se você quiser ver o novo recurso do Blogger de LightBox funcionando, pode ver aqui nesse post de teste, clicando em qualquer imagem:

ATUALIZAÇÃO: A equipe do Blogger anunciou oficialmente a novidade hoje, 19/set/2011. A parte triste é que realmente não é possível tirar ou configurar o recurso:

Aparentemente Já está funcionando em qualquer blog do Blogger, bastando publicar alguma imagem, mesmo que ela não seja clicável. E o mais estranho é que o código está invisível no editor HTML do painel do Blogger, mas pode ser acessado pelo “exibir código-fonte” dos navegadores.

Quando se clica em alguma imagem do post, abre uma janela sobre a página do Blog escurecendo o fundo. Caso haja duas ou mais imagens, também abre uma navegação por miniaturas.

Efeito lightbox em imagens no Blogger

O mais estranho de tudo é que aparentemente não há nenhum código para fazer funcionar o recurso e não há nada de novo nos menus do painel do Blogger (nem no antigo, nem no novo). Ao entrar no “Editar HTML” tudo parece normal, sem qualquer referência aos códigos conhecidos de LightBox ou algum CSS.

Fica mais estranho ainda se abrimos diretamente o código-fonte pelo navegador, depois que a página já está carregada. Então é possível encontrar algumas linhas que só o sistema do Blogger tem acesso (não me pergunte por quê).

Nota-se os seguintes trechos escondidos:

<link type='text/css' rel='stylesheet' href='http://www.blogger.com/static/v1/widgets/3353720152-widget_css_lightbox_bundle.css' />

Isso aparece imediatamente abaixo da linha <title><data:blog.pageTitle/></title>, buscando um CSS externo que está hospedado nos servidores do Blogger.

Além disso, ao rolarmos o código para quase no final, acima do </body>, o que vemos é este novo trecho:

_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', null, document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'http://www.blogger.com/static/v1/jsbin/3011555136-lbx_pt-BR.js'}, 'displayModeFull'));

Este trecho é uma chamada de Script que faz parte da estrutura de Widgets do Blogger e regula outros efeitos.

O pior desse momento da novidade é que não é possível desabilitar o recurso de maneira alguma (ao menos eu ainda não descobri como). Também percebi que, se o seu blog não tem esse efeito, basta adicionar esses trechos nos locais sugeridos, que passará a funcionar.

Então: o que você achou da novidade e o que espera para o Blogger com este novo recurso?

Essa novidade está sendo discutida no fórum do Blogger em inglês.

46 Comentários

  1. Gente, que legal! =D

    Geralmente os scripts para o efeito lightbox são longos, tem todo um ritual para a instalação e alguns até param de funcionar depois de um tempo.

    Essa foi uma novidade genial, tenho que admitir.

    Responder

  2. Marcos,
    Fui lá no meu blog e o recurso já está funcionando.
    Achei bacana e interessante pra se ter uma visualização melhor das imagens utilizadas nos posts.
    Vamos aguardar.
    Abraços,

    Letícia

    Responder

  3. Sinceramente, não gostei desse efeito não. Prefiro os efeitos do Shadowbox e Lightbox.

    Sem contar que eu utilizo alguns códigos para evitar a cópia de imagens do meu blog, e com esse efeito o link da imagem aparece, permitindo que a mesma seja copiada.

    Espero que esse Lightbox do Blogger melhore na questão visual, e que seja um recurso opcional, ou customizável, quando, e se, o Blogger se pronunciar a respeito desse recurso.

    Responder

    • Fiz esse teste e comigo não funcionou mesmo em blogs que tive de adicionar o código para fazer funcionar o efeito.
      O problema mesmo é que não tem como acessar realmente o código para fazer essa modificação.

      Agora é esperar pra ver o que o Blogger fará nos próximos dias.

      Responder

  4. ACHEI O MÁXIMO! Já estava pensando em retirar o click das fotos pra que os visitantes não saíssem da minha página. O fundo preto fica otimo com as fotografias, diferente da alteração no Facebook que tem fundo branco é deixa tudo muito confuso. Nota 10!

    Responder

  5. Odiei. Fiz um trabalho brutal de otimização do meu blog, reduzindo o peso dele de 1.4 MB para 93 KB na home, e depois que o Blogger inseriu esse efeito o blog foi para 133 KB. Sei que ainda está leve, mas foi frustrante. Blogger…

    Responder

  6. Eu preferiria se fosse opcional, pois costumo inserir as imagens com o tamanho adequado à visualização conforme o contexto. Além do mais, o método apresentado no post “Efeito LightBox para imagens no Blog” tem uma apresentação mais eficiente, pois conta com a ampliação da imagem e utilização de legenda, o que não ocorre (talvez por enquanto) nesse novo recurso do blogger. Fiz uso desse recurso alternativo em um post no blog agoreufalo.com e ficou bem apresentável em contraste com o recurso nativo na primeira imagem.

    Responder

  7. não gostei pois já uso um thickbox personalizado.

    descobri como barrar esse efeito o ruim é ter q fazer em todas as imagens.

    o script verifica se o link do href é igual ao do scr e se for ele coloca no efeito lightbox então pra barrar é só transferir o link do href para o imageshack e retornar ao blogger e como os links serão diferentes mesmo sendo para a mesma imagem o efeito não é aplicado.

    Responder

    • Essa informação me ajudou bastante! Mas você não precisa mudar o endereço da foto. Se você utiliza as fotos hospedada no Google, basta você alterar a numeração que define o tamanho da imagem, na própria URL.

      Responder

  8. Nossa. Eu percebi este efeito quando eu sem querer fui clicar em uma imagem no meu blog.
    Sinceramente eu gostei bastante dele assim, pois há alguns dias atrás, eu estava pensando em adicionar o efeito lightbox em meu site.

    Engraçado que eu também fui no código fonte do blog e achei essas linhas que você mencionou no post.

    Além efeito lightbox, outra mudança feita no Blogger foi na página de login, que está com o visual novo.

    Responder

  9. Legal , acho estranho eles não terem avisado , mas tivemos tantas novidades que vieram por surpresa que eu não me surpreendo mais.
    Acredito que logo vão vir outras novidades , possivelmente na parte de estatísticas pelo menos para chegar um pouco perto do wordpress nessa parte.

    Responder

  10. Droga!Demorei tanto tempo para descobrir este codigo….e a equipe do blogger faz isso agora.Como uma pessoas terá a chance de se destacar em alguma coisa,se todos possuem.
    eles diminuiram em 50% a minha chance de almentar o fluxo no meu blogger

    Responder

  11. No meu blog já está funcionando. Gostei do efeito. Só não entendo por que ao fazer o upload de imagens com mais de 3000 pixels, o blogger automatica redimensiona para no máximo 1600 pixels….

    Responder

  12. Que maneiro! Eu tava mesmo procurando um código de lightbox pra instalar no meu blog e agora nem vou mais precisar! O meu não veio automático, mas coloquei o código logo acima da tag lá no final do código html e já está funcionando.

    Responder

  13. to pra dizer que é um efeito sofisaticado que se estende pra todos os blogs do blogger, que eu sei….sinceramente eu gostaria de tirar isto daqui

    Responder

  14. Prejudica a visualização de imagens full size que exigem serem observados detalhes. Para tal, ainda é necessário “exibir imagem” ou “abrir em nova aba”, já que o tamanho que o lightbox abre a imagem, não é no tamanho original dela.

    Responder

  15. Eu não gostei de ter esse efeito e não poder desabilitá-lo (pelo menos isso não é possível ainda), pois já uso o FancyBox. Com o FancyBox eu posso usar o efeito LightBox também em vídeos, criar janelas modal, adicionar efeitos como transições, especificar se a imagem deve ser exibida no seu tamanho integral ou se deve ser redimensionada para caber na tela, e até mesmo escolher a cor da camada que vai sobrepor o restante do HTML.

    Responder

  16. Eu entrei hoje em um post no meu blog para copiar uma imagens, eu já possuo um Código LigtBox muito bom que permite até colocar um micro site dentro dele mas enfim, me surpreendi quando cliquei em uma imagem sem o Efeito Ligtbox configurado, e abriu esta visualização igual a do Google Plus . Achei simplesmente Magnifico, pois o Javascript Ligtbox atrasa e muito o carregamento da página porém se eu clicar na imagem enquanto o Menu de navegação estiver visível, a imagem fica abaixo do Menu, somente isso me desagradou, mas como costumo só colocar o álbum de foto do artista ” x ” no final do post. Eu vim correndo para o Ferramentas Blog para ver se tinha alguma noticia a respeito rsrs .

    Responder

  17. Algumas imagens de dimensões 1600×1200 tiveram a resolução reduzida para 400 x alguma coisa no novo visualizador. quando clico em abrir imagem em uma nova janela ela aparece normal.

    [Link suprimido]

    Responder

  18. Pingback: Como desabilitar o novo efeito Lightbox do Blogger | [ Ferramentas Blog ]

  19. Ficou muito pesado. Todo trabalho feito no meu blog está preticamente perdido. Os visitantes vão desistir na primeira tentativa.

    Responder

  20. Pingback: URGENTE: Blogger cancela novo efeito Lightbox | [ Ferramentas Blog ]

  21. Bem, já dá sim para retirar esse efeito e eu até gostei dele, achei melhor que outros efeitos lightbox criados por outros, o do blogger é leve, abre as imagems com tamanho um aplicável a página, e também mostra as imagens por post e não sai mostrando todas as imagens contidas na página. Pena que eles estão testando e retiraram agora… Espero que coloquem de novo.

    Responder

  22. Pingback: Blogger retorna o efeito Light box - Creative Magazine

Deixe um comentário

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