Criando uma galeria de fotos com efeito Fade em jQuery

Criaremos hoje uma galeria de imagens com descrição em efeito Fade do jQuery. Muito usado em portifólios, virou símbolo de modernidade fazer com que o site tenha efeitos de flash e com pouco trabalho. Vamos ao código:

1.HTML

Primeiramente, html. Toda a descrição e/ou título precisa estar dentro da classe “caption”:

<div class="item">
	<a href="#"><img src="image.gif" alt="title" title="" width="125" height="125"/></a>
	<div class="caption">
		<a href="">Titulo</a>
		<p>Descrição</p>
	</div>
</div>

2.CSS

O código está explicado nos comentários:

body {
	font-family:arial;
}

.item {
	width:125px;
	height:125px;
	border:4px solid #222;
	margin:5px 5px 5px 0;

	/* necessário para ocultar a imagem depois de redimensionada */
	overflow:hidden;

	/* child absolute position */
	position:relative;

	/* mostrar div em linha */
	float:left;
}

.item .caption {
	width:125px;
	height:125px;
	background:#000;
	color:#fff;
	font-weight:bold;

	/* fix it at the bottom */
	position:absolute;
	left:0;

	/* escondê-lo por padrão */
	display:none;

	/* opacidade */
	filter:alpha(opacity=80);    /* ie  */
	-moz-opacity:0.8;    /* navegadores mozilla antigo  */
	-khtml-opacity: 0.8;    /* Para o safari muito antigo */
	opacity: 0.8;    /* CSS normal, funciona em todos os browsers atuais  */

}

.item .caption a {
	text-decoration:none;
	color:#0cc7dd;
	font-size:16px;	

	/* adicionar espaçamento e fazer a linha (row) inteira clickavel */
	padding:5px;
	display:block;
}

.item .caption p {
	padding:5px;
	margin:0;
	font-size:10px;
}

img {
	border:0;

	/* permitir que o javascript troque o position*/
	position:absolute;
}

.clear {
	clear:both;
}

3.jQuery

$(document).ready(function() {

	//move a img em pixels
	var move = -15;

	//porcentagem de zoom, 1.2 =120%
	var zoom = 1.2;

	//On mouse over
	$('.item').hover(function() {

		//Define a largura e altura de acordo com a percentagem de zoom
		width = $('.item').width() * zoom;
		height = $('.item').height() * zoom;

		//mover e ampliar a imagem
		$(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200});

		//mostra a descrição
		$(this).find('div.caption').stop(false,true).fadeIn(200);
	},
	function() {
		//Reseta a imagem
		$(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:100});	

		//esconde a descrição
		$(this).find('div.caption').stop(false,true).fadeOut(200);
	});

});

4.Demonstração

Você pode ver o resultado do tutorial no seguinte link:

http://www.queness.com/resources/html/thumbnail/index.html

ou mesmo baixando os arquivos do tutorial:

Baixar Arquivos