Galería de imágenes II con CSS

En ocasiones añadir una pequeña galería de imágenes es necesario, bien para mostrar trabajos o para enlazar contenido destacado.

Esta galería que vamos a ver es muy simple la cree para una plantilla sobre fotografía hace ya bastante tiempo y podemos añadirla en cualquier parte del blog aunque la idea inicial fue añadirla al footer del blog.

Para los estilos localizamos ]]></b:skin> y justo antes añadimos:

/* Galería-footer----------------------------------------------- */.galería-footer {margin-top:5px;overflow:hidden;width:300px !important;  /* ancho de la galería   */}.galería-footer a {display:block;float:left;margin-right:5px; /* margen derecho */margin-top:1px;}.galería-footer a img {-moz-background-clip:border;-moz-background-inline-policy:continuous;-moz-background-origin:padding;background:#9BBFB7 none repeat scroll 0 0;  /* color de fondo de imágenes */border:1px solid #A6A6A6;  /* color borde de imágenes */margin:8px 3px;  /* espacio entre imágenes y margenes de la galería */opacity:0.2; /* opacidad */padding:6px; /* espacio entre imágenes */}.galería-footer a img:hover {opacity:1; /* opacidad al pasar el cursor */}

A continuación en un gadget de HTML del footer añadimos:

<div class="galería-footer"><a href="#" title="foto1"><img alt="foto1" src="url-foto1"/></a><a href="#" title="foto2"><img alt="foto2" src="url-foto2"/></a><a href="#" title="foto3"><img alt="foto3" src="url-foto3"/></a><a href="#" title="foto4"><img alt="foto3" src="url-foto4"/></a><a href="#" title="foto5"><img alt="foto5" src="url-foto5"/></a><a href="#" title="foto6"><img alt="foto6" src="url-foto6"/></a><a href="#" title="foto7"><img alt="foto7" src="url-foto7"/></a><a href="#" title="foto8"><img alt="foto8" src="url-foto8"/></a><a href="#" title="foto9"><img alt="foto9" src="url-foto9"/></a></div>

❋ Donde url-foto1-2... añadimos la url de la imagen que mostramos en la galería.

❋ En a href="#" sustituimos la almohadilla por la url del enlace o imagen de mayor tamaño, también podemos mostrar una ventana modal como en el ejemplo.

❋ alt - Indica un texto alternativo.

❋ title - Texto que se muestra en un tooltip al pasar el mouse.

Si deseamos que las imágenes se muestren de mayor tamaño podemos utilizar una ventana modal, en mi caso utilizo Lytebox y puede verse el ejemplo en la primera imagen, la forma de añadirlo a la galería sería:

<a href="url-imagen-grande" rel="lytebox" title="foto1"><img style="width:70px; height:70px; "src="url-miniatura"/></a>

Lo correcto sería añadir dos imágenes una para la miniatura y otra para la imagen de mayor tamaño de no querer ajustar el tamaño a las dos imágenes podemos añadir la misma url para las dos y aplicarle anchura con width y altura con height.