BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

Miniaturas con títulos transparentes en jQuery

08/ENE/2010 4.915 visitas Ver comentarios
Miniaturas con títulos transparentes en jQuery

ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

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 1 - 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 2 - 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 3 - HTML
<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>

Acerca del Autor...

Macadia, es una agencia de Diseño Web Coruña, especializada en maquetación css y desarrollo de páginas web a medida con más de 21 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Los comentarios han sido desactivados momentaneamente a la espera de que Disqus adapte su plataforma a la próxima RGPD que entra en vigor desde el 25/05/2018