Miniaturas con títulos transparentes en jQuery

Escrito por: Martín el 08-01-2010 08:19:04 y leído 1000 veces

Este plugin está muy visto ya, pero no por eso deja de sernos muy útil a la hora de presentar miniaturas con algún título o descripción. Evidentemente, por el tamaño de la miniatura, no puede ser mucho el texto que le agregues, pero para un título o una muy breve descripción, llega de sobra.

Es muy fácil de aplicar, como casi todo lo que se hace utilizando jQuery, se personaliza mediante tu hoja CSS y unos pocos parámetros podremos lograr unos efectos muy buenos.

La demo está poco trabajada, lo reconozco, pero la idea es que veas el funcionamiento y lo apliques a tus diseños.

¿Lo mejor?
Que no requiere nada más que la librería jQuery, con lo que no irás cargando de plugins tus códigos.

Si quieres ver la documentación original, te dejo el link de su creador.

Ahora vamos a los códigos:
1) Un poquito de JS en el head de tu página (código 1)
2) Un poco de CSS para personalizar a tu gusto las imágenes... (código 2)
3) Tus imágenes en xhtml, php o lo que quieras (código 3)

Código JAVASCRIPT

$(document).ready(function() {

	//move the image in pixel
	var move = -15;
	
	//zoom percentage, 1.2 =120%
	var zoom = 1.2;

	//On mouse over those thumbnail
	$('.item').hover(function() {
		
		//Set the width and height according to the zoom percentage
		width = $('.item').width() * zoom;
		height = $('.item').height() * zoom;
		
		//Move and zoom the image
		$(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200});
		
		//Display the caption
		$(this).find('div.caption').stop(false,true).fadeIn(200);
	},
	function() {
		//Reset the image
		$(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:100});	

		//Hide the caption
		$(this).find('div.caption').stop(false,true).fadeOut(200);
	});

});

Código CSS

.item {
	width:100px;
	height:100px;	
	border:4px solid #222;	
	margin:5px 5px 5px 0;
	
	/* required to hide the image after resized */
	overflow:hidden;
	
	/* for child absolute position */
	position:relative;
	
	/* display div in line */
	float:left;
}

.item .caption {
	width:100px;
	height:100px;
	background:#000;
	color:#fff;
	font-weight:bold;
		
	/* fix it at the bottom */
	position:absolute;
	left:0;

	/* hide it by default */
	display:none;

	/* opacity setting */
	filter:alpha(opacity=80);    /* ie  */
	-moz-opacity:0.8;    /* old mozilla browser like netscape  */
	-khtml-opacity: 0.8;    /* for really really old safari */  
	opacity: 0.8;    /* css standard, currently it works in most modern browsers like firefox,  */

}

.item .caption a {
	text-decoration:none;
	color:#0cc7dd;
	font-size:16px;	
	
	/* add spacing and make the whole row clickable*/
	padding:5px;
	display:block;
}

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

img {
	border:0;
	
	/* allow javascript moves the img position*/
	position:absolute;
}

.clear {
	clear:both;	
}

Código XHTML

<div class="item">
	<a href="#"><img src="m.gif" alt="M" title="" width="100" height="100" /></a>
	<div class="caption">
		<a href="">M</a>
		<p>de Martín</p>
	</div>
</div>

<div class="item">
	<a href="#"><img src="a.gif" alt="A" title="" width="100" height="100" /></a>
	<div class="caption">
		<a href="">A</a>
		<p>de Martín</p>
	</div>
</div>

<div class="item">
	<a href="#"><img src="r.gif" alt="R" title="" width="100" height="100" /></a>
	<div class="caption">
		<a href="">R</a>
		<p>de Martín</p>
	</div>
</div>

<div class="item">
	<a href="#"><img src="t.gif" alt="T" title="" width="100" height="100" /></a>
	<div class="caption">
		<a href="">T</a>
		<p>de Martín</p>
	</div>
</div>

<div class="item">
	<a href="#"><img src="i.gif" alt="I" title="" width="100" height="100" /></a>
	<div class="caption">
		<a href="">I</a>
		<p>de Martín</p>
	</div>
</div>

<div class="item">
	<a href="#"><img src="n.gif" alt="N" title="" width="100" height="100" /></a>
	<div class="caption">
		<a href="">N</a>
		<p>de Martín</p>
	</div>
</div>

<div class="clear"></div>

Categorías: Jquery • Plugin • Miniaturas • Thumbnail • •