Efeitos Imagens Efeitos Javascript Vanessa S.
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.
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.
- Veja relação com opções de Sites para hospedagem de arquivos.
- Antes de hospedá-los, crie uma pasta com o nome “lightbox-1”.
- Criada a pasta, coloque todos os arquivos contidos na pasta “js” dentro desta pasta.(effects,builder, lightbox.js, scriptaculous, e prototype)
- 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('link');
cssNode.type = 'text/css';cssNode.rel = 'stylesheet';
cssNode.href = ''http://url do lightbox.css';
cssNode.media = 'screen';
cssNode.title = 'using lightbox 2 with GPC';
document.getElementsByTagName("head")
[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.
Cria Brasil
O efeito funcionará em qualquer postagem, desde que você utilize o código html acima para inserir a imagem.
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.
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
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 😉
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!
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!
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.
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.
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?
Kevvin Oliveira
Não há como eu saber o q aconteceu no seu blog. Não tenho como ajudar.
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.
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.
Musica em Fato
O efeito funciona em qualquer imagem, desde que você utilize o código publicado no tutorial acima para inserir a imagem.
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!
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
Kra minha imagem quando clicada ela abre la em baixo do blog :X
@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.
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!
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!
@euanaliso.com:
Infelizmente não há como, pois estes script entram em conflito com o JQuery.
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.