Galería de imágenes con miniatura

Hoy vamos a explicaros como podemos poner una galería o slider de imágenes con miniatura en nuestro blog.

Lo bueno de esta galería es que no tenernos limitación de imágenes y podemos usar todas las que necesitemos, aunque por estética creo que estaría bien un máximo  de 10, y esto ara que las miniaturas no sean demasiado pequeñas. 

Además es muy importante que todas las imágenes tengan el mismo tamaño, tanto de largo como de ancho.

Como siempre comento antes de modificar datos de nuestra plantilla tenemos que hacer una copia de seguridad por si las cosas no nos salen bien.

Para ello podéis ver este post como lo hago paso a paso.

Para empezar lo primero que tenemos que saber es si tenemos descarga la librería de Jquery en nuestra plantilla, pero si no es así no os preocupéis tendremos que insertar esta línea justo después de ]]></b:skin>).

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

Para ello como siempre nos vamos a:
Tema > Editar HTML

Para que nos sea mucho más fácil encontrar esta línea lo que tenemos que hacer es pinchar Ctrl + F y nos saldrá un buscador y hay insertamos la palabra a buscaren nuestro HTML.
Le damos a guardar plantilla y ya tenemos nuestra librería de JQuery insertada en nuestro blog.

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>

 

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>

 
Solo cambiamos lo morado por la url de nuestra imagen.

• 
• 
•