Galería de imágenes adaptable (RWD) con miniaturas, sólo con CSS | Oloblogger Lo de hoy será para construir una caja con imágenes que llevará unas miniaturas automáticas en el lateral. Las miniaturas servirán de "...

26 de noviembre de 2013

Galería de imágenes adaptable (RWD) con miniaturas, sólo con CSS

Lo de hoy será para construir una caja con imágenes que llevará unas miniaturas automáticas en el lateral. Las miniaturas servirán de "enlaces" para ir mostrando alternativamente a toda pantalla una sola de las imágenes principales. Vamos, lo que se viene llamando una galería pero en un mismo espacio.

Hace tiempo que quería desarrollar con CSS algún tipo de galería como esta que facilitara el mostrar varias imágenes en un espacio reducido y el otro día me puse a probar con Codepen hasta que logré algo que me pareció digno y sencillo. Por cierto que os recomiendo ese recurso porque resulta muy útil para ir probando cosas, quitar y poner reglas y ver el resultado inmediatamente según se cambian.

Esta galería tiene además la peculiaridad de que es totalmente adaptable a la ventana (RWD) por lo que su tamaño se ajusta a la misma. Además, las imágenes principales se visualizan bajando poco a poco, a modo de cortinilla, lo que le da un toquecillo simpático.

Pongo la demo lo primero por si no tenéis paciencia. ¡Hala! a mover el puntero y a reducir la ventana del navegador para probarla.




La parte HTML, lo que hay que insertar dónde queramos que aparezca la galería, es algo muy sencillo y además invariable. Sólo se trata de una caja contenedora y luego varios div vacíos con clase imagen, tantos como imágenes queramos mostrar.

Lo de invariable es porque con el sistema CSS que plantearé después, las imágenes irán como fondos (background) y por tanto, su dirección habrá que ponerla en el estilo en lugar de aquí que sería lo habitual.

<div class="galeria">
 <div class="imagen"></div>
 <div class="imagen"></div>
 <div class="imagen"></div>
 <div class="imagen"></div>
</div>


Y bien, ahora vamos a lo que hace la magia, el CSS. Realmente habrá que ponerlo todo seguido, pero por motivos didácticos lo veremos por partes.


En primer lugar está la caja contenedora, sin ningún misterio. Sólo un posicionamiento relativo para poder ubicar dónde queramos lo que llevará dentro. Lo demás es un centrado, una sombrita y poco más.

.galeria {
position: relative;
width: 90%; /* Ancho a ocupar por la galería sobre el total disponible */
overflow: hidden;
margin: 10px auto;
background-color: #000;
box-shadow: 1px 1px 6px #000;
}


A la galería le añadimos un fondo principal por defecto, que será el que se vea mientras no pulsamos (hover realmente) alguna de las miniaturas. Lo hacemos mediante un añadido con el pseudoelemento :before y lo colocamos justo encima con posicionamiento absoluto. Para que las imágenes principales tengan algo más de realce, esta la puse casi transparente (opacity: .1;).

En adelante marcaré en verde lo único que hay que cambiar, las direcciones de las imágenes. Esta primera como dije, es la que saldrá inicialmente y con un background-size: cover; hacemos que se extienda por todo el espacio disponible de la caja contenedora.

.galeria:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: url(https://lh4.googleusercontent.com/-3QNEIgX3Gv4/UCPyLTtnmHI/AAAAAAAAEDY/KGb0eEM9GZo/s720/fuerzas-naturaleza.jpg); /* Fondo por defecto */
-moz-background-size: cover;-webkit-background-size: cover;background-size: cover;
opacity: .1;
}


Si ponemos sólo lo anterior, de momento no veremos nada, ya que no tenemos ningún contenido que rellene la caja para darle alguna dimensión y por tanto esta será de tamaño cero, invisible para nosotros. Pero con lo siguiente ya comenzamos a ver cosas.

Esta será la clase que monte las miniaturas sobre ese fondo y aquí lo que podéis configurar es el ancho. En un principio yo las programé con el 15% del ancho total (algo menos de un sexto), pero lo imprescindible es que ese padding-bottom que es lo que define el alto de la miniatura, lleve idéntico porcentaje para que sean cuadradas.

.imagen {
position: relative;
width: 15%; /* Ancho de la miniatura sobre el ancho total de la galería */
padding-bottom: 15%; /* Idéntico al anterior para miniaturas cuadradas */
background-position: 50% 50%;
-moz-background-size: cover;-webkit-background-size: cover;background-size: cover;
cursor: pointer;
}


Con lo anterior ya sería visible el fondo por defecto y tenemos reservados unos espacios cuadrados a la izquierda de un 15% del ancho, pero vacíos. Y no es que este sea el orden más lógico, pero lo siguiente nos servirá para ir viendo ya cosillas.

Ahora es cuando comenzamos a poner las imágenes que conformarán nuestra galería usando :nth-of-type(x), que lo que hace es aplicar a la caja x con clase imagen sus correspondientes background. Así el 1 será para la primera, el 2 para la segunda, etc. Como las hicimos de un 15%, de momento nos quedarán como miniaturas. Una parte de lo que queríamos.

.imagen:nth-of-type(1) {
background-image: url(https://lh4.googleusercontent.com/-3QNEIgX3Gv4/UCPyLTtnmHI/AAAAAAAAEDY/KGb0eEM9GZo/s720/fuerzas-naturaleza.jpg);
}
.imagen:nth-of-type(2) {
background-image: url(https://lh5.googleusercontent.com/-KijskybjlCc/UCPyNCwVxPI/AAAAAAAAEDg/8AwgBhZyhG4/s800/fuerzas-naturaleza2.jpg);
}
.imagen:nth-of-type(3) {
background-image: url(https://lh5.googleusercontent.com/-uGIMoR677PM/UCPyOBjNWVI/AAAAAAAAEDo/XE73W5FQW-c/s800/fuerzas-naturaleza3.jpg);
}
.imagen:nth-of-type(4) {
background-image: url(https://lh5.googleusercontent.com/-nbNq900tVT4/UCPyQeZkP_I/AAAAAAAAEDw/WsBQhD2Da-o/s800/fuerzas-naturaleza4.jpg);
}


Bueno, pues ya tenemos un contenedor, una imagen grande por defecto y cuatro fondos que nos quedarán como miniaturas a la izquierda. Ahora viene dónde hacemos que esas miniaturas se repliquen convirtiéndose en imágenes grandes. Para ello añadimos encima de cada imagen otra caja con el mismo fondo que la de su elemento padre.

Esto lo hacemos de nuevo con :before, pero esta vez aplicándolo sobre la clase .imagen. El background-image de ese elemento superpuesto tendrá el valor inherit y así todos heredarán la imagen de su padre desde una sola regla.

.imagen:before {
content: "";
position: absolute;
top: -700%; /* ((Nºimágenes*2)-1)*100*/
left: 100%;
width: 566%; /* (10000/ancho_imagen)-100 */
height: 400%; /* Nºimagenes*100 */
background-image: inherit;
-moz-background-size: cover;-webkit-background-size: cover;background-size: cover;
-moz-transition: all .8s ;-webkit-transition: all .8s ;transition: all .8s ;
}

Y me tengo que detener algo más porque este trozo anterior es dónde está gran parte del secreto de esta galería para que sea adaptable. De arriba hacia abajo...

  • top: Cada imagen grande se posiciona sobre su correspondiente miniatura y el porcentaje va referido a lo que ocupa esta de alto, por eso, para que estén inicialmente ocultas las tenemos que subir tanto como imágenes haya, pero multiplicado por dos para que la última no se quede en la coordenada 0 y por tanto visible. El -1 es un ajuste para no subir más de la cuenta.
  • left: aquí simplemente nos llevamos la imagen grande un ancho (100%) hacia la derecha para salvar las miniaturas.
  • width: La imagen se muestra grande ampliando la miniatura (.imagen) un determinado porcentaje. Este lo averiguamos calculando qué parte sobre el total supone el ancho de la miniatura (.imagen, 15% en el ejempo) y luego viendo cuanto nos sobra para dividir. Matemáticamente esto sería (100-ancho_imagen)*(100/ancho_imagen) y simplificando, (10000/ancho_imagen)-100.
  • height: La altura de la imagen necesariamente tiene que ser el del total ocupado por las miniaturas, o lo que es lo mismo la cantidad de ellas que haya multiplicado por 100.

El background-image con inherit ya lo he explicado y el transition es para que la imagen grande aparezca suavemente al pasar el puntero por encima (hover).


Y por fin el efecto para el hover. Una vez que las imágenes están escondidas por arriba, ya sólo hace falta bajarlas modificando su top un determinado porcentaje. Su valor será negativo y coincidirá con el número de orden que tengan menos 1, multiplicado por cien.

.imagen:hover:nth-of-type(1):before {
top: 0%; /* (Nº.nth-1)*(-100) */
}
.imagen:hover:nth-of-type(2):before {
top: -100%; /* (Nº.nth-1)*(-100) */
}
.imagen:hover:nth-of-type(3):before {
top: -200%; /* (Nº.nth-1)*(-100) */
}
.imagen:hover:nth-of-type(4):before {
top: -300%; /* (Nº.nth-1)*(-100) */
}


Para los perezosos que prefieren todo el CSS junto para copiarlo del tirón, en este fichero lo tenéis.


Con poco podemos añadir alguna regla más al hover sobre .imagen:before y obtener algunos efectos curiosos.

Por ejemplo en otra demo añadí un simple transform: scale(.9); y quedó esto que podéis ver en el siguiente enlace. Ahí también podréis ver cómo se ajustan los valores de las reglas para una galería con seis imágenes, aunque espero que con los comentarios que puse en el CSS sea suficiente para que podáis montarla con la cantidad de imágenes que queráis.


Y por cierto... Que a nadie se le ocurra pedir la variante con miniaturas en horizontal, que eso complica bastante el asunto y si lo hago no va a ser en el corto plazo ;)

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

53 comentarios :

  1. Lástima no tener ni idea de todo esto, para poder hacer algo así de bonito en mi blog

    ResponderEliminar
    Respuestas
    1. Es cuestión de que te pongas. El HTML puede ir en un gadget (desde Escritorio > Diseño) tipo HTML/JavaScript, moviéndolo después encima de las entradas (por ejemplo). Y el CSS lo puedes poner en la plantilla, entre las etiquetas SKIN, editándola o bien desde el Diseñador de plantillas > Avanzado > CSS, anadiéndolo directamente.

      Para empezar: http://www.oloblogger.com/2008/05/blogger-para-torpes-html-y-css.html

      Eliminar
    2. muy buenas, un aporte impresionante. necesitaba consultarte una duda.
      es aqui:
      .imagen:before {
      width: 566%; /* (10000/ancho_imagen)-100 */
      }
      la imagen que usaste tenia 800px como has llegado al 566%?
      se me despistan los calculos de esto :S
      seguro que es una tonteria, pero no doy acertado :P
      graciñas de antemano

      Eliminar
    3. Yo también me despisté bastante, no creas, y además se me olvidó explicar ese detalle. No me acuerdo exactamente de las medidas originales, pero realmente el 66% es la proporción alto/ancho. Me parece que salía de dividir 500 por 800px. No fui capaz de sacar una regla general para todos los formatos (proporciones).

      Pero en cualquier caso, en este ejemplo "ancho_imagen" se refiere al porcentaje que le puse al selector .imagen. En el ejemplo un 15(%).

      Eliminar
  2. Oloman, lo podrías explicar con las imágenes en horizontal ?...jaja.

    ResponderEliminar
  3. Excelente, aunque creo que demasiado bien explicado, y fue ahí donde me perdí. Haha

    Mas en concreto, los CSS van el aplantilla y la galeria puede ir en la entradas o como un gadget HTML, cierto?

    Es ahi donde me perdí, ya no supe cuales de los códigos corresponden al CSS y cuales al HTML. :S

    ResponderEliminar
    Respuestas
    1. El HTML es sólo el primer trozo. El CSS es todo lo demás. Este último lo puse resumido y todo junto en un solo link casi al final de la entrada.

      Eliminar
  4. Hola Oloman, me he pasado por aquí para seguir aprendiendo cosas con tus publicaciones, y vaya que las hay...

    Hoy te contacto para saber si puedes hacer alguna entrada explicando algo sobre Cloud-zoom (si es que lo sabes claro). Yo tengo instalado en mi blog con una versión vieja y he visto por ahí que hay versiones nuevas que hacen maravillas ampliando las imágenes cuando pasas con el cursor.

    bueno, nada más
    Un abrazo

    ResponderEliminar
    Respuestas
    1. No conocía ese plugin, pero aunque está muy majo, en su página oficial ya explican todos los detalles... más de los que podría poner yo en una entrada.

      Eliminar
    2. Ohhh que lástima entonces!

      es que como no lo doy hecho andar por eso te pedía tus conocimientos.
      Bueno gracias igualmente.

      Eliminar
  5. muy bueno ! cómo hago si quiero añadir más fotos? concretamente quiero poner 8, he seguido la secuencia pensando que si copio y pego los códigos donde van las imágenes y lo último (.imagen:hover:nth-of-type(1):before {
    top: 0%; /* (Nº.nth-1)*(-100) */
    })

    funcionaría, pero no.

    ResponderEliminar
  6. Hola. En primer lugar tienes que añadir en la parte HTML (al principio de este post), cuatro DIV más con las imágenes. Luego tienes que añdir otras cuatro reglas CSS en los trozos de código que ves que llevan el nth-of-type(x), con el correspondiente número en lugar de x y por último, en esas mismas líneas añadidas, poner los valores que correspondan según las fórmulas de los comentarios.
    Al final de la entrada puedes ver un enlace con un ejemplo a una galería con 6 imágenes.

    ResponderEliminar
  7. me gustaría cambiar las imágenes en el css pero no puedo vincularlas con mi carpeta ( la carpeta de mi ordenador dondee tengo las imágenes)no se como hacerlo y me estoy desesperando !!!

    ResponderEliminar
  8. Hola estoy intentando cambiar las imágenes que tienes vinculadas con url en el y vincularlas con la imágenes que tengo en mi pc pero no se hacerlo y estoy empezando a deseperarme!!!!!!!

    ResponderEliminar
    Respuestas
    1. Hola Sandra. NO puedes pasar directamente las imágenes desde tu ordenador a una página web.
      En una web (o blog) lo que necesitas es una dirección (por ejemplo, https://lh4.googleusercontent.com/-3QNEIgX3Gv4/UCPyLTtnmHI/AAAAAAAAEDY/KGb0eEM9GZo/s720/fuerzas-naturaleza.jpg dónde se encuentra alojada la imagen.
      Alojarla es pasarla de tu ordenador a un servicio de Internet que precisamente la guarda.

      Así que la tienes que pasar de tu ordenador a un alojamiento de imágenes y luego obtener la dirección para ponerla en el código.

      Si tienes un blog Blogger puedes usar Picasa o Google+ para guardar tus imágenes allí.

      Eliminar
  9. hola, buenas; quisiera hacer una pequeña pregunta. quisiera poner esta galeria para un trabajo de clase de css, pero además quisiera que al pulsar sobre la miniatura, me llevara hacia otro archivo html. ¿sería posible? digame como puedo hacerlo, por favor. muchas gracias! :)

    ResponderEliminar
    Respuestas
    1. Es una chapuza, pero por ir rápido, prueba a cambiar los
      <div class="imagen"></div>
      por
      <div class="imagen"><a href="http://www.oloblogger.com"></a></div>
      y luego añade en tu css esto:
      .imagen a {
      width: 100%;
      padding-bottom: 100%;
      position: absolute;
      }

      Eliminar
    2. Perdón. Dónde pone http://www.oloblogger.com, evidentemente irá el enlace que corresponda :)

      Eliminar
  10. me gustó mucho, gracias por compartirlo

    ResponderEliminar
  11. Hola buenas, me ha parecido muy útil este tutorial. Pero tengo un problema y es que al introducir imágenes propias no quedan bien ya que son de diferente tamaño entonces al seguir la regla de "(10000/ancho_imagen)-100" algunas salen pixeladas y cortadas. Gracias :)

    ResponderEliminar
    Respuestas
    1. Es que si no son iguales o al menos similares en cuanto a proporción (las del ejemplo no son iguales), es normal que tengas problemas de ese tipo. Si hay un marco dónde mostrar algo y ese algo no lo cubre, por narices se quedarán huecos o al contrario, saldrán cortadas.

      Eliminar
  12. Hola me gusta el resultado, se ve fácil de seguir. Pero me gustaría saber si hay alguna manera que en lugar de que las despliegue a la derecha las deje ver en una ventana flotante con opción de cerrar. Sera eso muy complicado?

    ResponderEliminar
    Respuestas
    1. Complicado no, Eduardo, pero la forma de hacerlo no tiene nada que ver con este sistema. Son dos cosas diferentes y esa que dices no la he desarrollado nunca.

      Eliminar
  13. Hola Oloman, estoy acá, instalando esta galería, y estoy al borde de caer en la desesperación. podrías ver lo que me pasó por favor, fue algo independiente a la galería. La instalé, le hice los arreglos que quería y después, tratando de quitar la barra de desplazamiento, algo pasó que ya no se ven las imágenes ni las miniaturas. Volví atrás, quité la condición de ocultar la barra pero todo sigue igual!! s.o.s
    http://lapuntaproducciones.blogspot.com/

    ResponderEliminar
    Respuestas
    1. lo encontré lo encontré!!! al error

      Eliminar
    2. Estupendo, porque si llegas a tener que esperar a que yo contestara XD

      Eliminar
    3. jjajjaj pero ahora sí necesito ayuda Oloman!!!!!! te cuento: instalé la galería, le puse solo 2 imágenes por ahora, pero estaba bien, luego pensé que de acuerdo a la imagen que le había puesto de fondo por defecto, quedaba mejor diseñado si empezada a agregar imágenes desde el segundo lugar--> .imagen:nth-of-type(2).
      Entonces se empezó a montar la imagen 3, como está ahora. pensé que la imagen 1 debía estar ocupada, así que hice una solo con el color de fondo para la imagen 1, pero todo sigue igual. Pensé que a lo mejor era la última imagen la que causaba eso, así que agregué al final ma misma imagen de fondo que puse en la 1 (sólo color) pero sigue pasando lo mismo. Se entiende Oloman? podés ayudarme S.O.S.

      Eliminar
    4. Es una lata tener que revisar un código para buscar un fallo que a veces es muy pequeño. Mejor hazlo todo desde el principio, pero sobre todo, no cambies del gadget original mas que las direcciones de la imagen. Una vez te funcione puedes probar a ajustar los parámetros que en el CSS puse con comentarios para que funcione con sólo dos imágenes si es eso lo que quieres.

      Se me ocurre que lo mejor es que accedas al codepen que enlazo y que sobre él realices todos los cambios que quieras. Ahí es más fácil hacer pruebas y ver el resultado sobre la marcha y una vez que funcione todo, pues ya copias a tu blog.

      Eliminar
    5. Gracias Oloman, no había visto antes que el codepen podía editarse. Voy a intentar. saludos

      Eliminar
    6. Gracias mil Oloman, no había notado que agregué imágenes pero no cambié los parámetros. Quedó listo!!

      Eliminar
  14. Hola Oloman. Este blog me parece uno de los mejores explicando las cosas... Pero tengo una cuestion que me ha sido imposible de resover. Tengo un blog y lo que quiero es realizar una cuadricula de imagenes y que pinchando en cada una de ellas me derive a un enlace, pero sin mostrar una imagen como referencia y el resto en miniatura. No se si me prodrias echar una mano con esto. Mi blog es http://miscreaciones-garyuso.blogspot.com.es
    Gracias de antemano.

    ResponderEliminar
  15. Eso primero que has escrito lo voy a guardar en una captura, porque algunos se quejan de lo contrario :)

    Pero dicho esto, no entiendo del todo la idea. Cuadrícula de imágenes sí y que cuando pinches en una de ellas te lleve ¿a dónde? ¿a otra página? Es que no sé qué quieres decir con eso de la "imagen de referencia".

    Imaginando cosas ¿quizás sólo quieres que una imagen funcione como enlace? (Ver tercer trozo de código)

    ResponderEliminar
  16. Oloman lo he probado y me funciona en todos los navegadores menos en IE. Le e añadido el prefijo -ms-transition en la clase imagen:before pero como te digo no me funciona. Porque puede ser?

    ResponderEliminar
  17. Pues porque IE no admite transiciones CSS normales y hay que usar una especie de filtros que tiene propios.

    Bueno, no recuerdo exactamente pero creo que a partir de la versión 10 ya funcionan, así que debe ser tu navegador.

    La prueba sería viendo esta entrada de este blog en tu IE. Si no va el slider de demostración que puse al principio entonces es tu navegador. Si lo ves funcionando confirmamos que es una versión moderna y que lo que tienes es algún error en tu código.

    ResponderEliminar
  18. gran aporte oloman ! oye quisiera saber como poner esta galeria en cada una de mis entradas del blog ? seria increible tener uno para presentar mis imagenes saludos !

    ResponderEliminar
    Respuestas
    1. Ese comentario tuyo me frustra porque este artículo precisamente intenta explicar cómo poner esta galería en cada una de las entradas de un blog...

      Eliminar
  19. Hola eso se ve genial y lo quiero en mi blog.
    pero el problema es que no entendi nada jajaja me podrias esplicar como o donde poner lo de CCS es que la verdad no entendi XD

    ResponderEliminar
    Respuestas
    1. Ramses, eso es básico. Si no sabes dónde va el CSS lo tienes mal para modificar nada.

      Puede ir en varios sitios, pero el mejor es en la plantilla. Para eso la editas, buscas dos etiquetas que aparecen como SKIN con otros símbolos añadidos y entre ambas, puede ir dónde quieres. Mi recomendación es que lo que añadas sea siempre justo antes de la segunda, que es la de cierre.
      Más info

      Eliminar
  20. Hola Oleman,gracias por estas explicaciones tan sencillas que das.Estuve haciendo la galeria y todo perfecto, lo unico es que mis imagenes grandes no salen completas,sera que tengo redimensionar mis imagenes en un editor? disculpa soy novato en esto.Gracias

    ResponderEliminar
  21. Hola Oleman, ahora hice otro igual debajo del que hice al principio, pero el de abajo ,as fotos salen pero no hacen la transicion, la de arriba si pero el debajo no.
    En html hice otro div le di las propiedaes iguales al del primero pero no me salen la fotos ya en la galeria osea las grandes las que van al derecho..ayuda por fa gracias

    ResponderEliminar
    Respuestas
    1. Hola Jaimie
      Este código no está preparado para poner dos galerías en la misma página, pues la segunda saldría con las mismas imágenes que la primera.

      Para poder lograr que dos al mismo tiempo funcionen bien, tendrías que reproducir todo el código totalmente, pero además cambiando todos los nombres de selectores de la segunda.

      Eliminar
  22. Hola Oloman estoy a un minimo de volverme loco jajja,ya todo esta bien pero en mi ipad no funciona la transition y le coloque los prefijos...Gracias..no se que pasa?

    ResponderEliminar
  23. Soy novato en esto pero como se le dio la propiedad de cursor , la transicion de las fotos en un cell, no se harian , lo mismo en un ipad..pienso..nose..Gracias de antemano

    ResponderEliminar
    Respuestas
    1. Hola Jaimie. Acabo de probar en un iPad y funciona. Las fotos se "cargan" con :hover y mientras no lleven enlace, deberían funcionar en dispositivos táctiles.

      Eliminar
  24. ok ...lo intentare nuevamente, en algo falle...esto lo que me gusta del desarrollo web..prueba y error..Gracias

    ResponderEliminar
  25. Hola
    Sobre: todo el CSS junto para copiarlo del tirón, en este fichero lo tenéis.
    Me temo que no funciona el enlace.
    Es posible resubirlo?
    Saludos

    ResponderEliminar
    Respuestas
    1. No, no funciona. Me quedé sin ancho de banda en DropBox. De todas formas es sólo cuestión de ir copiando y pegando trozo a trozo y ponerlo todo junto.

      Por si te interesa, hace poco publiqué otra manera muy parecida de hacer esto mismo.

      Eliminar
  26. Hola! Perdona como podria poner las miniaturas en dos columnas para que no se me haga tan largo al poner más de 5 en una sola?

    ResponderEliminar
    Respuestas
    1. Con este sistema difícilmente Width-Outway. Tendrás que buscar otro si tienes muchas imágenes para poner. Quizás te podría valer el que enlacé en el comentario 25.1

      Eliminar