Miniaturas con jQuery

Escrito por

el 03 de August del 2009 en

AudioJungle - Encuentra archivos de musica, loops, efectos de sonido desde $1

Gracias a jQuery podemos crear grandiosos efectos sin la necesidad de utilizar tanto código. Esta vez les explicaré un efecto de "miniaturas" usando CSS y jQuery. El cual lo podemos usar en distintos proyectos como en galerías de imágenes y otro que se les ocurra (ya depende de su imaginación).

1) XHTML

Comenzamos creando la base para aplicar el efecto de miniaturas. Solo creamos una simple lista, con algunas imágenes.

<ul class="mini"> 
	<li><img src="mini1.jpg" alt="" /></li> 
	<li><img src="mini2.jpg" alt="" /></li> 
	<li><img src="mini3.jpg" alt="" /></li> 
	<li><img src="mini4.jpg" alt="" /></li> 
	<li><img src="mini5.jpg" alt="" /></li> 
	<li><img src="mini6.jpg" alt="" /></li> 
</ul>

2) CSS

Una vez que acabamos con la base, pasamos a aplicarle los estilos. Debemos enfocarnos en la posición de las imágenes y de las listas, ya que estas serán la base para aplicarle los efectos con jQuery.

ul.mini {
	height:140px; width:840px; /* Definimos el Tamaño de nuestra lista */
	margin:10px; /* mantener espaciado de los demás elementos de tu web */
	padding:30px; /* para no tener problema al momento de agrandar la imagen de la miniatura */
	list-style: none; /* Importante! para que no salgan los estilos de las listas */
}
ul.mini li {
	margin: 5px;
	float: left;/* alineación de la lista */
	position: relative; /* importante para aplicar el centrado vertical */
	width: 130px;height: 130px; /* Definimos el tamaño de las miniaturas de la lista */
}
ul.mini li img {
	width: 120px; height: 120px; /* tamaño las imagenes en miniatura */
	border: 1px solid #ccc; /* borde de las imágenes */
	padding: 5px; /* teníamos 120px de Ancho/Alto + 10px Ancho/Alto(padding) da los 130px del tamaño de la lista*/
	background: #f0f0f0;
	position: absolute;/* importante definir la posición absoluta */
	left: 0; top: 0;/* posición por defecto */
	-ms-interpolation-mode: bicubic; /* hack IE para la la escala bicúbica */
}
ul.mini li img.hover {
	background:url(miniatura.png) no-repeat center center; /* Un PNG de fondo que le da un efecto de sombra */
	border: none;
}

3) jQuery

El efecto se basa principalmente en cambiar la posición y aumentar el tamaño de la lista a un tamaño mayor (de preferencia al tamaño de la imágen), pues así cuando pasamos encima de las imágenes, éstas se agrandarán según el tiempo que le apliquemos en el código de jQuery.

$("ul.mini li").hover(function() {
	$(this).css({'z-index' : '10'}); // aumentamos el z-index para que quede encima de los demás elementos
	$(this).find('img').addClass("hover").stop()
		.animate({
			marginTop: '-110px', marginLeft: '-110px', // centramos los thumbnail verticalmente
			top: '50%', left: '50%', // Posicionamos a la mitad
			width: '180px', height: '180px',  padding: '20px' // EL tamaño del thumbnail
		}, 400);// Tiempo que demora en hacer el efecto
 
	// Regresando a su posición inicial
	} , function() {
	$(this).css({'z-index' : '0'});// regresamos el z-index a cero
	$(this).find('img').removeClass("hover").stop()
		.animate({
			marginTop: '0', marginLeft: '0',// Posición incial
			top: '0', left: '0', 
			width: '120px', height: '120px', padding: '5px' // Tamaño inicial de la miniatura
		}, 400);// Tiempo que demora en hacer el efecto
});

Demo - Miniaturas con jQuery

GraphicRiver - Increibles Recursos para photoshop desde $1

Anunciate aqui

7 Respuestas en “Miniaturas con jQuery”

lumbreras says:

9 August 2009 at 13:45

Muchas gracias por el tutorial, aun no entiendo muy bien el JQuery, pero no se ve tan difícil, y lo que más me gusta es que se hacen unos efectos muy limpios y livianos, el único problema que tengo ahorita es que si uso 2 diferentes efectos de javascript, solo uno de los 2 funciona, sabes a que se debe?, saludos!!

Reply
MisTeriO says:

9 August 2009 at 18:58

Te sampaste con este tuto!!
xD nunca entendi como hacian eso -lol-
pero voy a practicarlo a ver k tal me sale!!
Thnkz!!
WillxD -_-!

Reply
Larguitto says:

25 August 2011 at 1:21

Hola!! Viendo el tutorial me gustaría saber como mostrar la imagen en una capa distinta al posicionarnos sobre cualquiera de las miniaturas.

Gracias por el tuto!!

Reply
Rikochett says:

4 September 2011 at 13:37

Excelente el plug-in. El desafío es lograr lo mismo mediante php+MySQL, esto es, mostrar una miniatura creada automáticamente con un script CMS a la medida (backend) y luego mostrar todo el efecto con el j-query en el frontpage.

Bueno, se agradece el tutorial.

Reply
- WillxD says:
  
  4 September 2011 at 14:11
  
  Si deseas miniaturas automáticamente, puedes jugar con timthumb (script en PHP) http://code.google.com/p/timthumb/
  
  Saludos.
  
  Reply
Rikochett says:

4 September 2011 at 20:39

Se ve interesante ese código, pero no es exactamente lo que necesito. Dudo mucho que mi sistema de administración de contenidos pueda soportar ese código; de hecho me parece que es incompatible, ya que el mío sí tiene para hacer las miniaturas en forma automática. Si mi dilema está en el frontend, lo que ve toda la gente, en donde la galería que se forma mediante el CMS las fotos son irregulares por causa de que algunas son horizontales, otras verticales y en tamaños no uniformes, por mucho que el sistema haga miniaturas con 150 px, ancho o alto; un solo parámetro me basta.

Entonces por eso pensaba que lo mejor era implementar algo con un css y jquery y ojalá la fila de miniaturas queden ordenadas al estilo Flickr, tamaños uniformes y miniaturas con sistema de Lightbox, efecto logrado y de fácil implementación. Pero no consigo encontrar algo que deje las miniaturas con dimensiones uniformes.

Saludos y gracias por responder! Ah! y te felicito por tu blog, está muy bueno!

Reply
jose - actividades solteros says:

17 November 2011 at 14:58

Tremendo. Justo lo necesitaba y lo he encontrado.

gracias

Reply

WillxD.CoM