Sencilla galería de imágenes con miniaturas

Para los que les gusta lucirse con los gráficos, ahí va un sistema con algo de JavaScript y por supuesto CSS, para formar una galería que incluye unas miniaturas con las que se podrá acceder a las distintas imágenes de la colección.



Primero de todo, instalamos el estilo. Todo el código que se facilita en esta entrada está redactado para incluirlo todo seguido en un gadget. Tras cada parte, las aclaraciones necesarias para hacer lo mismo pero en las entradas.

<style type="text/css">
#gallery { display: none; }
#jgal {padding:0;margin:0;list-style: none; width: 160px; }
#jgal li { opacity: .5;filter:alpha(opacity=50); float: left; display: block; width: 60px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 10px; margin-bottom: 10px; }
#jgal li img { position: absolute; top: 20px; left: 160px; display: none; }
#jgal li.active img { display: block; width:370px; }
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99;filter:alpha(opacity=99);}
</style>

El display:none; del primer ID (#gallery) está pensado para evitar que las imágenes se vean completas antes de que se "monte" la galería (mientras se carga el código). En #jgal determinais el ancho del espacio destinado a las miniaturas; 160px en el ejemplo, para que se muestren en filas de a dos, porque hay que contar el ancho de la miniatura (60px) más los márgenes entre ellas. En #jgal li, fijais el tamaño de las miniaturas (60x60px). El left de #jgal li img es para desplazar la imagen grande que se va mostrando y que no se solape con las miniaturas. Hay más propiedades que sólo sirven para el estilo propiamente dicho, como la opacidad y los bordes, que podeis cambiar a vuestro gusto sin problemas.

Para el caso de querer publicar galerías en entradas, lo anterior hay que insertarlo antes de ]]></b:skin> para que esté disponible para todas las ocasiones y no tener que introducirlo manualmente en cada post. Previamente habrá que eliminar la primera y la última línea (etiquetas STYLE).

A continuación iría el script:

<script type="text/javascript">
//<![CDATA[
var gal = {
init : function() {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
var li = document.getElementById('jgal').getElementsByTagName('li');
li[0].className = 'active';
for (i=0; i<li.length; i++) {
li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
li[i].title = li[i].getElementsByTagName('img')[0].alt;
gal.addEvent(li[i],'click',function() {
var im = document.getElementById('jgal').getElementsByTagName('li');
for (j=0; j<im.length; j++) {
im[j].className = '';
}
this.className = 'active';
});
}
},
addEvent : function(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent("on"+type, obj[type+fn]);
}
}
}
gal.addEvent(window,'load', function() {
gal.init();
});
//]]>
</script>

Básicamente, lo que hace es buscar si existe el ID gallery y capturar los distintos elementos de lista que pudieran existir en él. Esos elementos se mostrarán como miniaturas y una función controlará si se hace clic en ellos. En ese caso, al pulsado se le asignará la clase active y será visible en la zona de ampliación.

Al igual que con el estilo, esta parte se puede poner directamente en la plantilla si lo vamos a usar con frecuencia, en cuyo caso, las comillas dobles de la primera línea, tendrán que cambiarse a comillas simples. A diferencia de aquel, este se insertará antes de </head>.

Y para finalizar, la parte HTML. Independientemente de dónde hayamos puesto todo lo anterior, esto se tendrá que teclear justo dónde queremos que se muestre la galería. Si todo lo metimos en un gadget, a continuación. Se trata de una lista normal con id=gallery, metida dentro de un DIV con posición relativa para evitar efectos colaterales de otros posicionamientos pre-existentes.

<div style="position:relative;">
<ul id="gallery">
<li><img src="URL_IMAGEN1" alt="" /></li>
<li><img src="URL_IMAGEN2" alt="" /></li>
<li><img src="URL_IMAGEN3" alt="" /></li>
<li><img src="URL_IMAGEN4" alt="" /></li>
</ul>
</div>

En alt podeis poner el texto que querais relativo a cada imagen y asunto terminado.

Más información (en inglés) en David's kitchen.

Actualización: Un nuevo post para construir esto mismo pero con las miniaturas en la parte inferior de la imagen y así poder mostrar con un mayor tamaño la imagen principal.

¿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