Galería de imágenes con jQuery que se adapta al ancho de la pantalla

Con este plugin jQuery podrás extender tu galería por todo el ancho del sitio y asegurarte de que se verá genial en todas las resoluciones, ya que posee diseño adaptive. Es perfecto para fotógrafos o cualquier diseñador que desee mostrar su trabajo.

Funciona en los navegadores modernos y es fácil de utilizar. Es posible añadirle elementos div y darle el estilo que más se ajuste al resto del sitio web.

Las fotografías cambian de blanco y negro a colores luego de posicionarse con el mouse sobre ellas. Además se introduce la descripción de la fotografía en el lado derecho con animación.

Esta galería presenta diseño adaptive, que cambia la disposición de las columnas dependiendo del ancho de la pantalla para poder mantener un diagrama fullpage y ocupar todo el ancho del navegador con las imágenes. Además posee un lightbox incorporado para poder visualizar la imagen en tamaño completoen un solo click.

¿Cómo se personaliza?

Dentro de #container se hallan las imágenes y dentro de #description las descripciones de cada una, ¡listo! el plugin se encarga del resto.

COLOCAR LAS IMÁGENES

El código para cada imagen es:

En el href del elemento a colocamos la dirección a nuestra imagen en tamaño grande, para que sea visualizada en un lightbox una vez que el visitante haga click sobre la thumbnail. Esta imagen en tamaño pequeño oficiará de vínculo con la imagen de tamaño full y por ello colocaremos la imagen dentro del elemento a. En este plugin se configuró el estado :hover utilizando un elemento span para colocar la variación de la imagen en color, junto con sus dimensiones. En la etiqueta img colocaremos la thumbnail en estado normal.

A continuación un esquema simplificado de las imágenes que deben se colocadas.

Si queremos tenes más imágenes simplemente continuamos añadiendo elementos item dentro de #container.

COLOCAR LAS DESCRIPCIONES

Para poder añadir la descripción de cada imagen utilizaremos una lista desordenada dentro del contenedor #description.

Dentro de cada elemento li agregaremos toda la información necesaria y el plugin se encargará de emparejar la imagen con la descripción correspondiente.

DemoDescarga

Modificado por última vez el día 26 de diciembre de 2012 a las 07:40
Scroll to top