<Código-Web>
Elementos HTML
y Reglas CSS

  1. TEXTOS
  2. ENLACES
  3. LISTAS
  4. IMÁGENES
  5. TABLAS
  6. FORMULARIOS
  7. MAQUETACIÓN

IMÁGENES > Galería

 

Existen numerosas formas de presentar un conjunto de imágenes en una página Web: con tablas, con frameworks como mootools o jquery, etc...), aquí os voy a decir otra forma crear una galería de imágenes utilizando CSS 3 y la pseudo-clase :nth-child

Por ejemplo

Creando las siguientes reglas CSS

ul#galeria { list-style: none; }
ul#galeria li { float:left; }
ul#galeria li img { width: 125px; border: 2px solid #fff; opacity: 0.5; }
ul#galeria img:hover {
opacity: 1;
z-index:100;
-moz-transform:scale(2); /* zoom en navegador Firefox */
-webkit-transform:scale(2); /* zoom en navegador Chrome y Safari */
-o-transform:scale(2); } /* zoom en navegador Opera */
ul#galeria li:nth-child(3n) { float: none; } /* cambiando el 3 variamos el nº de imágenes por fila */
/* IE no soporta la propiedad transform de CSS 3 */

Y colocando este código HTML

<ul id="galeria">
<li><img src="imagenes/galeria/01.jpg" /></li>
<li><img src="imagenes/galeria/02.jpg" /></li>
<li><img src="imagenes/galeria/03.jpg" /></li>
<li><img src="imagenes/galeria/04.jpg" /></li>
<li><img src="imagenes/galeria/05.jpg" /></li>
<li><img src="imagenes/galeria/06.jpg" /></li>
<li><img src="imagenes/galeria/07.jpg" /></li>
<li><img src="imagenes/galeria/08.jpg" /></li>
<li><img src="imagenes/galeria/09.jpg" /></li>
<li><img src="imagenes/galeria/10.jpg" /></li>
</ul>

Vemos esto:

 

 

 

 

 

SHOW: utilizando jQuery

 

Esta galería de imágenes la he realizado utilizando el plug-in jQuery propuesto en Nivo Slider:
(http://nivo.dev7studios.com/).

Dentro de la etiqueta <head> añadimos estas líneas:

<head>
...
<link rel="stylesheet" href="ini/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="ini/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="ini/style.css" type="text/css" media="screen" />
...
</head>

Y justo antes de la etiqueta </body> añadimos estas otras:

<body>
...
...
<script type="text/javascript" src="ini/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="ini/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
</body>

Previamente hemos colocamos estos archivos, bajados de Nivo, en un único directorio que en este ejemplo he llamado "ini".

*

Y dentro de la caja <div> que nos convenga ponemos la galería:

<head>
...
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="img/f1.jpg" />
<img src="img/f2.jpg" />
<img src="img/f3.jpg" />
<img src="img/f4.jpg" />
</div>
</div>
...
</head>


El fondo es una imagen de 128x128 creada con Photoshop utilizando el filtro "interpretar nubes" con una opacidad del 25%, y añadiendo la regla CSS3 de gradiente que puedes crear con el editor de ColorZilla http://www.colorzilla.com/gradient-editor/


Las imágenes del show son de la galería de fantasía de Vetton

 

Velocidad de cambio

Cada imagen permanece, por defecto, 3 segundos antes de cambiar y la velocidad de animación es de medio segundo. Si queremos variar esto debemos editar el archivo jquery.nivo.slider.js y cambiar las variables "pauseTime" y "animSpeed", teniendo en cuenta que la unidad es en milisegundos, si deseamos que la imagen cambie cada 5 segundos pondremos pauseTime=5000, estas dos variables se encuentran al final del archivo dentro de la sección //Default settings.

 

Aquí tienes el ejemplo funcionando:

*

 

Archivo comprimido para Show y Zoom con las librerias modificadas: show_zoom.rar

 

 


- (cc) 2012, 3con14 -