Convertir una lista de imágenes en una galería con miniaturas (jQuery)

Todo el mundo tiene un pasado y hubo en tiempo en que en lugar de estar un pelín por encima de la media, estaba en lo más hondo por debajo de ella. Por aquel entonces publiqué un más que incómodo y poco configurable código para crear una Sencilla galería de imágenes con miniaturas. Algo después ya diseñé una que era adaptable y sólo con CSS, pero tanto esta como la otra tenían carencias o inconvenientes en mayor o menor medida.

¿Y qué tiene la de hoy de particular? Pues que simplemente creando una lista de imágenes, ya se genera automáticamente una galería con miniaturas que al pincharlas permiten ver la imagen ampliada.

Además podréis incorporar más de una galería de este tipo por página, el conjunto es adaptable (RWD) y no tiene limitaciones en cuanto a número de imágenes o medidas de estas.

No tiene limitaciones pero por razones estéticas quizás lo conveniente es que no sean más de 10 (simplemente para que no se vean demasiado pequeñas las miniaturas) y que tengan aproximadamente la misma proporción ancho/alto evitando mezclar formatos verticales y horizontales. Esto último sería para que no se vieran huecos.

Demo

A continuación la versión con las miniaturas arriba y luego veremos otra con las miniaturas abajo. Podéis probarla.

• 
• 
• 
• 
• 
• 
• 

Añadiendo el código necesario

Lo primero será asegurarse de que tenéis cargada la librería jQuery en vuestra plantilla. Si no es así, insertad la siguiente línea (en Blogger justo después de ]]></b:skin>):

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>

El estilo y el JavasScript lo podéis añadir tanto en un gadget como en la plantilla. Si va en la plantilla sería entre ]]></b:skin> y </head> y en cualquier caso, siempre detrás de cargar jQuery. Sería el siguiente, uno a continuación de otro, para que se pueda eliminar con facilidad de una vez si en el futuro os aburrís del plugin.

<style>
ul.obgaleria{width: 100%;height:0;overflow:hidden;margin: 30px auto;list-style: none;background:transparent;font-size:0;line-height:0;}
ul.obgaleria li{position: relative;display:inline-block;height:0;margin:0;list-style:none;cursor:pointer;vertical-align:top;overflow:hidden;}
ul.obgaleria li img {position: absolute;top: -150%;bottom: -150%;left: -150%;right: -150%;width: auto;max-width: none;height: 150%;margin: auto;padding:0;border:0;}
ul.obgaleria li:last-child img {top: 0;bottom: 0;left: 0;right: 0;margin: auto;width: 100%;height: auto;}
ul.obgaleria li {border-left: 3px solid transparent;border-bottom: 3px solid transparent;box-sizing: border-box;}
ul.obgaleria li:first-child, ul.obgaleria li:last-child {border-left:0;}
</style>

<script type='text/javascript'>//<![CDATA[
var prop = 60.00; // proporción alto/ancho*100 imagen principal
$(document).ready(function() {
$("ul.obgaleria").each(function() {
var id = "#" + $(this).attr("id");
var ancho = 100 / $(id + " li").length;
$("head").append("<style>" + id + "{padding: 0 0 " + (prop + ancho) + "% 0;} " + id + " li{width:" + ancho + "%;padding: 0 0 " + ancho + "% 0;} " + id + " li:last-child {padding-bottom: " + prop + "%;}</style>");
$(id + " li:first-child").clone().appendTo(id);
$(id + " li:last-child").css({
"width": "100%"
});
$(id + " li").click(function() {
$(id + " li:last-child").remove()
$(this).clone().appendTo(id).animate({
width: "100%"
}, 200);
});
});
});
//]]></script>

La variable var prop = 60.00; sirve para determinar la proporción de las imágenes que vais a utilizar. Sólo se trata de dividir el alto por el ancho y multiplicar por 100. Si por ejemplo son el doble de anchas que de altas, el valor os saldrá 50 y si son cuadradas, el valor os saldrá 100.

Todo esto sólo es necesario añadirlo una vez.

Creando la lista de imágenes

La estructura HTML, o sea, lo que tenéis que poner en un gadget o dentro de una entrada, será la lista de imágenes con la cantidad de ellas que queráis.

<ul class="obgaleria" id="galeria1">
<li><img src="URL_IMAGEN1.jpg"/></li>
<li><img src="URL_IMAGEN2.jpg"/></li>
<li><img src="URL_IMAGEN3.jpg"/></li>
</ul>

Siendo obligatoria la clase obgaleria, por contra dentro de la id podéis poner el valor que queráis. Sólo hay que tener en cuenta que si vais a poner más de una galería por página, esa id debe ser distinta para cada lista.

Y listo. Cada vez que pongáis una lista de imágenes como la de antes con clase obgaleria, esta se convertirá en una galería.

¿Qué hace el JavasScript

El código principal lo que hace es buscar en la página todas las listas que tengan la clase obgaleria (1). Para cada una de ellas localiza y graba su id (2) y a partir de ahí calcula cuantas imágenes tiene la lista para dividir el ancho total entre ese número (3).

Luego utilizamos todos esos datos para formatear con CSS las dimensiones de las miniaturas y del espacio para la imagen grande, añadiendo el estilo necesario en el head (4).

Para que de inicio no se muestre vacío el hueco grande, clonamos la primera imagen y la añadimos al final de la lista (5). La que ahora será la última (hueco grande) la ampliamos hasta el máximo ancho disponible (6). Y esperamos un click (7).

Ya sólo resta que cuando este se produzca borremos la última imagen (hueco grande) (8) y a continuación volvamos a clonar y a poner en ese mismo lugar la pinchada (9). Este paso incluye una pequeña animación jugando con el ancho.

(x) var prop = 60.00; // proporción alto/ancho*100 imagen principal
(x) $(document).ready(function() {
(1) $("ul.obgaleria").each(function() {
(2) var id = "#" + $(this).attr("id");
(3) var ancho = 100 / $(id + " li").length;
(4) $("head").append("<style>" + id + "{padding: 0 0 " + (prop + ancho) + "% 0;} " + id + " li{width:" + ancho + "%;padding: 0 0 " + ancho + "% 0;} " + id + " li:last-child {padding-bottom: " + prop + "%;}</style>");
(5) $(id + " li:first-child").clone().appendTo(id);
(6) $(id + " li:last-child").css({"width": "100%"});
(7) $(id + " li").click(function() {
(8) $(id + " li:last-child").remove()
(9) $(this).clone().appendTo(id).animate({width: "100%"}, 200);
(x) });
(x) });
(x) });

Variante con miniaturas abajo

Tanto el CSS como el JavaScript cambian un poco debido a que ahora la imagen grande será la primera y no la última.

• 
• 
• 
• 
• 
• 
• 

ul.obgaleria{width: 100%;height:0;overflow:hidden;margin: 30px auto;list-style: none;background:transparent;font-size:0;line-height:0;}
ul.obgaleria li{position: relative;display:inline-block;width:100%;height:0;margin:0;list-style:none;cursor:pointer;vertical-align:top;overflow:hidden;}
ul.obgaleria li img {position: absolute;top: -150%;bottom: -150%;left: -150%;right: -150%;width: auto;max-width: none;height: 150%;margin: auto;padding: 0;border:0;}
ul.obgaleria li:first-child img {top: 0;bottom: 0;left: 0;right: 0;margin: auto;width: 0;height: auto;}
ul.obgaleria li {border-left: 3px solid transparent;border-top: 3px solid transparent;box-sizing: border-box;}
ul.obgaleria li:nth-child(2), ul.obgaleria li:first-child {border-left:0;}

<script type='text/javascript'>//<![CDATA[
var prop = 60.00; // proporción alto/ancho*100 imagen principal
$("ul.obgaleria").each(function() {
var id = "#" + $(this).attr("id");
var ancho = 100 / $(id + " li").length;
$("head").append("<style>" + id + "{padding: 0 0 " + (prop + ancho) + "% 0;} " + id + " li{width:" + ancho + "%;padding: 0 0 " + ancho + "% 0;} " + id + " li:first-child {width: 100%;padding-bottom: " + prop + "%;}</style>");
$(id + " li:first-child").clone().prependTo(id);
$(id + " li:first-child img").css({
"width": "100%"
});
$(id + " li").click(function() {
$(id + " li:first-child").remove()
$(this).clone().prependTo(id);
$(id + " li:first-child img").animate({
width: "100%"
}, 200);
});
});
//]]></script>

Codepen dónde practicar

Miniaturas arriba: http://codepen.io/oloman/pen/VaqVww
Miniaturas abajo: http://codepen.io/oloman/pen/wGZKzM

¿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