Efeitos Imagens Efeitos Javascript Vanessa S.
Galeria de Imagens JQuery Zoom/Hover
Com o JQuery, é possível criar vários efeitos no blog, inclusive em imagens.
Através deste tutorial, em apenas 3 passos você poderá criar uma galeria de Imagens com jQuery. Nesta galeria, suas imagens se apresentam em tamanho menor, e ao passar o mouse em cima, elas ficarão maiores.
Você pode , por exemplo, instalar esta galeria acima da área de postagens, ou abaixo do cabeçalho (crosscol).
Vejamos como aplicar este efeito.
1. Aplicar estilos ao efeito:
1º passo – Vá no menu “modelo >> Editar HTML >> Expandir modelos de widgets”.
Copie o código abaixo e cole-o ACIMA de ]]></b:skin>
ul.thumb {
float: left; list-style: none; margin: 0; padding: 10px; width: 360px; }
ul.thumb li { margin: 0; padding: 5px; float: left; position: relative; width: 110px; height: 110px; }
ul.thumb li img { width: 100px; height: 100px; -ms-interpolation-mode: bicubic; border: 1px solid #ddd; padding: 5px; background: #f0f0f0; position: absolute; left: 0; top: 0; }
ul.thumb li img.hover { background:url(http://4.bp.blogspot.com/_p4Te9Li52fs/So9a2fSh2jI/AAAAAAAAAAc/VX0mAW1oYHc/thumb_bg.png) no-repeat center center; border: none; }
2. Aplicar o Javascript:
2º passo – Copie o código abaixo e coloque-o antes de </head>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function(){
//Larger thumbnail preview
$("ul.thumb li").hover(function() {
$(this).css({'z-index' : '10'});
$(this).find('img').addClass("hover").stop()
.animate({
marginTop: '-110px',
marginLeft: '-110px',
top: '50%',
left: '50%',
width: '174px',
height: '174px',
padding: '20px'
}, 200);
} , function() {
$(this).css({'z-index' : '0'});
$(this).find('img').removeClass("hover").stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '100px',
height: '100px',
padding: '5px'
}, 400);
});
//Swap Image on Click
$("ul.thumb li a").click(function() {
var mainImage = $(this).attr("href"); //Find Image Name
$("#main_view img").attr({ src: mainImage });
return false;
});
});
</script>
Salve as modificações.
3. Adicionando a galeria das imagens ao gadget:
3º passo - Volte em "layout" , no campo onde você quiser adicionar sua galeria, clique em "Adicionar um Gadget" e Selecione a opção "HTML/JavaScript" e cole o seguinte código dentro dele:
<ul class="thumb"> <li><a href="LINK1"><img src="URL-IMAGEM1" alt="" /></a></li> <li><a href="LINK2"><img src="URL-IMAGEM2" alt="" /></a></li> <li><a href="LINK3"><img src="URL-IMAGEM3" alt="" /></a></li> <li><a href="LINK4"><img src="URL-IMAGEM4" alt="" /></a></li> </ul>
Para inserir mais imagens á galeria, repita a linha abaixo antes do código </ul> :
<li> <a href="LINK"><img src="URL-IMAGEM" alt="" /></a> </li>
DICAS:
Para instalar o widget acima da coluna de postagens, você precisa conferir no painel do blog se no seu template já existe a possibilidade de adicionar um gadget acima da coluna de postagens, através do menu "layout".
Se não houver, você terá que fazer algumas modificações no código. Siga este artigo e veja como Como instalar gadgets acima da coluna de postagens.
Para instalar o widget abaixo do cabeçalho(Crosscol), você precisa conferir no painel do blog se no seu template já existe a possibilidade de adicionar um gadget nesta área, através do menu "layout".
Se não houver um campo para "Adicionar Gadget" abaixo do cabeçalho, você terá que fazer algumas modificações no código do template.
Siga este artigo e veja como Como Instalar Gadgets abaixo do Cabeçalho
Se quiser confira DEMO
[alerta]Lembrando que a funcionalidade deste script pode variar de acordo com o template.
Templates que possuem muitos scripts, acabam gerando "conflitos" entre si. Para melhor entendimento, leia este artigo: Por que alguns scripts não funcionam no meu blog.[/alerta]
Vanessa, Como Que Faço Pra Colar Esse Efeito Nas Postagem Popular Do Blog ?????
nota 1000 sua postagem, eu fiz algumas modificações e ficou o maximo.
E consegui modificar o tamanho dele, faz ocorre que o local aonde deveria ficar transparente ficou branco, não sei o que ocorreu, irei olhar ainda.
Vlw muito show
Nathan
Infelizmente não posso te ajudar, pq não tenho como saber o que ocorre no seu template.
Alan
Eu acabei de testar no chrome e para mim ele abriu normalmente.
este script só pega no Mozilla? Testei no Google Chrome mas não deu certo!
Parabéns ! gosto muito do seu blog ! pego muitas coisas dele ! falando sobre o post ficou muuito bom no meu blog mais os links não estão funcionando coloco mais o link não vai ! tem alguma resposta pra isso ?
Aliás… Eu já usava este código como menu em links no blog e agora testei com imagens e deu certinho!
Muuuito legal.
Respondendo o comentário da Mary, testei o código numa postagem e deu certinho. O único problema é que tem que editar a imagem e acertar o tamanho da mesma.
«O» msd «?»
Se existe possibilidade, eu não sei como. Desconheço.
tem como eu escolher o tamanho do zoom que irá aparecer na imagem assim que a pessoa passar o mouse?
Tipo eu gostei desse código, mas, queria saber como eu faço para colocar esse efeito dentro da postagem tipo funcionará da mesma maneira se eu colocar esse mesmo código dentro do editar html da postagem? queria um desse tipo mas que funcione para postagens de fotos no blog!
Allen Gadelha
Isso não é possível! Só dá pra incluir imagens através dos links mesmo.
Parabéns pelo belo trabalho. Tenho apenas uma dúvida: Como faço para incluir imagens diretamente de meu HD e não de um link na galeria de imagens jquery?
Douglas
Leia a informação que está no final do post sobre: "Por que alguns scripts não funcionam no meu blog".
eu uso o zoom/hover em algumas imagens do meu blog, como no exemplo acima. fui usar o componente lightbox em outras imagens e parou de funcionar o zoom/hover. sabe me explicar pq?
Vanessa Pereira:
O shadowbox realmente é muito bom. Tem um artigo publicado aqui no blog que fala sobre ele. Obrigada pelo comentario.
Ana by anA:
Fico feliz q tenha dado certo no seu blog, obrigada pelo comentário querida.
Taillard:
Pode linkar sim, eu agradeço. 🙂
E obrigada pelo comentario, volte sempre que precisar.
Clau, vou te linkar a meu blog porque em breve terei que te dar creditos,pois vou usar alguns de seus tutoriais em meus tutoriais sobre a carta magica,em meus blogs.
Você merece lindaaa!!!
Ah ainda não usei seus lindos exclusivos e perfeitos templates,que você montou para mim.
Sucesso menina!!!
Valeu Clau,
finalmente eu pude haver no meu blog uma página só para fotos …
se quiser conferir:
http://anabyanabrasil.blogspot.com/
Que Deus continue abençoando a tua mente
Olá! To montando meu blog e seu site tem sido MUITO útil!!! Então, no meu blog tem uma página só de fotos. Para montar essa página fiz uma mistureba aqui com a galeria J.Query e o SHADOWBOX e o efeito ficou incrível! Pq com o J.Query a imagem aumentou muito pouco, aí c/ o Shadow quando vc clica na imagem ela aumenta até o tamanho real dela! Acho uma ótima dica pra quem quer publicar fotos!
Dá uma olhada no resultado: http://www.weheartitsomuch.co.cc/p/looks.html
Se alguem quiser saber como eu fiz é só mandar email. Tem formulário de contato no meu blog! hehe
Não mostrei meu blog pra ninguém ainda! Não tem nem post! Quero montar ele todo direitinho pra depois começar a divulgar!!
Super obrigada por todas as dicas preciosas q vc posta!!
ta certo vou fazer isso em todas as postagens plagiadas !
descupa!
mas eu prometo conferir tudo !
so que eu vou mudar todas as postagens do meu blog
vou fazer do meu jeito e que este blog estava com outra pessoa o meu primo ae ele bagunçou tudo !
vou fazer assim eu leia postagens mas não copio eu posto de um jeoto diferente tipo vou entender e postar com minhas palavras ok !
atenciosamente francinelson!
@Mary:
Acredito que dê para usar em postagem sim. Faz um teste e veja se funciona.
No caso vc segue todos os passos normalmente, mas quando chegar no passo 3 (3. Adicionando a galeria das imagens ao gadget), ao invés de adicionar em um gadget, adicione o código referente dentro do corpo da postagem.É uma questão de testar para comprovar se funciona.
@Taillard:
E vc como sempre uma fofa!Adorei que veio me visitar!
Beijos.
Como sempre maravilhosa!
Beijao amiga querida!
Oi Clau! Estou com uma dúvida. Queria saber se tem como usar este recurso só em uma página? Tipo fazer uma página só com fotos? Bjinhos