Orbit es un plugin jQuery para implementar un vitoso slide de imágenes con efecto deslizante. Éste permite reproducir automáticamente, pausar la presentación o usar los controles para avanzar o retroceder una imagen manualmente, además posee un indicador del tiempo que falta para que se deslice a la siguiente imagen.
Implementación de Orbit
Primero hay que enlazar los archivos JS y CSS:
<script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.orbit.min.js" type="text/javascript"></script> <link rel="stylesheet" href="css/orbit.css">
Luego agregar la estructura de marcado HTML que mostrará el slide:
<div id="featured"> <img src="link.jpg" title="Link galliantly riding the majestic Epona across the hyrulian plains" alt="Link" /> <img src="ezio.jpg" alt="Ezio" /> <img src="masterchief.jpg" title="Master Chief surveying Reach, home of his upcoming game" alt="Master Chief" /> <img src="marcusfenix.jpg" alt="Marcus Fenix" /> </div>
Activar el plugin:
<script type="text/javascript">
$(window).load(function() {
$('#featured').orbit();
});
</script>
Configurar el comportamiento:
$('#featured').orbit({
animation: 'fade', //desvanecimiento (horizontal/vertical)
animationSpeed: 800, //velocidad de avance
advanceSpeed: 4000, //tiempo entre transiciones
startClockOnMouseOut: true, //reiniciar tras retirar mouse
startClockOnMouseOutAfter: 3000, //reiniciar el tiempo
directionalNav: true, //habilitar avance manual
captions: true, //sitien título mostrarlo en abajo
captionAnimationSpeed: 800, //velocidad de la animación de los títulos
timer: false //mostrar indicador circular de tiempo
});
Corolario
Como todas las implementaciones con jQuery, Orbit es hasta algo más sencillo de implementar que el promedio y los resultados hubieran sido impensable unos años atrás o sólo se hubiera podido hacer usando alguna tecnología como Flash.