Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1502920770
Vida do cache: 1502963970
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Efeitos Imagens Efeitos Javascript

LightBox – Efeito nas Imagens com javascript

Atendendo a pedidos de sugestão de postagem, neste tutorial você vai ver como incluir um efeito expansível nas imagens de seus posts, igual a este que está neste blog de teste.

lightbox

Este efeito utiliza arquivos javascript para seu funcionamento.
Se preferir, o blogger dispõe de um efeito padrão bem parecido com este. Caso se interesse, recomendo que leia o artigo: Efeito LightBox padrão do Blogger

1º Passo – Download dos arquivos javascript:

Faça download dos arquivos javascrits necessários para utilização deste efeito:
Download

2º Passo – Hospedar os arquivos:

Hospede os arquivos em seu próprio site de hospedagem.

  1. Antes de hospedá-los, crie uma pasta com o nome “lightbox-1”.
  2. Criada a pasta, coloque todos os arquivos contidos na pasta “js” dentro desta pasta.(effects,builder, lightbox.js, scriptaculous, e prototype)
  3. Agora Coloque o arquivo “lightbox.css” nesta mesma pasta.

Agora hospede a pasta com os arquivos.
Após hospedar os arquivos, copie os links e guarde-os, pois você precisará deles para colocar as urls no local indicado no próximo passo.

3º Passo – Inserir código javascript no HTML do seu Template:

Vá no menu “modelon”, entre na edição HTML do seu template, e procure pela tag ]]></b:skin>
e cole logo ABAIXO dela:


<!-- Início do código Lightbox -->
<script language='Javascript' type='text/javascript'>
var cssNode = document.createElement(&#39;link&#39;);
cssNode.type = &#39;text/css&#39;;cssNode.rel = &#39;stylesheet&#39;;
cssNode.href = &#39;'http://url do lightbox.css&#39;;
cssNode.media = &#39;screen&#39;;
cssNode.title = &#39;using lightbox 2 with GPC&#39;;
document.getElementsByTagName(&quot;head&quot;)
[0].appendChild(cssNode);
</script>

<script src='http://url do prototype.js' type='text/javascript'/>

<script src='http://url do scriptaculous.js?load=effects,builder' type='text/javascript'/>

<script src='http://url do lightbox.js' type='text/javascript'/>

<!-- Final do código Lightbox -->

Lembrando que você deve de inserir os links dos Arquivos Hospedados no local indicado no código.

Se você notou,no código acima não há espaço para inserir os scripts ‘Builder’ e ‘Effects’, mas eles devem ser hospedados na mesma conta, e devem estar na mesma pasta que os demais arquivos js foram hospedados.

4º Passo – Ativar o efeito Lightbox nas imagens de suas postagens:

Para ativar o efeito Lightbox nas suas postagens, você deverá hospedar todas as imagens que irá utilizar,fora do Blogger (Não utilize o modo fazer ‘upload de imagem’ no próprio editor html da postagem).
Hospede as imagens no seu álbum Picasa.web
Depois de hospedadar suas imagens, copie a url fornecida(endereço da imagem) e cole neste código, no local indicado:


<a href="URL-DA-IMAGEM" rel="lightbox"><img border="0" src="URL-DA-IMAGEM" style="height: 300px; width: 300px;" /></a>

Importante:
1. O efeito funcionará em qualquer postagem, desde que você utilize o código acima para inserir a imagem.
Sempre que for utilizar este efeito nas imagens que irá postar, use o código acima, incluindo o URL da sua imagem no local indicado.
2. Ajuste os valores de width e height, pois será ali que você vai definir o tamanho que sua imagem se apresentará no post, antes de se expandir.
Quando se clica na imagem, ela expandirá e se apresentará no tamanho original.

Confira o demo deste efeito nesta postagem.

 
[alerta]ATENÇÃO:

Se você utiliza algum recurso com o javascript JQuery, como Wigets rotativos por exemplo, aconselho que não utilizem o recurso do LightBox deste tutorial, pois estes dois códigos javascript quando usados juntos, no mesmo template, entram em conflito, e ambos deixam de funcionar. Portanto só ative o recurso de efeito nas imagens com o LightBox se você não estiver usando nenhum recurso com o JQuery.[/alerta]

Para usuários que utilizam outros efeitos a base de JQuery, eu recomendo que conheça outro recurso com efeito semelhante ao LightBox e que não conflita arquivos da biblioteca JQuery:
Efeito ShadowBox.



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

21 Comentários

  1. .:: Clau ::. disse:

    Cria Brasil
    O efeito funcionará em qualquer postagem, desde que você utilize o código html acima para inserir a imagem.

  2. Cria Brasil disse:

    Olá!

    Criei uma página estática no meu blog com o nome de "Galeria" para colocar varias imagens, porém não consigo fazer este efeito funcionar.
    Tenho que fazer os mesmos procedimentos escritos acima? Ou para páginas estáticas muda alguma coisa?

    Obrigada.

  3. Gabbix disse:

    Apareceu essa mensagem de erro:

    Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: The reference to entity "d" must end with the ';' delimiter.
    Expandir model

  4. .:: Clau ::. disse:

    Gustavo
    Que eu saiba não tem como. Vc terá que editar todos os posts, um a um. Lembre-se sempre: qdo queremos deixar o blog do jeito que a gente realmente quer, dá trabalho mesmo, mas no final, é satisfatório 😉

  5. Gustavo disse:

    Parabéns pelo Blog Clau, mtuuuuu bom msm!

    A minha dúvida é a da "Musica em fato", teria algum modo de aplicar o lightbox em todas as imagens já existentes?
    É por que seria inviável editar todos os posts existentes e alterar todas as imagens.

    Se fosse possível usar o lightbox como uma classe talvez daria certo?

    Sabe algum modo?

    Obrigado pela atenção!

  6. Felipe Correia disse:

    Eu estava aqui me matando para tentar colcoar certo, mas, eu tinha colocado certo, só que eu estava usando o script para adicinar efeitos no tooltip e ai eu retirei ele o lightbox funcionou. valew pela dica Clau!

  7. .:: Clau ::. disse:

    Sneakdan
    Eu corrigi os endereços das imagens e já atualizei o arquivo e já o disponibilizei para download novamente. Vc vai ter q fazer download do arquivo corrigido e hospedar tudo de novo. Eu até pensei em disponibilizar as imagens e cada um fazer as alterações nos arquivos, mas ia ficar muito complicado e tenho certeza que algumas pessoas iam acabam encontrando dificuldades.

  8. .:: Clau ::. disse:

    Sneakdan
    O problema é que as imagens estavam hospedadas no Tynipc e o site retirou todas as imagens do ar.
    Eu vou disponibilizar as imagens para downlod e fazer um update no post explicando como substituir os endereços das imagens nos códigos de funcionamento do efeito.

  9. Sneakdan disse:

    O efeito funcionou bem, mas tanto em meu teste como em seu demo, há uma tela de erro, junto a foto que abriu, que diz em inglês que a imagem foi movida ou deletada. A unica possibilidade de fechar a foto, é clicando nesta mensage-imagem do Tinypic. Como eu faço para mudar isto, e finalmente aparecer o X de fechar?

  10. .:: Clau ::. disse:

    Kevvin Oliveira
    Não há como eu saber o q aconteceu no seu blog. Não tenho como ajudar.

  11. Kevvin Oliveira disse:

    Olá Clau!
    Instalei o efeito em um blog de testes o Designe de Modelo. Infelizmente, o efeito não deu certo, ele abre no fim da página, a inda tem que rolar a página por kilómetro! Não ultilizo qualquer outra especie de Script no meu site. Você saberia me dizer o problema?
    PS: Refiz o tutorial 3 vezes e a hospedagem dos Scripts está correta e sem nenhum problema.

  12. Lukas disse:

    Clau eu não compreendi esta parte:
    – Faça upload do arquivo "lightbox.css" em outra página. Repita o procedimento para criar uma página e nomei-a como "lightbox-2" e hospede nela o arquivo css.

  13. ::Clau:: disse:

    Musica em Fato
    O efeito funciona em qualquer imagem, desde que você utilize o código publicado no tutorial acima para inserir a imagem.

  14. Musica em Fato disse:

    Olá,
    gostaria de saber se tem como aplicar o efeito lightbox automaticamente no blog, só de colocar a imagem no blog, o efeito lightbox já funcione.
    Obrigado!

  15. Matheus G. disse:

    olá clau descobri com usar efeito com o jquery que não entra em conflito com o gadgets de seguidores como o comentário não permite mostrar o código ele está neste link: http://txtb.in/gkU

  16. ideiasdegiri disse:

    Kra minha imagem quando clicada ela abre la em baixo do blog :X

  17. ::Clau:: disse:

    @PHelipe:
    Pode ser problemas de hospedagem do script, alguns scripts quando hospedados no Google sites não estão funcionando corretamente, não sei o pq. Recomendo que hospede o js no Dropbox. Ou pode ser tb que vc não tenho hospedado de forma correta, note que no tutorial explica a necessidade de se criar uma pasta e hospedar todos os arquivos nesta pasta. Dá uma relida no tutorail e veja se vc seguiu todos os passos corretamente.

  18. PHelipe disse:

    Clau, desculpe por mandar a primeira duvida tão apressadamente. Acabei resolvendo o problema que havia citado.
    Porém, outro surgiu. Deu tudo certo, mas o efeito lightbox não abre, quando a genteclica na foto nada acontece, nem mesmo ela é aberta na mesma janela sem o efeito.

    Se for coisa simples, peço sua ajuda.
    Obrigado!

  19. PHelipe disse:

    Oi,Clau!

    Quando eu eu coloco o link do prototype.js ele dá o seguintte erro:

    "The reference to entity "d" must end with the ';' delimiter."

    Já tentei postálo de novo no google sites e copiar esse novo link, mas o problema persiste, e é só com o prototype.js.

    Sabe o queé isso?

    Obrigado!

  20. ::Clau:: disse:

    @euanaliso.com:
    Infelizmente não há como, pois estes script entram em conflito com o JQuery.

  21. euanaliso.com disse:

    Olá, eu utilizo o jquery em meu blog e queria muito utilizar este lightbox que para mim seria muito util…

    Eu tinha visto este tutorial em um site em inglês e já o tinha utilizado antes em outro blog e funciona de maneira magnífica, porém agora estou com outro blog e este utiliza jquery e o lightbox não funciona…

    Queria saber se existe alguma maneira de funcionar sem o jquery interferi-lo e ele interferir o jquery?

    ou algum outro recurso de ofereça a mesma função ou função semelhante?

    desde já obrigado e parabéns pelos belos posts.

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.