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>#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 abaixorel="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
37 Comentários
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
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
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
@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.
Oi gente!!não consegui colocar o visualizador!!!segui todas as regras mas não funcionou!!!pode me ajudar??
@iGaby Olá, qual blog seu você deseja adicionar o lightbox
teste
Ei cara primeiro tutorial que eu vejo funcionar e sem muita democracia. Valew vs esta de parabens......
@Cezar Sempre Com Deus , Obrigado! :)
:D
Adorei, funcionou perfeitamente! Obrigada *_*
Não estou conseguindo implantar no meu Blog.
http://institutomusashi.blogspot.com
@institutomusashi , você deve inserir o código acima de head e não acima de body
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
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 ......................
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
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.
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.
Michele você pode diminuir o tamanhos das imagens basta inserir
height="100px" widht="100px" depois de "<img"
Parace que há um conflito com o gadget 'seguidores' do blogger. Uma pena
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?
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!
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.
É, realmente o codigo dá conflito com outras coisas...como os seguidores, comentário e posts recentes deixam de funcionar....uma pena mesmo...
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
@Ana by anA
Obrigado a você, já consertei o código!
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
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.
Não apareceu nada só redimensionou a imagem original na guia do Google Chrome
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....
VALEU CARA! MUITO BOM! HAHA
deu certinho obrigada...
aqui está o meu blog caso queiram ver.. ;)
http://carolfreitas89.blogspot.com/
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,
tem como colocar o codigo para o editor atualizado?
olá amigo... poderia me ajudar a implantar esse visualizador no meu blog ?
abraço
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
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
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.