JMiur [E]

Esta es una galería relativamente sencilla donde sólo se usa CSS y funcionará bastante bien en los navegadores modernos, incluyendo IE8 aunque con ciertas diferencias ya que cada uno de ellos tiene sus propias características y aplica las nuevas propiedades como se le da la gana.

El HTML es mínimo, usamos una lista donde colocamos dos imágenes, una con la clase mini contiene la miniatura que es la visible por defecto y otra, con la clase pic contiene la imagen a mostrar:
<div id="galeria">
<ul>
<li><img src="URL_miniatura1" class="mini" /><img src="URL_imagen1" class="pic"/></li>
<li><img src="URL_miniatura2" class="mini" /><img src="URL_imagen2" class="pic"/></li>
<li><img src="URL_miniatura3" class="mini" /><img src="URL_imagen3" class="pic"/></li>
.......
</ul>
</div>
Y ahora, el CSS que va antes de </head> y que deberíamos modificar para adaptarlo a nuestras necesidades:
<style>
#galeria { /* este es el div que contiene la galería */
background: #101921;
border: 10px solid #505961;
height: 300px;
position: relative;
width: 600px;
margin: 30px auto;
overflow: visible;
}
#galeria ul { /* la lista */
margin: 0;
padding: 0;
text-align: center;
}
#galeria ul li { /* cada item de la lista */
display: inline-table;
list-style: none;
padding: 10px;
vertical-align: middle;
}
#galeria ul li .pic { /* la imagen normal */
background-color: #000;
border: 2px solid #000;
left: 130px;
padding: 10px;
position: absolute;
top: 15px;
visibility:hidden;
-moz-box-shadow: 0 0 20px #ABC inset;
-webkit-box-shadow: 0 0 20px #ABC inset;
box-shadow: 0 0 20px #ABC inset;
}
#galeria ul li .mini:hover { /* efecto sobre las miniaturas */
cursor: pointer;
}
#galeria ul li:hover .pic { /* efecto sobre las imágenes */
visibility: visible;
}
</style>


REFERENCIAS:admixweb.com

27 comentarios:

Unknown  

Esa jirafa con su cría es una monería, quedó un versito ohhhh

Responder
Unknown  

De las más sencillas y prácticas que he visto en el último tiempo.. uso chrome y se vé bárbaro.

Responder
Gem@  

Una maravilla, y las imágenes tiene una resolución fantástica :)
Me la llevo :D

Responder
Anónimo  

Muy sencillo de implementar en el blog, pero tiene un pero, si tienes muchas fotos en la página te va a provocar un retardo considerable en la carga, ya que lo que hace es cargar la miniatura y la foto al mismo tiempo.
Estupendo por otro lado poder hacerlo todo con CSS y evitar cargar script.

Saludos.

Responder
Analía Alvado  

Cuando leí “otra galería de imágenes con CCS3”, automáticamente pensé: “otra noche que no me acuesto”. Como verás, tengo “un retardo considerable” en la carga emocional y mental, las 2, este último tiempo, colapsan con el cansancio que he acumulado. (Obviemos las frustraciones)

Me llevo esta también… GRACIAS por los tormentos ☻

¡¡Qué vuelva la alegría!!

Responder
Anónimo  

Por cierto, en la línea se te ha escapado un dedo y has puesto una "," al final. ;)

-webkit-box-shadow: 0 0 20px #ABC inset,

Responder
Gem@  

nokeado suele hacerlo de tarde en tarde para ver si estamos pendientes :)

Responder
JMiur  

Graciela: Poesía pura :D

Jared: Se ve bien en cualquier navegador, eso es lo bueno.

nokeado: Ninguna herramienta sirve para cualquier cosa; cada una tiene su uso. Muchas es una cantidad subjetiva. En todo caso, "muchas imágenes en una página" retardan al carga de cualquier sitio, con o sin galerias.

GARABATO: Lleve y que se divierta :D

Gem@: Toda suya y ... claro ;-)

Responder
La hormiguita  

Me gusto muchísimo.... y sencilla en serio, porque a veces lo que es sencillo , para usted....... no lo es mucho para mi :o ,voy a probarlo mañana que es feriado.... si Dios me lo permite :)
Muchas gracias

Responder
JMiur  

Esta es sencilla de verdad, La hormiguita :D

Responder
adriancybor  

Muy buena entrada!!! :D

Responder
HoracioNakama  

Hola... ya lo probé y anda de 10.

Te quería preguntar. Como hago para cambiar la posición de la imagen grande. O más arriba o más abajo.

Responder
JMiur  

La posisicóne stá definida por left y top dentro de esta parte:

#galeria ul li .pic { /* la imagen normal */
......
left: 130px;
top: 15px;
}

Responder
Max  

Jmiur desde hace mucho tiempo leo tu blog pero nunca te deje un comentario ,lei muchos de tus articulos y para terminar mi blog me faltaria solo una cosa que vengo probando desde hace mucho tiempo y no puedo hacerlo, mi blog es qtonterias.blogspot.com me gustaria saber como puedo hacer para listar los titulos de la entrada con las fotos que estan dentro de las mismas.

Un saludo Max!!!

Responder
JMiur  

Listar todos los títulos de ese modo te diría que es casi imposible. Listarlos sin miniaturas es complejo pero es posible. Lo más parecido que recuerdo es esta entrada.

Responder
Biastai  

Pues nadamas no me salio :(
no se si el problema este en que tanto el .js como el style los puse antes de /head primero puse el .js y luego el style...

Responder
Biastai  

Oops! me equivoque.. el comentario que hice hace un momento era para la entrada http://vagabundia.blogspot.com/2010/10/simplisimo-slideshow-sin-librerias.html
hasta en eso me equivoco =_=
jeje

Responder
JMiur  

Sea cual sea, si me muestras el ejemplo, me fijo a ver cuál es el error.

Responder
Michael Graber  

Holla fofo!Soy Taillard tu fã brasileira ,que tambien perde noches divertindo-me aqui em su blog e da amada Gem@.
Huahuhahuahua!
Ri muito do comentario do Garabato!Agora sei que no soy la unica!
Obrigadaaa!!!

Responder
JMiur  

Obrigado Michael :-D

Responder
Michael Graber  

Taillard:)
Soy Tica mi amor!
Huahuahuahua!

Responder
Ana Laura  

Muchas gracias, J. Me funcionó perfectamente y logré el efecto que deseaba. :)

Un saludo!

Responder
JMiur  

Perfecto, Ana :D

Responder
Marina  

Hola! En primer lugar, enhorabuena por el blog. Me está siendo muy útil ahora que tengo tiempo para adaptar el mío a mi gusto. Con respecto a esta galería, tengo una duda, al poner las imágenes, en lugar de salirme una al lado de otra en varias filas, me salen en una columna, es decir, una debajo de otra. He seguido los pasos tal y como indicas y no he cambiado ni una coma del código (Dios me libre! ;) )¿Qué puedo estar haciendo mal?
Un saludo y gracias!

Responder
JMiur  

Lo más probable es que el CSS sea inorrecto ¿Tienes un ejemplo que pueda verse online?

Responder
Unknown  

Que tal, en primera felicidades por tu blog, me a ayudado mucho en diferentes cosas... Mi duda es, si quiero que las imágenes estén posicionadas en una fila horizontal y que una este detrás de otra, claro esta que necesitaria un z-index, pero quiza tu me puedas ayudar con el codigo...

JMiur  

¿Una encima de la otra? Entonces deben posicionarse manera absoluta dentro de un contenedor que tenga establecida la propiedad position como relative y y usar top y left:

<div style="postion:relative;">
<img src="xxxx_1" style="position:absolute;top:0;left:0" />
<img src="xxxx_2" style="position:absolute;top:0;left:0" />
<img src="xxxx_3" style="position:absolute;top:0;left:0" />
</div>

la imagen 3 estara arriba y las otras debajo.

Responder

¿Quiere dejar un comentario?

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

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