Visor de imágenes con jQuery

Recursos | Escrito por Ezequiel M. | Abril - 2 - 2010

Seguimos con mas recursos de jQuery, en este caso creamos un visor de imágenes con una barra de navegación y efectos jQuery. Ideal para aplicarlo en proyectos web donde se necesiten galerías de fotos o paneles para mostrar noticias recientes.

Creando el HTML

Usamos divs contenedores en los cuales “wrap” le da el estilo de salida con sombras y bordes, e “inner” enmarca en su interior las imágenes.

				
				Leonardo Maia
			

				
				skillicorn
			

				
				theenergycell
			

				
				Fred Maya
			

Miniaturas

Para las miniaturas, un contenedor en el que se incluye la flecha de navegación y las miniaturas con los enlaces.

Hoja de estilo

La hoja de estilo para esta galería de imágenes con jQuery es sencilla, aquí se puede ver que el uso del valor Hidden es fundamental para lograr el efecto.

#preview_wrap {
	margin: 0 auto;
	padding: 22px;
	width: 550px;
	height: 400px;
	background: url('bg_preview.gif') top left no-repeat;
}

#preview_outer {
	overflow: hidden;
	width: 550px;
	height: 400px;
	position: relative;
}

#preview_inner {
	text-align: left;
	height: 100%;
	position: relative;
}

#preview_inner div {
	float: left;
	width: 550px;
	height: 400px;
	position: relative;
}

#preview_inner div a {
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	width: 100%;
	text-indent: 20px;
	padding: 20px 0;
	color: #fff;
	background: url(bg_trans.png);
	text-decoration: none;
	font-size: 18px;
}

#thumbs {
	padding-top: 30px;
	position: relative;
	width: 750px;
	text-align: center;
}

#thumbs span {
	padding: 12px;
	width: 80px;
	height: 80px;
	cursor: pointer;
	background: url('bg_thumb.gif') top left no-repeat;
	display: inline-block;
}

#arrow {
	position: absolute;
	top: -13px;
	background: url('bg_arrow.gif') top center no-repeat;
	width: 104px;
	height: 39px;
	display: none;
}

jQuery

Solo queda por agregar un poco de javascript, el código esta comentado paso a paso.

$(document).ready(function() {
	// guardando objetos jquery.
	var outer	= $("#preview_outer");
	var arrow	= $("#arrow");
	var thumbs	= $("#thumbs span");

	var preview_pos;
	var preview_els	= $("#preview_inner div");
	var image_width	= preview_els.eq(0).width(); //  ancho de las imagenes

	// Evento Click
	thumbs.click(function() {
		// Get position of current image
		preview_pos = preview_els.eq( thumbs.index( this) ).position();

		// Animando!
		outer.stop().animate( {'scrollLeft' : preview_pos.left},	500 );
		arrow.stop().animate( {'left' : $(this).position().left },	500 );
	});

	// Reseteando posiciones
	arrow.css( {'left' : thumbs.eq(0).position().left } ).show();
	outer.animate( {'scrollLeft' : 0}, 0 );

	// Tomando el ancho inicial
	$("#preview_inner").css('width', preview_els.length * image_width);
});

Ejemplo

Ejemplo | Descargar