Cursos 24 Horas - Cursos 100% Online com Certificado

Lightbox Visualizador de imagens para blogger

38 Comentários Autor : Notícia e blog 05 agosto 2009
Um novo jeito de exibir imagens no blogger muito bom para quem possui varias imagens e queria mostrar em tamanho grande sem sair da página.Veja um exemplo deste hack funcionando aqui.A aplicação é das mais simples, mas garante um incrivel efeito no blogger. Então vamos começar a aplicação:

Instalação

1.Faça login no blogger

2.Vá para layout> Editar html
Nota: É sempre bom fazermos um bakup do template pois se algo dar errado você recupera o seu template rapidamente


3.Procure pelo código abaixo no seu template:
</head>
E antes dele cole o seguinte:
<!--Light Box Code Starts Bloggerplugins.ORG & Noticia e blog-->
<style>
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10;}
#imageContainer&gt;#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(http://lh5.ggpht.com/_u4gySN2ZgqE/SnWk89-4azI/AAAAAAAAAj8/hM0MqnVouCQ/prevlabel%5B3%5D.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://lh6.ggpht.com/_u4gySN2ZgqE/SnWk9-mNiQI/AAAAAAAAAkA/Zg1jXV9xnQM/nextlabel%5B6%5D.gif) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
round-color: #000; }
lute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
round-color: #000; }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js' type='text/javascript'/>
<script src='http://files.bloggerplugins.org/lbox/js/scriptaculous.js' type='text/javascript'/>
<script src='http://blogergadgets.googlecode.com/files/lightbox.js' type='text/javascript'/>
<!--Light Box Code Ends Bloggerplugins.ORG-->

Adicionando imagem para ser visualizada

Você adicionou os scripts necessários para funcionar agora veja como adicionar as imagens para que sejam visualizadas pelo visualizador:
Você pode adicionar imagens com uma descrição ou em forma de galeria
Nota: Crie uma postagem no blogger que deseja adicionar imagem
Primeiro faça upload da imagem normalmente no blogger, na postagem ainda clique em editar html, agora nesta imagem abaixo veja como editar a postagem:
Clique para na imagem para ver maior:

Veja como proceder:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_8AL-4bHE9zs/Snoipl3N7WI/AAAAAAAABGE/3aTu5jF3cxc/s1600-h/google3.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 200px; height: 182px;" src="http://4.bp.blogspot.com/_8AL-4bHE9zs/Snoipl3N7WI/AAAAAAAABGE/3aTu5jF3cxc/s200/google3.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5366640003899059554" /></a>
No código acima vemos um código de uma imagem quando é postada no blogger:
O código em vermelho deve ser substituído pelo código abaixo:
rel="lightbox" title="descrição da imagem"
O código em verde deve ser apagado para que o hack funcione.


Criando um álbum

Você deverá usar o seguinte código
rel="lightbox[nome do álbum]" title="Descrição 1"
Para adicionar mais imagens a este álbum basta repetir o código acima e em descrição coloque a que deseja para segunda imagem veja o exemplo abaixo
rel="lightbox[nome do álbum]" title="Descrição 2"
Pronto se seguiu todo o tutorial você já está com seu vizualizador pronto
A  postagem original pode ser vista aqui

    38 Comentários

    Fernando disse...
    12 de agosto de 2009 11:29 #

    Beleza! ficou bom, mas fica a postagem grande com um montão de imaens (no cas do album)!!!
    Tm como mostrar so a primeiraimagem na postagem e dai quando vizualizar album ai sim ver todas (na tela quetem os botes next e close)?????
    Beleza! Aguardo a resposta...
    Ma ficou muito bom!!! Parabéns

    Notícia e blog disse...
    13 de agosto de 2009 15:12 #

    Oi acabei de criar uma postagem de como ocultar parte da postagem veja neste link http://noticiaeblog.blogspot.com/2009/08/ocultando-uma-parte-da-postagem-no.html

    Jeff disse...
    8 de setembro de 2009 13:23 #

    Prezado....
    implementei no meu blog:
    vide:
    http://www.jeffgarage.com/2009/09/bmw-m3-e92.html

    gostaria de ver se tem como abrir a foto no lugar da foto grande q aparece no link q te passei, ou se não....ter botão de proxima e anterior no popup do scrip q abre.

    aguado. meu email: jeferson.206@gmail.com

    Notícia e blog disse...
    8 de setembro de 2009 14:45 #

    @Jeff Sim basta você criar álbuns que as setas de ir para próxima foto e anterior aparecem veja o exemplo abaixo:
    Ao invés de adicionar:
    rel="lightbox" title="descrição da imagem2"
    rel="lightbox" title="descrição da imagem3"
    rel="lightbox" title="descrição da imagem4"

    Adicione:

    rel="lightbox[Carro]" title="Eco sport"
    rel="lightbox[Carro]" title="Mercedes"
    rel="lightbox[Carro]" title="Punto"

    Repetindo o nome do álbum sempre.

    iGaby disse...
    19 de setembro de 2009 10:03 #

    Oi gente!!não consegui colocar o visualizador!!!segui todas as regras mas não funcionou!!!pode me ajudar??

    Notícia e blog disse...
    19 de setembro de 2009 11:52 #

    @iGaby Olá, qual blog seu você deseja adicionar o lightbox

    L_A_ disse...
    28 de setembro de 2009 18:51 #
    Cezar Sempre Com Deus disse...
    5 de outubro de 2009 20:42 #

    Ei cara primeiro tutorial que eu vejo funcionar e sem muita democracia. Valew vs esta de parabens......

    Notícia e blog disse...
    6 de outubro de 2009 17:55 #

    @Cezar Sempre Com Deus , Obrigado! :)

    Notícia e blog disse...
    10 de outubro de 2009 17:17 #

    :D

    s0litude Inside disse...
    29 de outubro de 2009 16:36 #

    Adorei, funcionou perfeitamente! Obrigada *_*

    institutomusashi disse...
    5 de novembro de 2009 11:00 #

    Não estou conseguindo implantar no meu Blog.
    http://institutomusashi.blogspot.com

    Notícia e blog disse...
    5 de novembro de 2009 12:04 #

    @institutomusashi , você deve inserir o código acima de head e não acima de body

    institutomusashi disse...
    5 de novembro de 2009 23:23 #

    Obrigado! Foi falta de atenção minha. Eu uso o Windows Live Writer para postar, tem alguma diferença na hora de relacionar a imagem para o lightbox?
    Obrigado mesmo

    Anônimo disse...
    25 de novembro de 2009 18:16 #

    gostei muito do seu blog já tentei várias vezes colocar Lightbox porém só agora consegui graças a este poste muito bom..

    obs: pra quem não ta conseguindo fazer funcionar no blogspot é porque provavelmente está acontecendo o mesmo q aconteceu comigo vc está usando editor atualizado do blogger e ai quando vc posta as imagens elas fican diferente do q esta aki no poste PRA DAR CERTO VC TEM Q

    1.Faça login no blogger

    2.Vá para CONFIGURAÇÕES > BASICO
    E UM POUCO ABAIXO EM Selecionar editor de postagem MUDAR PRA EDITOR ANTIGO E AI VAI DAR TUDO CERTO ...
    AO TERMINAR DE POR O Lightbox VC PODE VOLTAR COM O EDITOR ATUALIZADO DO BLOGGER.....

    ESPERO TER AJUDADO ......................

    Jovem Ambientalista disse...
    12 de janeiro de 2010 17:58 #
    Este comentário foi removido pelo autor.
    Jovem Ambientalista disse...
    12 de janeiro de 2010 17:59 #

    Po gostei do Lightbox, eu to trabalhando em um blog pro orgão q eu trabalho, e nos utlizamos muitas imagens,
    queria saber se tem como ocultar as imagens do album, deixando apenas uma à mostra!
    ceapcarajas.blogspot.com

    Tech' disse...
    15 de fevereiro de 2010 02:00 #

    CARA, AMEI O POST DO LIGH BOX, MAS QUERIA SABER, EU FAÇO TUDO CERTO, AI POSTO AS IMAGENS TUDO CERTO, SÓ Q NO POST AS IMAGENS SAI TUDO UMA EM BAIXO DA OUTRA, NÃO SAI 1 DO LADO, SAI TUDO NA HORIZONTAL, E ASSIM FICO MUITO GRANDE O POST, PODE ME AJUDAR? OBRIGADO! ABRAÇOS.

    Michelle disse...
    22 de março de 2010 04:32 #

    Olá parabéns pelo conteúdo. Consegui postar o código mas a minha dúvida é que na postagem (quando tentei criar meu album) as fotos ficaram uma embaixo da outra e o post ficou muito grande. Gostaria de sua ajuda.

    Um abraço.

    Notícia e blog disse...
    22 de março de 2010 13:30 #

    Michele você pode diminuir o tamanhos das imagens basta inserir
    height="100px" widht="100px" depois de "<img"

    Ph Salaroli disse...
    2 de abril de 2010 17:52 #

    Parace que há um conflito com o gadget 'seguidores' do blogger. Uma pena

    Marciana disse...
    8 de abril de 2010 20:24 #

    Olá, suas dicas são otimas, consegui colocar de maneira bem facil o lightbox, o problema é que nao consigo deixar apenas uma foto.Tentei o tutorial de ocultar parte da postagem mais nao funcionou.Voce poderia me ajudar?

    Fábio Arraes - Designer e Ilustrador disse...
    18 de maio de 2010 04:19 #

    Olá!

    Consegui inserir a Lightbox, mas eu tenho um menu horizontal que usa java script....quando eu coloco o código para a lightbox, o menu para de funcionar....e vice-versa!!! O que eu posso fazer pra resolver esse problema?

    Vlws!

    Michelle Zucolo disse...
    16 de junho de 2010 03:15 #

    Olá,
    Inseri no meu blog o ligthbox e deu tudo certo. Mas ocorreu um problema e tive que deletá-lo. Depois que inseri o lightbox em meu blog meus seguidores simplesmente sumiram...daí fiz o teste para confirmar o fato (deletei o lightbox e meus seguidores voltaram). Voltei a inseri-lo em meu blog e novamente meus seguidores desapareceram. Por gentileza, gostaria de ajuda, pois não sei o porquê isso ocorreu. Grata.

    Anônimo disse...
    6 de julho de 2010 16:42 #

    É, realmente o codigo dá conflito com outras coisas...como os seguidores, comentário e posts recentes deixam de funcionar....uma pena mesmo...

    Ana by anA disse...
    5 de setembro de 2010 05:59 #

    Olá,
    Gostaria de dizer que o fundo negro transparente nao aparece, porque está faltando uma "}" para fechar a tag na linha: "#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10;"
    basta colocar a "}" depois de "z-index: 10;}"
    Ah! obrigada pelo código, me ajudou muito.
    Felicidades

    Notícia e blog disse...
    5 de setembro de 2010 10:04 #

    @Ana by anA
    Obrigado a você, já consertei o código!

    Casa Harmonica disse...
    24 de outubro de 2010 04:46 #

    Fiz tudinho direitinho como ta no tutorial mas esse (-h) não consta no html e não deu certo a foto foi aberta numa janela normal, nao numa lightbox. O que faço?
    minha imagens e album são do picasa.

    meu blog:http://casaharmonica.blogspot.com
    mande resposta para o e-mail rowro243@hotmail.com por favor

    Cherry Pie disse...
    25 de novembro de 2010 19:42 #

    ola aconteceu comigo o mesmo que no comentario acima, meu blog ainda nao esta disponivel, mas fiz tudo certinho, tirei os outros scripts q podiam conflitar e não funcionou.

    Paróquia São José disse...
    10 de fevereiro de 2011 21:12 #

    Não apareceu nada só redimensionou a imagem original na guia do Google Chrome

    Luiz Eduardo disse...
    24 de março de 2011 15:55 #

    velho gostei do visualisador funfo blz aqui, mas preciso que ninguem copie a imagem depois dela aberta 100% tah ligado, tem como cria um cód aew q faça isso(cancele o botão direito depois da imagem aberta)

    vlw aew e bom trabalho....

    Carol Freitas disse...
    28 de junho de 2011 14:56 #

    VALEU CARA! MUITO BOM! HAHA
    deu certinho obrigada...

    aqui está o meu blog caso queiram ver.. ;)

    http://carolfreitas89.blogspot.com/

    Gabriel Cruz disse...
    15 de setembro de 2011 10:26 #

    Por que quando eu posto as minhas imagens,o código fica diferente do de lá de cima?
    O código fuciona perfeitamente,mas quando posto as imagens o código fica diferente e não funciona,

    Gabriel Cruz disse...
    15 de setembro de 2011 10:55 #

    tem como colocar o codigo para o editor atualizado?

    samafotografo disse...
    4 de outubro de 2011 18:41 #

    olá amigo... poderia me ajudar a implantar esse visualizador no meu blog ?
    abraço

    March 94 disse...
    22 de dezembro de 2011 11:19 #

    como eu coloco mais fotos kkk fiz tudo certinho ,mais nao sei aonde coloco kkkk me ajuda por fvor :D by pablo ,meu blog é topbaladabauru.blogspot.com

    March 94 disse...
    22 de dezembro de 2011 11:51 #

    só me ajuda assim por exemplo : aki o codigo de coloka a imagen . eu preciso que voce repita ele pra min pq to perdido kkkk

    Thannillo NPAgora disse...
    23 de outubro de 2012 14:56 #

    e pra quem usa o live writer, como fazemos?

    Postar um comentário

    Deixe seu comentário aqui
    Para exibir sua foto, escreva o seu comentário e clique em "Visualizar" e em seguida clique em "Adicionar Foto de Perfil"(Só é exibido quando o comentário é publicado como Conta do Google). Para editar seu perfil Clique aqui.