jSquares

jSquares es un plugin de jQuery que aparece una imagen y una descripción superpuesta sobre la imagen.

Se pueden configurar varios parámetros como por ejemplo, tamaño de los subtítulos, la opacidad de las imágenes, la velocidad de reproducción aleatoria, etc

Funciona en IE6 +, FF 3 +, Safari 3 + y Opera 10.

Link blog: jSquares

Demo: http://boedesign.com/demos/jsquares/

Licencia: Licencia MIT, GPL

La solución es sencilla bajo mi punto de vista y es usando una pequeña hoja de estilos, no la voy a hacer tan complicada como la tengo yo pero el efecto es el mismo…

Así que, saltándome los pasos de que ya sabéis crear una tabla os pongo el estilo para que os salga algo como en la foto inicial…

tr:hover{
    background-color: #FFFFCC; /* amarillo */
}
tr td:hover{
    background-color: #FF9900; /* naranja */
}

Con esto conseguimos en amarillo iluminar toda la fila y en naranja iluminar la celda por donde pasamos el ratón.

Ya, ya se que no es lo mismo que la otra ilumina toda la columna y no es lo mismo, pero bueno me he buscado otros recursos para poder saber que significa en esa celda cuando te encuentras en medio del océano (osea en la mitad de los 500 registros) y no sabes si subir o bajar

Solo os digo que de 21seg de carga ha bajado a 15s. Lo se, parece un montón de segundos pero seguro que pronto conseguiré bajar el tiempo y con mas registros

Espero que os haya servido para algo y si tenéis alguna duda dejar vuestros comentarios.

Para resumir rapidamente su funcionamiento es ocultar una parte de la miniatura de la imagen ya redimensionada anteriormente y la mostramos en su totalidad cuando pasamos el raton por encima o mas conocido como el mouseover.

Aunque la gracia de esto ya no es solo que puede estrechar una imagen y si pasa el raton se hace grande, esta claro que es una de las opciones.. pero pensando en algunas utilidades mas.. nos podria servir para hacer imagenes cuadraditas que estan ahora tan de moda.

Para una web de contactos, galeria de imagenes, etc.. y no podemos utilizar el ImageMagic, como la inmensa mayoria utiliza las librerias GD para el tratamiento de imagenes, es una forma de redimensionar una imagen y como la redimension no es cuadrada (a no ser que la imagen original si lo fuese) si le quitamos la opcion de a:hover se nos abre un mundo nuevo en la redimension, esta claro que es un parche, pero quien no quiera calentarse la cabeza esto es una solucion rapida y efectiva a mi entender.

ul#thumbs a{
    display:block;
    float:left;
    width:100px;
    height:100px;
    line-height:100px;
    overflow:hidden;
    position:relative;
    z-index:1;
    }
ul#thumbs a img{
    float:left;
    position:absolute;
    top:-20px;
    left:-50px;
    }

Link: Create Resizing Thumbnails Using Overflow Property y aqui tambien os dejo una demo del sistema en cuestion

Alli encontrareis la pagina del creador en ingles con todo muy detallado Espero que os haya servido de ayuda!