Você não está conectado. Conecte-se ou registre-se

Efeito JQuery/Zoom nos banners

Ir em baixo  Mensagem [Página 1 de 1]

1 Efeito JQuery/Zoom nos banners em Ter Nov 29, 2011 8:39 pm

p3dro

avatar
Membro Nível 3
Membro Nível 3
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.

1. Aplicar estilos ao efeito:

1º passo - Vá em design >> Editar HTML >> Expandir modelos de widgets.
Proucure por:

Código:

]]></b:skin>


2º Passo - E acima do codigo superior cole o codigo abaixo


Código:
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;
}


3º passo - 2. Aplicar o Javascript:

4º passo -

Código:
Copie o código abaixo e coloque-o antes de </head>

Código:
<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:

1º passo - Volte na aba "Design" >>"Elementos da página", 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:

Código:
<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>


Se gosto clique em Obrigado

Ver perfil do usuário

2 Re: Efeito JQuery/Zoom nos banners em Qua Nov 30, 2011 2:46 pm

gin

avatar
Membro Nível 4
Membro Nível 4
Não intendi Print Aqui por favor Very Happy

Ver perfil do usuário http://scanlines.com.br

3 Re: Efeito JQuery/Zoom nos banners em Dom Dez 04, 2011 8:01 pm

tsuna57

avatar
Iniciante
Iniciante
Não intendi Print Aqui por favor >> 2

Ver perfil do usuário http://crownanime.blogspot.com

4 Re: Efeito JQuery/Zoom nos banners em Seg Dez 05, 2011 6:05 am

Xiso

avatar
Membro Nível 2
Membro Nível 2
Muito bom valeu o tutorial o jquery é um bom programa para usar.

Ver perfil do usuário http://www.animes-on.com

5 Re: Efeito JQuery/Zoom nos banners em Seg Dez 05, 2011 4:06 pm

Bruno


Iniciante
Iniciante
Dahora Pedro Tava Procurando esse Codigo ^^

Ver perfil do usuário http://Bakumanseven.blogspot.com

Conteúdo patrocinado


Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum

 

Um fórum grátis | © PunBB | Fórum grátis de ajuda | Fale conosco | Assinalar uma queixa | Fórum grátis