Cómo mostrar imágenes en nuestras páginas web con Slimbox

1. Introducción

En este tutorial os vamos a enseñar cómo utilizar Slimbox, que consiste en una pequeña pero útil librería javascript, clon de Lightbox, que os ayudará a dar a vuestras páginas web un toque de elegancia cuando sea necesario mostrar imágenes, bien sean fotos, gráficas, pantallazos, etc.

Si visitais su web y pulsais sobre los ejemplos podreis ver que su funcionalidad es bastante limitada, ya que se reduce únicamente a mostrar una imagen en una ventana bloqueante, permitiendo que nos desplacemos entre imágenes.

Os he preparado un ejemplo con algunas mejoras sobre la versión original que podreis descargar pinchando aquí. Las mejoras son la siguientes:

1. Slimbox, tal cual, muestra una serie de mensajes y de información en inglés. Por ejemplo, al querer desplazarnos entre imágenes aparece ‘Image X of Y’. He traducido dicho mensaje modificando el código fuente para que aparezca ‘Imagen X de Y’
2. Tambien he modificado las imágenes de los botones ‘atrás’, ‘siguiente’ y ‘cerrar’, ya que en la versión original se podía ver ‘Prev.’, ‘Next’ y ‘Close’. En vez de traducir dichas imágenes las he sustituido por iconos del pack nuoveXT 2.2

2. Descargas

Como comento podeis bajar un ejemplo totalmente funcional con algunas mejoras pinchando aquí. Este ejemplo incluye todo lo que necesitas para poder empezar a mostrar imágenes utilizando la librería y algunas mejoras extra. Sin embargo, si deseas bajar el software original debes ir a la web de Slimbox y bajar desde ahí el software:

Dicha descarga es un zip que incluye un pequeño ejemplo, las css, algunas imagenes y las librerias javascript.

3. Slimbox en funcionamiento

El ejemplo que podeis bajar consiste en una pequeña aplicación donde se pueden ver cuadros:

Al pulsar sobre cualquiera de los cuadros se mostrarán éstos en color, en una pantalla modal, y se permitirá la navegación entre el resto de las obras del mismo autor. El código de la página está formado por 3 partes:

1- Inclusión de ficheros javascript y css. Como veis no hay nada fuera de lo normal

2- Inclusión de la colección de cuadros de Picasso. Es importante observar el ‘rel’ del hiperenlace

3- Inclusión de la colección de cuadros de Da Vinci. Tambien es importante observar el ‘rel’ del hiperenlace

Como se puede ver incluir esta librería en nuestras páginas y aplicaciones web es muy sencillo, y además da un aspecto vistoso a la presentación de imágenes.

4. Conclusiones

Como veis este tutorial es muy breve ya que incluir la librería es muy sencillo y ella sola se encarga de hacer todo el trabajo. Tan sólo comentar que, si quereis incluirla en una aplicación que use richfaces tendreis problemas ya que, por un lado, richfaces usa prototype y, por otro, slimbox usa mootools y surgen algunas incompatibilidades.

Por otro lado, si incluir este tipo de librerías os parece una buena opción os recomiendo que visiteis este enlace, el cual incluye gran cantidad de librerías con un funcionamiento similar.

Espero que os sea de utilidad.