martes, 8 de febrero de 2011

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


Oloblogger


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.


<style type="text/css">
#gallery {display: none;}
#jgal {padding:0;margin:0;list-style: none; width: 500px;}
#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: 160px; left: 0px; display: none; }
#jgal li.active img { display: block; width:500px; }
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99;filter:alpha(opacity=99);}
</style>


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;}
























TABLA - FUENTES - FONTS


SOUV2BalaramScaGoudyFOLIO 4.2Biblica Font








free counters


Disculpen las Molestias




TABLA - INFORMÁTICA - UTILIDADES

No hay comentarios:

Publicar un comentario

Correo Vaishnava

Archivo del blog