Visor de imágenes con jQuery

visor-imagenes-jquery

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.


Miniaturas

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

Leonardo Maia skillicorn theenergycell Fred Maya

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

Una Respuesta a “Visor de imágenes con jQuery”

  1. Alfre Diseño Grafico dice:

    Lo hice y funcinó perfecto. Aunque sí hizo falta explicar (imagino que, debido a que lo hicieron anteriormente, pues no lo hacen aquí) un poco más en qué formato de archivo va cada codigo(ejem: el código estilo va en un archivo “style.css”, y el código que va en el javascript, es por supuesto en un “nombre.js” y, agregar en el html, el llamado a los archivos .css y .js para que funcione…pero es solo mi opinion….lo que quisiera saber es como hago para que se autoreproduzca cada ciertos segundos, pase de una imagen a otra…GRACIAS por el aporte!!!

Deja un comentario