Oloblogger

Sencilla galería de imágenes... en horizontal

Posted: 07 Feb 2011 07:12 AM PST

Anteriormente vimos un sistema para hacer una galería de imágenes con miniaturas como esta:

La cuestión es que algunos necesitan o simplemente prefieren, que las miniaturas se muestren arriba de la imagen principal y no a la izquierda. Lo cierto es que esa es una forma de que las imágenes a tamaño "original" se vean más grandes.

En aquella entrada ya se explicó cómo instalar todo, por lo que ahora sólo vamos a indicar los cambios que sobre aquel código habría que hacer para conseguir esto.

Sólo necesitamos ajustar la parte CSS. Los cambios los he marcado en verde para que los encontréis más rápido. Después del código comento un poco los cambios.

Como podéis ver, lo único que hemos hecho ha sido ampliar el ancho destinado para la imagen principal (#jgal li.active img --> 500px) y al no necesitar espacio a la derecha de las miniaturas, también el de estas, que ahora será el mismo que en aquella (#jgal --> 500px). Luego reposicionamos el punto de origen para mostrar la imagen principal, en función del nuevo diseño (#jgal li img --> top:160px left:0px).

Por último, para cambiar el tamaño de las miniaturas y que cuadren con el nuevo ancho disponible, hay que cambiar el ancho y alto de estas en #jgal li y después ajustar el top de jgal li img. Así recolocamos consecuentemente la imagen principal. Por cierto, que las miniaturas no tienen porque ser cuadradas.

Un ejemplo con:

#jgal {width:500px;}
#jgal li {width: 34px; height: 84px;}
#jgal li img {top:100px; left:0px;}
#jgal li.active img {width:500px;}