Si han pensado en mostrar unas pocas líneas de texto sobre una imagen en sus sitios, pero no quieren renunciar al diseño actual, crear una imagen rica en información ha de ser una muy buena solución. Lo que vamos a tratar de lograr, es tener una imagen a tamaño completo donde esconderemos información adicional. Cuando el usuario se desplace sobre la imagen vamos a animar / modificar su tamaño para ocupar el resto del espacio con una imagen miniatura, titulo y descripción, además podrán volver al estado anterior con sólo mover el cursor fuera del panel de la imagen. La idea se basa en jQuery’s y sus funciones .hover() y .animate().
Ver Demo - Descarga - Mas info Zoom-Info
{
$('.galleryImage').hover(
function()
{
$(this).find('img').animate(
{ width:100,
marginTop:10,
marginLeft:10
}, 500);
},
function()
{
$(this).find('img').animate(
{width:325,
marginTop:0,
marginLeft:0
},300);
});
});
Css
{
width: 1024px;
}
.galleryImage {
background-color:black;
width:325px;
height:260px;
overflow:hidden;
margin:5px;
float:left;
}
.info{
margin-left:10px;
font-family:arial;
padding:3px;
}
.info h2{
color:gray;
}
.info p {
color:white
}
.clear {
clear:both;
margin-top:10px;
}
Loading ...
A&D
04-05-2010
Permalink
Me encanta gracias por el tip!
Webstandard-Blog
04-05-2010
Permalink
Graciàs Nikko por este solución, pero porque no usas una "dl" (definition-list) con dt (para las fotografías) i dd ( para h2 i p )? It's a little bit more semantic ;o)
Flenning
04-05-2010
Permalink
Muchas gracias
de la red – 5/05/2010 « Tecnologías y su contexto
04-05-2010
Permalink
[...] Zoom-Info – Imágenes ricas en información Si han pensado en mostrar unas pocas líneas de texto sobre una imagen en sus sitios, pero no quieren renunciar al diseño actual, crear una imagen rica en información ha de ser una muy buena solución. [...]
Zoom-Info – Muestra información en imágenes con animación gracias a jQuery - colorate
04-05-2010
Permalink
[...] Xyberneticos Compártelo Posts RelacionadosbxGallery – Plugn jQuery para generar galerias de imágenes [...]
Coqe
04-05-2010
Permalink
WOW!, excelente, gracias!
Alianza Lima
04-05-2010
Permalink
Creo que es muy buena esta aplicacion, y realmente creo que nos ayudará en el futuro.
Alianza Lima
04-05-2010
Permalink
muy bueno.....
cesar
04-05-2010
Permalink
Muy bueno el aporte,pero no logro centrar la galeria para safari.
alguna idea de como hacerlo
graficas en cordoba
04-05-2010
Permalink
gracias, muchisimas gracias por la informacion brindada!
SeGo
04-05-2010
Permalink
Muy buena solución pero, ¿se te ocurre alguna forma de que se pueda ver el contenido de la info si el usuario de la web desactiva el javascript?
Kostya
04-05-2010
Permalink
Добрый день! jose@tehnon.ru" rel="nofollow">......
с ув....
Konstantin
04-05-2010
Permalink
Добрый вечер! mason@sportbul.ru" rel="nofollow">......
С уважением,...
Ismael
04-05-2010
Permalink
¿se pueden colocar link dentro de la información de este script?