Galerías de imágenes: Lightbox

Publicado en Tema 6º : Internet

Numerosos sitios web utilizan galerías de imágenes para mostrar sus productos y servicios. Este tipo de galerías muestran una serie de miniaturas de imágenes que se amplían al pinchar sobre cada imagen.

Hasta hace poco, la técnica más utilizada para construir una galería consistía en incluir las miniaturas en la página y abrir cada imagen grande en una ventana emergente (o pop-up) o en una nueva página.

El uso de técnicas basadas en JavaScript ha supuesto una revolución en la creación de las galerías de imágenes y ha permitido mejorar la experiencia de navegación del usuario.

La técnica se conoce como Lightbox (ventana de luz) y fue creada originalmente por Lokesh Dhakar. Lightbox es una técnica muy sencilla de utilizar, funciona correctamente en todos los navegadores y permite mantener la semántica del documento (no ensucia la página con código JavaScript).

Existen multitud de sitios donde encontrar tipos de galerías, una gran mayoría utilizan el framework jQuery para crear galerias muy vistosas, pero no es el único código javascript con el que las podemos crear galerías, incluso utilizando sólo CSS3 podemos presentar galerías estupendas.

Algunos sitios interesantes con código para crear galerías son estos:

fancybox.net |  colorbox |  highslide |  frescojs

lightbox2 |  lightbox |  lightview |  prettyPhoto

slimbox2 |  swipebox |  yoxview |  lytebox.com 

simplebox |  Codrops

Para presentar las tareas realizadas con Photoshop podéis utilizar cualquiera de ellas, aunque os propongo emplear uno de estos tres plugin: Yoxview, Highslide o Simplebox. Cualquiera de ellos es fácil de utilizar y el resultado que se obtiene es bueno.

Demos de ejemplo:

 

Utilidades ...

imprescindibles Firefox Chrome Safari Opera IE9 Adobe Reader 7zip Flash Java Filehippo Ninite

Recursos

aulav

Visitas...

Hoy 6

Ayer 67

Mes 1035

TOTAL 144694

En Línea...

Hay 25 invitados y ningún miembro en línea