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 • •
titulos jquery • jquery titulos • titulos con jquery • jquery miniaturas • miniaturas con jquery • miniaturas jquery • titulo imagen jquery • miniatura jquery • titulos en jquery • mostrar minuaturas jquery • titulo imagenes jquery • efectos jquery mover div • titulo dentro de miniatura css • efecto jquery mouseover fade caption • titulo de imagen jquery • in pixelvar move • div transparentes en jquery • bordes transparentes con jquery • mostrar div al mover scroll jquery • jquery caption image • martin iglesias imagen mouseover • function transparente jquery • slider jquery fade caption lateral • jquery imagen move • titulo a bajo de una imagen con jquery • titulos en las imagenes jquery • caption transparente sobre imagenes en php • percentage jquery • mostrar caption jquery • hover miniaturas jquery • jquery menues#sclient=psy-ab • posts relacionados con imagen en miniatura jquery • EFECTOS PARA PHP JQUERY imagenes ON OVER DESCRIPCION • titulo div jquery • cargar imagen como un efecto pixeleado# • efectos de titulos usando jquery • jquery mostrar caption • jquery efecto imagen title show transparente • hover imagen con descripcion jquery • efecto mouseover en miniaturas jquery • transparente jquery • galerias jquery fotos con miniatura • reset img proportion jquery • scroll imagenes jquery caption • jquery zoom in imgage a 200% php • titulo image jquery • transparencia jquery mouseover • letras adhesivas miniaturas • scroll jquery con miniaturas • titulo foto jquery • galeria jquery con miniaturas y captions • imagen titulos jquery efecto • titulo foto con jquery • efectos jquery titulo • div con transparencia mouse over • titulo jquery sobre imagenes • foto caption jquery • titulo y miniaturas blog • titulos de imagenes jquery • galeria de imagenes miniatura JQUERY • $(document) ready(function() { //move the image in pixel var move = 0; //zoom percentage 1 2 =120% var zoom = 1 0; //on mouse over those thumbnail $( • upload image jquery miniaturas • jquery php div transpartentes • jquery con miniaturas • 200 jquery imagenes • jquery divs semitransparentes • galeria imagenes titulo descripcion image-title • galeria jquery con titulo • cache:1pSQlfpeod4J:www martiniglesias eu/buscador/mostrar-div-al-mover-scroll-jquery mostrar div al scrollear • caption a una imagen con jquery • jquery imagen y tÃtulo • titulo en imagenes jquery • jquery div transparente • galeria fotos jquery caption • como hacer un div transparente javascript • jquery image magnify aplicado a miniaturas • transparencia con jquery opacity • $(document) ready(function() { //move the image in pixel var move = 0; //zoom percentage 1 2 =120% var zoom = 1 0; • titulo transparentes en imagen jquery • imagenes transparentes jquery • html css galeria imagenes titulo transparente • jquery miniatura • transparencia js titulo opacity • letras transparentes html • galeria jquery titulo y descripcion • jquery captions in miniaturas • menu con miniaturas jquery • sombra transparente con jquery • jquery y titulos • caption href jquery scroll slider fade • jquery bordes transparentes div • mostrar titulo jquery imagen • jquery scroll transparente • CSS JQUERY TITULOS • jscrollpane mover pixel javascript • letras transparentes en jquery • el mejor Calendario de eventos Jquery php • personalizar mi blog utilizando jquery • galerias imagenes jquery stop mouseover • mover title de pagina con jquery •
acordeón actionscript ajax alert ampliar imágenes android antes y después as audio aumentar letra barra desplazamiento blur bordes redondeados botón derecho calcular distancia calendario chart chrome collapse columnas combobox contar caracteres contar followers contextual css cu3er códigos date-picker descargas desenfoque desplazamiento dhtml disminuir letra dominios editor enlaces externos error 404 estrellitas expander fade fecha file upload filtrar contenido flash font size formulario formularios fotografías fpdf frames galería gmail google google docs gratis headers htaccess html html5 iconos ie6 igualar columnas inyección cabeceras ipad iphone javascript jquery jquery ui json lavalamp librería librerías lightbox limitar caracteres links lista listas listbox mail injection maquetación marcos mensajes menu menú menú lateral miniaturas mootools mouseover mp3 multinivel mysql máscaras móvil navegadores no conflict notas adhesivas notificaciones oauth ofuscador ordenar organigrama pdf php phpmailer picker player playlist plugin png portfolio preview reproductor reproductor de música safari scroll scrollto select selector de color sistema de votación slider snippets spam star rating subir ficheros switch mode tablas tamaño texto target blank textarea thumbnail tooltip twitter usuarios activos validacion validación validate videos vtip wap webkit www wysiwyg youtube zoom

© 2012 Martin Iglesias - Todos los derechos reservados