Cómo crear una espectacular galería de imágenes con jQuery

Existe un buen número de efectos en jQuery que también pueden hacerse con CSS, como por ejemplo revelar el contenido extra de un área determinada cuando se hacer hover sobre ella con el ratón, pero con jQuery conseguimos darle un aspecto más atractivo.

Este tutorial explica cómo crear una galería de imágenes con viñetas, y cómo conseguir que al hacer clic sobre ellas se revele la imagen completa e información adicional sobre ella.

El funcionamiento de este script es el siguiente:

1. El evento se inicia al darle al botón de “Más información”
2. “Crecen” dos cosas: todo el contenedor, y el div que contiene la foto
3. Desaparece el botón de “Más información”
4. Aparecen el área de “Información” y el botón de cerrar

CSS

.foto-area
{
	width: 100px;
	height: 130px;
	padding: 10px;
	border: 1px solid #666;
	overflow: hidden;
	position: relative;
	margin: 10px;
	background: white;
}
#foto
{
	width: 100px;
	height: 100px;
	background: url(imagenes/mthood.jpg) center center;
	margin-bottom: 5px;
}
.info-area
{
	opacity: 0.0;
}
a.mas-info
{
	display: block;
	width: 89px;
	height: 26px;
	background: url(imagenes/masInfo.jpg);
	text-indent: -9999px;
}
a.cerrar
{
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: block;
	width: 20px;
	height: 21px;
	background: url(imagenes/botonCerrar.jpg);
	text-indent: -9999px;
}

jQuery

	$(document).ready(function(){

		$(".mas-info").click(function(){
			$(this).parents(".foto-area").animate({
					width: "500px",
					height: "470px",
			        borderWidth: "10px"
			      }, 600 );

			$(this).fadeOut();

			$("#foto").animate({
		        width: "500px",
				height: "375px"
			      }, 600 );
			$(".info-area").animate({
		        opacity: 1.0,
			      }, 600 );
			});

		$(".foto-area .cerrar").click(function(){
			$(this).parents(".foto-area-1").animate({
					width: "100px",
					height: "130px",
			        borderWidth: "1px"
			      }, 600 );

			$(".mas-info").fadeIn();

			$("#foto").animate({
		        width: "100px",
				height: "100px"
			      }, 600 );
			$(".info-area").animate({
		        opacity: 0.0,
			      }, 600 );
			});

		});

Aunque el código funciona bien, tiene algunos problemas y limitaciones:

• El tamaño al que crecen .foto-area y #foto se ha especificado en el código de jQuery. Sería mucho mejor si en lugar de eso, crecieran en base al tamaño de la imagen, quizá con innerWidth.
• La forma de referenciar los elementos de la página también es mejorable; habría que buscar un modo de referenciar padres e hijos para reducir la cantidad de código.

o bien los archivos de ejemplo.

Fuente: Learning jQuery: Revealing Photo Slider (css-tricks)