JMiur [E]

En CSSplay nos muestran una técnica bastante particular para generar una galería de imágenes. La llaman Sliding Photograph Galleries y nos enseñan dos modelos, uno vertical y otro horizontal.

Más allá de gustos personales, es muy interesante ver como utilizan las propiedades CSS de manera sencilla, sacándole el máximo provecho.

Todo lo que necesitamos es crear una lista (UL) a la que le colocamos un nombre específico (id="gallery"). Dentro de esa lista, cada item contendrá un enlace con una imagen:
<ul id="gallery">
<li><a href="#"><img src="URL_imagen1" /></a></li>
<li><a href="#"><img src="URL_imagen2" /></a></li>
<li><a href="#"><img src="URL_imagen3" /></a></li>
<li><a href="#"><img src="URL_imagen4" /></a></li>
<li><a href="#"><img src="URL_imagen5" /></a></li>
</ul>
Mediante CSS, las imágenes de la lista se mostrarán "comprimidas" y, cuando coloquemos el cursor encima, se ampliarán.


Crear esto, sólo requiere algunas definiciones y un poco de aritmética. Supongamos que vamos a poner 5 imágenes de 480x272 pixeles y que las mostraremos, inicialmente, reducidas a 50x272. El bloque contendrá las cinco imágenes. Una se verá normal y las otras cuatro reducidas así que necesitamos que la altura del bloque sea: 272 + 4 * 50 = 472
<style>
#gallery {
height: 472px; /* la altura del bloque */
list-style-type:none;
margin:0 auto;
overflow:hidden;
padding: 0;
width: 480px; /* el ancho del bloque es el ancho de la imagen */
}
#gallery li {
float: left;
padding: 0;
}
#gallery li a {
display: block;
float: left;
height: 50px; /* la altura de la imagen comprimida */
text-decoration:none;
width: 480px; /* el ancho de la imagen normal */
}
#gallery li a img {
height: 50px; /* la altura de la imagen comprimida */
width: 480px; /* el ancho de la imagen normal */
}
#gallery li a:hover {
height: 272px; /* la altura de la imagen no-comprimida */
}
#gallery li a:hover img {
height: 272px; /* la altura de la imagen no-comprimida */
}
</style>
Lo mismo ocurre si queremos hacerlo en el otro sentido. Usamos el mismo código HTML y otro ID para no mezclar las cosas, lo llamamos galleryh y calculamos otra vez.

Pondremos las misma cinco imágenes de 480x272 y las reduciremos a 30 pixeles así que el ancho necesario para contener todo será: 480 + 4 * 30 = 600
<style>
#galleryh {
height: 272px; /* la altura del bloque es la altura de la imagen */
list-style-type: none;
margin: 0 auto;
overflow: hidden;
padding: 0;
width: 600px; /* el ancho del bloque */
}
#galleryh li {
float: left;
padding: 0;
}
#galleryh li a {
display: block;
float: left;
height: 272px; /* el alto de la imagen normal */
width: 30px; /* el ancho de la imagen comprimida */
}
#galleryh li a img {
height: 272px;
width: 30px; /* el ancho de la imagen comprimida */
}
#galleryh li a:hover {
width: 480px; /* el ancho de la imagen normal */
}
#galleryh li a:hover img {
width: 480px; /* el ancho de la imagen normal */
}
</style>

23 comentarios:

Kenneth Jack  

Curioso truco...Anotada...la pondre en practica en el de prueba...y lo bueno es que no hay descargar archivos...luego muestro los resultados...Saludos....

Responder
Quique  

vaya menu mas espectacular me estoy imaginando!!! gracias Jmuir!

Responder
Graciela de Palomas  

:P me uno a Kenneth no hay que bajar archivos, no he aprendido aún JM...precioso, magnífico, te apareces cada día con un juego nuevo...besitos!!!

Responder
ZonZo  

Me rindo: no consigo funcionar ni el protoflow ni el lightwindow!!!!:((:$

He alojado los archivos js, pero no lo consigo con los css ¿alguna sugerencia de sitios para alojar css?

---------ya se ha convertido en un reto personal!!!!

Responder
JMiur  

Este sólo es un ejemplo de cosas que podrían hacerse, es una idea interesante :D

ZonZo: Colócalo en la plantilla directamente; es lo más sencillo. Cuando necesito usar archivos CSS uso SkyDrive.

Responder
Corporative Magazine  

esta nitido ese css lo voy a probar

Responder
Francisco Bórquez  

Hola JMiur, quiero darte este premio

http://premiomiblogfavorito.blogspot.com/2009/03/haz-recibo-el-premio-mi-blog-favorito.html

Responder
Alba  

Interesante , jajaja un poquito complicado para una novata ... Las imágenes espectaculares. Jmiur , una pregunta, ¿como hago para agregar el gadget que dice translate this page ? me gustaría colocarlo para francés e inglés , saludos.

Responder
JMiur  

Gracias, Francisc, es un honor :$

Alba:
Hay dos posts con distintas posibilidades para traducir páginas. Este y este. No sé exactamente cuál quieres colocar. Incluso, en la misma plantilla, en agregar elementos, hay gadgets que también pueden utilizarse.

Responder
MALINA  

Jmiur, como hacer para que no se muestre el puntito que me aparece publicado en la ul?
Y otra cosa, como puedo poner el css en la misma entrada y no en la plantilla?
http://conectablog.blogspot.com/2009/03/una-diferente-manera-de-mostrar.html

Responder
JMiur  

Malina:
El CSS en un post puedes ponerlo de dos formas.

Usando etiquetas <style> y </style> como en la plantilla perocon una condición, TODO debe estar en una sola línea.

La otra forma es usar un archivo externo, en ese caso, la etiqueta es esta:

<style type="text/css">@import url("ELARCHIVOCSS");</style>

Lo del puntito lo solucionas fácil, fíjate que tienes esto:

#gallery li {
float:left;
padding:0;
list-style-type: none;
}

Agrega esa propeidad en negrita para que la lista no tenga el bullet ese que es el que se ve por defecto en cualquier lista.

Responder
MALINA  

todo genial, pero tengo aun dudas con como incluir el css en el artilugio.
Copio tal cual el css que cogi de aqui y lo pongo igual pero todo seguido? o tengo que quitar las llaves? o no se...
me dices?

Responder
MALINA  

ah y lo del archivo externo (supongo que ya me sirve para otros css que quiera implantar) como seria el archivo? un simple html que incluya ese css? pero tengo que incluir algo más? o lo copio en un txt, guardo como html y subo a un espacio?

Responder
JMiur  

El archivo lo creas con el block de notas y lo guardas pero, con extension CSS.

El contenido son las propiedades, no lleva etiquetas. Por ejemplo, podría tener este contenido y nada más:

p {
color: #FFF;
}


Eso solo. Es importante que NO contenga etiquetas.

En un elemento HTML que agregas, el CSS se coloca de dos formas. O bien colocas etiquetas:

<style>
p {
color: #FFF;
}
</style>


o lo cargas desde el archivo:

<style type="text/css">
@import url("ELARCHIVO.CSS");
</style>


La llaves no se quitan y la regla de escribir todo en una sola linea es en los posts, en los elementos que agregas en la sidebar y en la plantilla misma, eso no es necesario. Eso es así porque el editor de Blogger crea saltos de línea (etiquetas BR) automáticas.

Responder
MALINA  

creo que lo he pillado todo, probaré todas las maneras para aprender forever. Hasta ahora no me puse a entender como funciona lo del css, siempre dejo mis cosas para el final, con lo que me gusta aprender!

Gracias JMiur por toda tu ayuda.

Responder
JMiur  

Suerte Malina :D

Responder
MALINA  

espero que lo de suerte no sea porque la necesite :P jajaja

Responder
Isaac Chavero  

Muy bueno y sencill, pero;

¿habría alguna forma de que una imagen se mantuviera siempre desplegada? Si siempre tuvieramos una imagen completa, sería más atractivo visualmente y al entrar en el blog veriamos esa imagen y no un conjunto de imagenes comprimidas.

Responder
JMiur  

Tendrías que probar aunque en ese caso, lo razonable sería usar el esquema que muestran en CSSplay y poner esa primera imagen como fondo.

Responder
Σ=o) Pau  

Quería publicar unas fotos de manera especial ya que eran de moda gatuna jeje y con esta galería mi post resultó perrrrrrrfecta!!!!!!!!! :) gracias, gracias, gracias J prrrrrrrrrr ;)

besos ronroneados en mi abrazo ^_^

Responder
JMiur  

Que bien :D Me alegra que te fuera útil :D

Responder
Grisel Nakoul  

Hola quisiera saber como hacer este tipo de menú desplegable, como el de la pagina que te mando aqui http://www.avendanodesign.com/index.html

JMiur  

Supongo que se trata de este: http://tympanus.net/codrops/2010/07/16/slide-down-box-menu/

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR