Orbit

Orbit 1.2.3 – Un slider de tan solo 4KB – Parte I

Orbit es un plugin de jQuery desarrollado por ZURB, el cual nos permite crear un slider sencillo de imágenes en cuestión de segundos. Este plugin funciona mejor en los navegadores Firefox 3.5+, Chrome y Safari, aunque los programadores aseguran que también lo hace en IE 7+.

Dentro de las características más importantes destaca la simplicidad de su instalación, ya sea que se inicialice con los valores predeterminados (como lo veremos en este post) o que establezcamos los nuestros a través de los parámetros disponibles.

Pero basta de presentaciones, vayamos a lo realmente interesante.

Empecemos descargando el plugin Orbit 1.2.3, el cual lo puedes obtener dando clic aquí. Descomprimimos el archivo .zip y obtendremos una carpeta con los siguientes archivos:

Contenido de la carpeta orbit-1.2.3

Copiaremos el archivo jquery.orbit-1.2.3.min.js, para después pegarlo en la carpeta js de nuestro proyecto. En el documento HTML necesitamos cargar la última versión de jQuery y posteriormente el plugin Orbit 1.2.3 con las siguientes líneas dentro de las etiquetas <head>:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.orbit-1.2.3.min.js" type="text/javascript"></script>

Ahora copiamos el archivo orbit-1.2.3.css y la carpeta orbit que incluía el .zip y los pegaremos en nuestra carpeta llamada css, e introducimos la siguiente línea justo después de las anteriores para cargar la hoja de estilos:

<link rel="stylesheet" href="css/orbit-1.2.3.css">

A continuación necesitamos crear la estructura HTML de nuestro slider, para eso vamos a crear un div con el id orbit-slider (puede ser cualquier otro nombre) y dentro de este div vamos a poner las imágenes que rotarán:

<div id="orbit-slider">
<img src="images/img_1.jpg" alt="Imagen 1" />
<img src="images/img_2.jpg" alt="Imagen 2" />
<img src="images/img_3.jpg" alt="Imagen 3" />
</div>

Cabe destacar que Orbit 1.2.3 determina automáticamente las medidas (ancho y alto) del slider a partir de las imágenes que contiene el div, por lo que te recomendamos que todas imágenes que agregues tengan exactamente las mismas medidas para que no tengas un desfase visual.

Finalmente, para que nuestro slider funcione correctamente tenemos que activar el plugin con la ayuda de algunas líneas en jQuery, justo antes de la etiqueta </body> escribimos:

<script type="text/javascript">
$(function()
{
$('#orbit-slider').orbit();
});
</script>

Para que no tengas inconvenientes, es importante que coincida el id del div que declaraste en la estructura HTML con el id en el código de jQuery. Por ejemplo si el id de tu div se llama primerslider, tienes que poner ese nombre en la línea, así: $(‘#primerslider’).orbit();

Con esto tendremos el slider funcionando, puedes ver el código completo y la demostración aquí. Dejamos los comentarios abiertos para cualquier duda que pueda surgir.

En otro post veremos cómo cambiar la configuración del plugin a través de sus parámetros.

Share Button
  • allvao

    Mi slider aparece a la izquierda en vez de al centro… donde está el margin del slider ?