Orbit

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

Como lo mencionamos en el primer post, Orbit 1.2.3 es un plugin para crear sliders de imágenes, que destaca por su simplicidad en la instalación y configuración. En este post conoceremos todos los parámetros que soporta el plugin acompañados de algunos ejemplos.

Hasta ahora teníamos funcionando nuestro slider con el siguiente código en jQuery.

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

ANIMACIÓN

Empecemos cambiando el  efecto de la animación a la hora de cambiar de slide, para esto utilizaremos el parámetro animation el cual acepta uno de cuatro valores posibles: fade, horizontal-slide, vertical-slide y horizontal-push. Orbit 1.2.3 también permite cambiar o controlar la velocidad de la animación con el parámetro animationSpeed que recibe como valor un número entero que equivale al tiempo transcurrido en milisegundos.

Para este ejemplo utilizaremos el efecto fade y estableceremos la velocidad de la animación a 1000 milisegundos (1 segundo), agregando un par de líneas a nuestro código anterior:

<script type="text/javascript">
$(function()
{
$('#orbit-slider').orbit({
animation: 'fade',
animationSpeed: 1000
});
});
</script>

TEMPORIZADOR

El plugin ofrece la posibilidad de ocultar o mostrar el temporizador utilizando el parámetro timer que únicamente acepta los valores booleanos true o false. De igual modo podemos establecer el tiempo de transición entre slides con el parámetro advanceSpeed que solo recibe valores enteros (milisegundos).

En este ejemplo lo desactivaremos y cambiaremos el tiempo de transición a 7 segundos:

<script type="text/javascript">
$(function()
{
$('#orbit-slider').orbit({
timer: false,
advanceSpeed: 7000
});
});
</script>

Nota: si deshabilitamos el temporizador, perdemos la transición automática entre slides.

EVENTOS

Orbit 1.2.3 permite pausar la transición entre slides al posicionar el cursor sobre el slider, esto mediante el parámetro pauseOnHover con los valores true o false. De forma similar podemos restablecer las transiciones al momento de que el cursor sale del slider, con el parámetro startClockOnMouseOut únicamente con true o false.

Pero también podemos indicar los milisegundos que deben transcurrir para que se restablezca la transición, con startClockOnMouseOutAfter.

Estos eventos funcionan únicamente si el temporizador esta activado, por lo que en este ejemplo activaremos el timer, junto con los eventos anteriores (pauseOnHover y startClockOnMouseOut), indicando 3 segundos para restablecer la transición:

<script type="text/javascript">
$(function()
{
$('#orbit-slider').orbit({
timer: true,
pauseOnHover: true,
startClockOnMouseOut: true,
startClockOnMouseOutAfter: 3000
});
});
</script>

Existe otro parámetro llamado afterSlideChange, que permite ejecutar cualquier código o función en cuanto se cambie de slide (ya sea por el propio usuario o por el timer). Por cuestiones prácticas únicamente ejecutaremos un alert para mostrar el funcionamiento:

<script type="text/javascript">
$(function()
{
$('#orbit-slider').orbit({
afterSlideChange: function(){
alert("Este alert se ejecuta al cambiar de slide");
}
});
});
</script>

NAVEGACIÓN

Para navegar entre slides, el plugin cuenta con flechas de navegación y bullets. Con el parámetro directionalNav podemos indicar si queremos visualizar las flechas de navegación o no, obviamente con los valores true o false. De la misma manera podemos utilizar el parámetro bullets.

En este ejemplo desactivaremos las flechas de navegación y mostraremos las bullets:

<script type="text/javascript">
$(function()
{
$('#orbit-slider').orbit({
directionalNav: false,
bullets: true
});
});
</script>

ENCABEZADOS

Hasta el momento únicamente mostrábamos imágenes en nuestro slider, pero Orbit 1.2.3 permite asignar un encabezado en cada slide, para eso existe captions un parámetro cuyos valores son true o false. Pero las opciones para el encabezado no terminan aquí, podemos asignarles un efecto con el parámetro captionAnimation con los siguientes valores: fade, slideOpen y none.

Y como era de esperarse también podemos controlar el tiempo de la animación con captionAnimationSpeed, seguido de un valor entero.

Para mostrar los encabezados tendremos que modificar la estructura HTML de nuestro slider. Primero necesitamos agregar el atributo data-caption al img al que vamos a agregar el encabezado, seguido del nombre de un identificador (para este ejemplo captionOne):

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

Después tenemos que crear un span para cada encabezado con la clase orbit-caption y el id que definimos en la imagen (captionOne) y dentro del span agregaremos el texto del encabezado:

<div id="orbit-slider">
<img src="images/img_1.jpg" alt="Imagen 1" data-caption="#captionOne" />
<img src="images/img_2.jpg" alt="Imagen 2" />
<img src="images/img_3.jpg" alt="Imagen 3" />
</div>
<span id="captionOne"><strong>Encabezado de prueba:</strong> Que pertenece al primer slide.</span>

A continuación agregamos los parámetros del plugin a nuestro código en jQuery:

<script type="text/javascript">
$(function()
{
$('#orbit-slider').orbit({
captions: true,
captionAnimation: 'slideOpen',
captionAnimationSpeed: 1000
});
});
</script>

De nuevo dejamos los comentarios abiertos para cualquier duda o comentario que pueda surgir.

Share Button