Galería CSS de imágenes con miniaturas

Esto no es un slider o visor automático de esos que tan de moda están últimamente. Se trata de algo más sencillo pero que nos permite mostrar igualmente una serie de imágenes dentro del mismo espacio.

Creo que es especialmente útil para blogs que muestran con frecuencia series de imágenes en sus entradas, pero también podría servir a aquellos que puntualmente necesitan un gadget de este tipo. Además, a las imágenes se les puede incorporar unos textos e incluso un enlace sin ninguna complicación.

Al igual que vimos en una entrada anterior, en la parte superior del bloque aparecerán unas miniaturas y pasando sobre ellas se verán agrandadas en la parte inferior. La diferencia es que en aquella usábamos clic como medio para mostrar la imagen completa y JavaScript como soporte. En esta usaremos hover y sólo CSS.

El resultado será el que sigue:

La idea la vi en Design Shack, aunque me he permitido realizar bastantes modificaciones. La principal está en las imágenes a utilizar, ya que aprovechando las particularidades del almacenaje de imágenes en Blogger (Picasa), en lugar de crear una miniatura a partir de la imagen original, simplemente he utilizado la misma pero con el sufijo -c.

Esto nos permite obtener precisamente una porción cuadrada de la imagen principal sin necesidad de tener que editar y luego alojar un segundo fichero. Lo veremos en la parte HTML porque ahora comenzamos con el estilo.

En esa parte (estilo, CSS, entre las etiquetas SKIN) tendremos que insertar este código:

/* Contenedor general del visor */
.contenedorvisor {
position: relative;
width: 600px;
height: 560px;
margin: 0 auto;
text-align:center;
overflow: hidden;
}
.contenedorvisor a {
display: inline;
text-decoration: none;
}
/* Estilo miniaturas */
.miniatura {
width: 18%; /* 100/nºimágenes, 5 en el ejemplo */
margin:1px;
border: 3px solid black;
opacity: 1;
}
/* Estilo imagen principal */
.grande {
width:100%;
position: absolute;
top: 800px; /* Valor mayor que alto contenedor para ocultar todas las imágenes */
margin:0 auto;
text-align: center;
display: block;
-webkit-transition: top 1s ease;
-moz-transition: top 1s ease;
-o-transition: top 1s ease;
-ms-transition: top 1s ease;
transition: top 1s ease;
}
/* Relleno inicial del espacio para imagen principal */
.muestra {
opacity: .3;
width: 200%;
top: 170px;
}
/* Marcamos con un borde la miniatura seleccionada */
a:hover .miniatura {
border: 3px solid grey;
opacity: .5;
}
/* Movemos con transición la imagen seleccionada a la zona visible */
a:hover .grande {
top: 170px;
-webkit-transition: top 1s ease;
-moz-transition: top 1s ease;
-o-transition: top 1s ease;
-ms-transition: top 1s ease;
transition: top 1s ease;
z-index:3;
}

Como veis el sistema es bastante sencillo:

• Se reserva espacio para el visor y las imágenes originales (grande) se desplazan fuera de él mediante un posicionamiento absoluto y un top mayor que el disponible.
• El overflow: hidden hará que estas no se vean hasta que se haga hover sobre el enlace, momento en el que el top se modifica a un valor más pequeño para que quede dentro del espacio reservado para el visor.
• Las miniaturas que realmente son una segunda imagen quedan todo el rato arriba de manera estática y sólo son alteradas un poco en cuanto a estilo para distinguir la activa, cuando hacemos hover.
• Ambas imágenes se insertarán dentro de un mismo enlace para que miniatura y original estén "conectadas", de manera que al pasar el puntero por una se modifique automáticamente la otra. En este ejemplo el enlace lo hemos dejado vacío (javascript:void(0);)pero se puede utilizar si lo necesitáis.

El HTML, como he anticipado, consiste en enlaces sucesivos con dos imágenes interiores; por un lado la más grande y por otro la miniatura. Y todo ello dentro de un contenedor general. Al final se añade un enlace-imagen adicional para rellenar el fondo y que no se vea en blanco cuando no pinchamos ninguna miniatura:

<div class="contenedorvisor">

<a href="javascript:void(0);">
<img class="miniatura" src="URL_IMAGEN_MIN1" />
<img class="grande" src="URL_IMAGEN_ORIG1" />
</a>
<a href="javascript:void(0);">
<img class="miniatura" src="URL_IMAGEN_MIN2" />
<img class="grande" src="URL_IMAGEN_ORIG2" />
</a>
<a href="javascript:void(0);">
<img class="miniatura" src="URL_IMAGEN_MIN3" />
<img class="grande" src="URL_IMAGEN_ORIG3" />
</a>
<a href="javascript:void(0);">
<img class="miniatura" src="URL_IMAGEN_MIN4" />
<img class="grande" src="URL_IMAGEN_ORIG4" />
</a>
<a href="javascript:void(0);">
<img class="miniatura" src="URL_IMAGEN_MIN5" />
<img class="grande" src="URL_IMAGEN_ORIG5" />
</a>

<a href="javascript:void(0);">
<img class="grande muestra" src="URL_IMAGEN_ORIG1" />
</a>

</div>

El truquillo para Blogger sería utilizar la misma dirección en ambos casos pero con un pequeño cambio que nos facilitará la porción cuadrada que nos servirá de miniatura.

De esta manera, siendo la dirección para la imagen original (URL_IMAGEN_ORIGX)...

https://lh4.googleusercontent.com/AAAAAAAACiw/X6gtnDtBrmY/s800/Fish.jpg

...tendríamos que añadirle un -c al subdirectorio que representa el tamaño de la anterior para obtener la dirección de la miniatura (URL_IMAGEN_MINX):

https://lh4.googleusercontent.com/AAAAAAAACiw/X6gtnDtBrmY/s800-c/Fish.jpg

Habréis observado que el último enlace es una única imagen que además repite la dirección de la primera. Realmente podéis usar la que queráis o incluso un fondo plano, pues sólo sirve para marcar la zona dónde se irán viendo las imágenes. Con el CSS lo único que hemos hecho en esta parte es darle transparencia y agrandar la imagen para que no sea exactamente la misma, simulando ser un fondo sin relevancia. Mera decoración.

Para los curiosos, en esta demo se puede ver cómo añadir además unos rótulos mediante la inclusion de un span adicional en el interior del enlace. Si queréis hacer cambios, por ejemplo con los tamaños, ahí mismo podéis probarlos.

¿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

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

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

• Google
• Facebook
• Twitter