Imagem com efeito de Zoom com jQuery
Então, hoje eu vou correr pela técnica usada para ampliar as miniaturas das imagens e exibir a sobreposição de texto.
O HTML
Há dois DIV que compõem a construção de cada elemento, primeiro temos fora. Div item que é o recipiente para a nossa imagem e legenda. Diretamente dentro do ‘item’ div nós temos a imagem com o div ‘caption’ logo abaixo que, com um link e dentro de tag de parágrafo. dê uma olhada na estrutura do código e da imagem abaixo para ver a construção dos elementos div.
[sourcecode language=”html”]
<div class="item">
<img src="http://papermashup.com/wp-content/themes/arthemia/portfolio/images/jennifer.jpg" height="271" width="304" />
<div class="caption">
<a href="http://jenniferjohnston.tv">Jennifer Johnston</a>
<p>Scottish voiceover Jennifer Johnston. Branding, site design and development</p>
</div>
</div>
[/sourcecode]
O CSS
[sourcecode language=”css”]
.item {
width:304px;
height:271px;
border:4px solid #333;
margin:30px 12px 10px 5px;
overflow:hidden;
position:relative;
float:left;
}
.item .caption {
width:304px;
height:71px;
bottom:0;
color:#fff;
background:#000;
font-weight:700;
position:absolute;
left:0;
display:none;
filter:alpha(opacity=82);
-moz-opacity:0.9;
opacity: 0.9;
}
.item .caption a {
text-decoration:none;
color:#0cc7dd;
font-size:17px;
letter-spacing:-1px;
font-family:Arial, Helvetica, sans-serif;
padding:5px;
display:block;
}
.item .caption p {
padding:5px;
margin:0;
color:#fff;
line-height:15px;
font-size:12px;
}
.item img {
border:0;
position:absolute;
}
[/sourcecode]
O JavaScript
Você pode ver que nós estamos definindo duas variáveis, ‘zoom’ e ‘move’. Observe que em vez de declarar var novamente na frente ‘move’ a variável omiti-lo. Isso porque, se estamos definindo múltiplas variáveis com jQuery você não precisa adicionar cada vez var, os valores são quase acorrentado.
Os próximos passos são que configurar um. Função de foco que, quando acionado irá animar a largura e altura da imagem para dar a impressão de que a imagem é diminuir o zoom, também estamos animando a legenda para fade in e out em foco.
[sourcecode language=”php”]
$(document).ready(function() {
var zoom = 1.1
move = -15;
$(‘.item’).hover(function() {
width = $(‘.item’).width() * zoom;
height = $(‘.item’).height() * zoom;
$(this).find(‘img’).stop(false,true).animate({‘width’:width, ‘height’:height, ‘top’:move, ‘left’:move}, {duration:300});
$(this).find(‘div.caption’).stop(false,true).fadeIn(300);
},
function() {
$(this).find(‘img’).stop(false,true).animate({‘width’:$(‘.item’).width(), ‘height’:$(‘.item’).height(), ‘top’:’0′, ‘left’:’0′}, {duration:300});
$(this).find(‘div.caption’).stop(false,true).fadeOut(400);
});
});
[/sourcecode]
Para ver a demostração clique aqui, para baixar clique aqui.