Galeria de div, estilo Mondrian ampliables

Petterrr #1 Oct '12

Saludos a todos.

Tengo un amigo que le gustaria crear un boletin mensual estilo Mondrian, en donde cada celda seria una noticia, y dependiendo de si hay bastante información, que al pulsar en ella se ampliara un poco para leerla pero sin salir de la pagina.

En un principio se encargaria el de ir creando los boletines una vez que yo le haya enseñado el funcionamiento por lo que busco una galeria jquery que no sea muy dificil de enseñar para no tener que estar yo detras de el arreglandole la papeleta

Veis esto no, pues imaginad que pongo un texto, o foto en la celda azul, y que al clickar en ella se amplie para poder leer toda la información y al clickar fuera o en otra celda vuelva a su tamaño.

Alguna idea?

PiradoIV #2 Oct '12 Brongster

Con jQuery yo intentaría algo así:

1.- Haces click en uno de los mosaicos y atrapas el evento.
2.- Tomas las dimensiones y la posición del mosaico y generas una capa nueva con esos datos.
3.- Mediante animate(), agrandas lo máximo posible esta última capa y la posicionas en el centro.
4.- Crea una función para destruir la capa grande al pinchar tanto fuera de la capa, en la "X" de cerrar o la tecla ESC.

¡Saludos!

eXtreM3 #3 Oct '12

Muy interesante, lo que dice Pirado del animate puede estar chulo, pero lo veo muy enrevesado, teniendo en cuenta que puedes hacer clic en cualquier noticia...

Qué te parece lo siguiente:

Creas un div que ocupe todo el contenedor, con display none.
Al hacer clic en una noticia, muestras la capa oculta con algún fadeIn() y con load() cargas el contenido de la noticia.

El cierre de la ventana ya como mas te guste, bien con la tipica X en la esquina superior derecha, o haciendo clic fuera de la capa (cambias el fondo del body por un negro con opacidad 0.7 para que la noticia resalte cuando esté focus)

Merkury #4 Oct '12

Yo usaria .dialog() para que en cada noticia al hacer clic apareciese la noticia en un modal form maquetado con los botones de salir, next y prev y lo que dice pirado con un evento que al hacer clic fuera se cierre.

Luego jugando con los efectos simplemente para darle el aspecto chachi es suficiente.

Galeria de div, estilo Mondrian ampliables

Usuarios habituales

Tags