Galerías de imágenes con WOW Slider

4
17272

Creación: 10-10-2011

Índice de contenidos

1.Introducción
2. Entorno
3.Instalación
4. Creando la galería de imágenes
5. El resultado
6. Conclusiones
7. Sobre el autor


1. Introducción

Yo soy principalmente desarrollador y la verdad es que no tengo mucha idea de diseño y estética, soy un tío típico de backend, con su Java, su Spring, su Hibernate, su NoSQL y ese tipo de cacharritos (vamos el típico que no puede ir a comprarse ropa sin la novia porque la lía parda). Pero como no me gusta quedarme en mis círculos de comodidad llevo tiempo aprendiendo cositas de composición, estilo, colores (y eso que soy un poco daltónico 😛 ), …

El caso es que he escrito una pequeña reseña de mi paso por la Apache Barcamp Spain 2011 en Sevilla, y quería poner algunas fotitos que hice durante el evento. El antiguo yo simplemente las hubiera dejado caer sobre la página, o como mucho hubiera montado un pequeño mosaico usando <table>.
Pero no, ese ya no soy yo, así que tenía que buscar algo un poco más vistoso y pintón. Es increíble la cantidad de recursos que se pueden encontrar en Internet, y eso que limité mi búsqueda a plugins de jQuery.

De todos los que vi me decidí a usar WOWSlider. Porque es bonito (podéis ver gran cantidad de ejemplos en la propia página), configurable, gratis si es para contenidos no comerciales, y lo mejor de todo, tiene una aplicación de escritorio donde le dices de forma super sencilla las fotos, todas las opciones, y te genera todo el código !!!

En este tutorial vamos a ver usar esta estupenda herramienta.


2. Entorno

El tutorial está escrito usando el siguiente entorno:

  • Hardware: Portátil MacBook Pro 17′ (2.8 GHz Intel i7, 8GB DDR3 SDRAM, 256GB Solid State Drive).
  • NVIDIA GeForce GT 330M with 512MB
  • Sistema Operativo: Mac OS X Lion 10.7.1
  • WOW Slider 1.9

3. Instalación

La instalación es simple, sólo hay que descargar el paquete pulsando sobre Download en la parte superior de la página. Si hemos elegido la versión gratuita simplemente tendremos que registrarnos para empezar con la descarga.

Una vez descargado lo descomprimimos y ejecutamos el instalador.

Si hay que decir que sólo hay versión para Mac y Windows, si eres usuario de Linux te recomiendo que lo pruebes de dentro de una máquina virtual porque su sencillez y resultado creo que merecen la pena.


4. Creando la galería de imágenes

Una vez abierta, la aplicación tiene el siguiente aspecto:

WOW Slider 1.9 - Free version - New gallery

Como veis es bastante sencilla y autoexplicativa. Además está traducida a muchísimos idiomas (incluido el español), y si colaboras con las traducción te regalan una licencia empresarial 😉

Para añadir las imágenes que queremos que formen parte de la galería basta con arrastrarlas desde el Finder al interior de la aplicación. También podemos añadirlas pulsando sobre el enorme signo + verde que hay en la parte superior. En este caso podremos añadir imágenes que estén en nuestro sistema de ficheros, carpetas enteras, o incluso imágenes que estén en Picasa, Flickr o Photobucket.
También podemos pinchar sobre las imágenes añadidas para editar sus propiedades, como el título, una descripción, una url, …

WOW Slider 1.9 - Free version - New gallery

Ahora que tenemos las imágenes añadidas y configuradas sus propiedades tenemos que definir la configuración de nuestra galería. Para ello pulsamos sobre el icono de la llave inglesa que está en la parte superior (entre el disco para guardar y el mundo para publicar).

Se nos abre la primera pestaña General, donde podemos poner título a la galería y configurara que elementos queremos en la interfaz de la mismas.

Gallery properties

Yo he activado el Pause on mouse over, para que la animación se pare si ponemos el ratón encima. Y también he cambiado la posición de los puntos que representan el número total de imágenes de la galería.

Ahora pulsamos sobre el icono superior de Images, y pasamos a la siguiente sección. Aquí vamos a escoger el efecto que se aplicará entre las dispositivas, el tamaño de las imágenes, el estilo que queremos que tenga la galería, el tiempo entre las diapositivas, e incluso con una licencia comercial podemos hacer que nos aplique una marca de agua a todas las imágenes.

Gallery properties

El último paso es pulsar sobre el icono Publish de la bola del mundo para publicar nuestro contenido. Esta opción también nos sorprende la cantidad de posibilidades, ya que podemos publicar al disco duro, o un FTP, incluso insertar directamente la galería en
una página que ya tengamos, o en un módulo de Joomla o un Slider de WordPress.

Gallery properties

En mi caso os recomiendo que la primera vez lo hagáis en el disco duro para poder inspeccionar los ficheros que genera. Por supuesto todo lo que encontraréis es HTML y JavaScript con jQuery.

5. El resultado

Salta a la vista, tiempo y esfuerzo mínimos y resultado bonito y profesional (bueno, si no tenemos en cuenta mi careto 😛 ).

6.Conclusiones

Salir de tu círculo de comodidad no tiene por que ser doloroso, significa que vas a aprender cosas nuevas, y eso es fantástico!!! En esta ocasión hemos descubierto WOW Slider y yo por lo menos me lo he pasado estupendamente jugando con él.

Animo y mucha suerte a todos!!!

7. Sobre el autor

Alejandro Pérez García, Ingeniero en Informática (especialidad de Ingeniería del Software) y Certified ScrumMaster

Socio fundador de Autentia (Desarrollo de software, Consultoría, Formación)

mailto:alejandropg@autentia.com

Autentia Real Business Solutions S.L. – "Soporte a Desarrollo"

http://www.autentia.com

 

4 COMENTARIOS

  1. Hola, muy interesante tu post, WOW slider esta perfecto!! mas para mi, ya que recien estoy empezando en el mundo de la programacion y no tengo muchos conocimientos en jquery. Queria saber como pusiste tu slider en tu página PHP ya que wow slider permite solo añadirlas a HTML. Estaria muy agradecido si haces un tutorial o me explicas.
    Saludos

  2. Hola, yo seguí un tutorial para usar una barra de menú con flexbox y de todo iba bien hasta que metí mi slide de fotos con wow slider, el slider se muestra encima de la barra de menú (al desplazarse) y eso no me gusta, estuve probando con las propiedades de los div pero no consigo hacer que al desplazarse mi slider de fotos lo haga por debajo de la barra de título como el resto del contenido. La url por si queréis ver de lo que hablo es: http://www.riverministry.es/prueba/index.html ¿tenéis alguna ayuda para esto o alguna sugerencia?

  3. Hola, no se si lo que publiqué os habrá llegado, pero por si acaso vuelvo a escribir. Lo que pasa es que tengo una web que utiliza un menú con flexbox y funciona bien. Hasta que puse el slider del wow slider y lo que veo es que al desplazar el contenido el slider de fotos sube pero está delante de la barra de menú: http://www.riverministry.es/prueba/index.html ¿teneéis alguna sugerencia de que podría hacer? he probado cambiando las propiedades de los div pero no lo he conseguido aún.

    Un saludo y gracias!

DEJA UNA RESPUESTA

Por favor ingrese su comentario!

He leído y acepto la política de privacidad

Por favor ingrese su nombre aquí

Información básica acerca de la protección de datos

  • Responsable:
  • Finalidad:
  • Legitimación:
  • Destinatarios:
  • Derechos:
  • Más información: Puedes ampliar información acerca de la protección de datos en el siguiente enlace:política de privacidad