Inicio > programación, web > Slider de imágenes en jQuery con Orbit

Slider de imágenes en jQuery con Orbit

Martes, 21 de Septiembre de 2010


Hace unos días leí en DiarioTHC un artículo sobre cómo implementar un Slider de imágenes en jQuery con Orbit. Me pareció muy interesante así que voy a compartirlo con vosotros, y veremos hasta donde se puede profundizar…

Antes de empezar, quería aclarar dónde podemos implementar el Slider de imágenes. Hoy en día, es muy común utilizar en la página de inicio de webs corporativas, personales o tiendas on-line para presentar productos, trabajos realizados, etc…

Y por último (y ya empezamos con el código), quería comentar qué es jQuery y Orbit: jQuery es una biblioteca o framework de JavaScript que permite simplificar la interacción con documentos HTML, manejar eventos, desarrollar animaciones y agregar interacción AJAX. En cambio, Orbit es un plugin que permite mostrar atractivos sliders de imágenes.

Ahora sí, pasemos a trabajar. Manos a la obra…

Para empezar, tenemos que descargarnos el Orbit kit y jQuery. Una vez descargados y colocados en las carpetas donde almacenemos nuestros scripts, procederemos a crear un fichero html nuevo o bien editar aquel en el que queremos añadir el slider.

Ahora haremos referencia primero a jQuery y después a Orbit. Entre los tags <head> y </head> añadiremos estas dos líneas:

[js][/js] [js][/js]

Tened en cuenta que cada uno tendrá los scripts en sus directorios correspondientes. Yo lo tengo dentro de la carpeta “scripts”.

Ahora hacemos referencia a la hoja de estilos que utilicemos. Yo en este caso haré referencia a la que trae el Orbit Kit:

[html] [/html]

Acto siguiente, debemos inicializar Orbit con el siguiente script (esto ya deber ir dentro del <body>):

[js][/js]

En este script simplemente estamos indicando que cuando se cargue la página, aquello que esté etiquetado con “featured” ha de llamar al kit de Orbit.

Por lo tanto, nos falta el código para mostrar el slider:

[html]

[/html]

Por lo tanto, y resumiendo, lo que vaya dentro del div “featured” será lo que se muestre en el slider (en total pongo 4 imágenes que deberían tener el mismo tamaño, de todas formas Slider se encargará de redimensionarlas al mismo tamaño). He cogido estas imágenes desde Google al azar, espero que no me llamen la atención!!! Son solo para mostrar este ejemplo!!

Ahora ya lo tenéis todo, solo os queda probar. Debería quedaros algo parecido a:
http://www.alexmontes.es/slider.html

En fin, creo que es algo muy sencillo y muy atractivo a la vez. Así que os será de mucha utilidad.

En el próximo artículo profundizaré sobre este slider para conseguir aquellas personalizaciones que nos interesen más.

¿Te gustó el artículo? Compártelo!!:
  • Facebook
  • Twitter
  • FriendFeed
  • del.icio.us
  • LinkedIn
  • Technorati
  • Ping.fm
  • StumbleUpon
  • Google Bookmarks
  • Digg
  • Meneame
  • Netvibes
  • Live
  • BarraPunto
  • Bitacoras.com
  • Reddit
  • Wikio
  • email
  • Print

A. Montes programación, web , ,