jQuery TourBus: Crear tours interactivos

jQuery TourBus es un pequeño plugin desarrollado para funcionar junto al framework jQuery para la creación de tours interactivos, los mismos son perfectos para realizar una determinada explicación acerca del funcionamiento de un sitio web de manera que sea intuitiva para el usuario.

A diferencia de otras alternativas similares, este plugin es realmente fácil de utilizar, ademas muestra los mensajes utilizando diálogos modales con un efecto muy similar al de una caja del tipo lightbox.

Ejemplo de uso:

<ol class='tourbus-legs' id='my-tour-id'>
<li data-orientation='centered'>
<h2>This is a modal-like tour leg</h2>
<p>It isn't attached to a specific element.</p>
<a href='javascript:void(0);' class='tourbus-next'>Next...</a>
</li>

<li data-el='#nav' data-orientation='left' data-width='400'>
    <h2>Navigation</h2>
    <p>Here's where I explain how our navigation works...</p>
    <a href='javascript:void(0);' class='tourbus-next'>Next...</a>
</li>

<li data-el='#sell' data-orientation='bottom' data-width='300'>
    <p>Buy now, etc, etc</p>
    <a href='javascript:void(0);' class='tourbus-stop'>Done!</a>
</li>
</ol>

Inicializamos el plugin:

$(document).ready( function() {
    var tour = $('#my-tour-id').tourbus( {} );
} );

jQuery ToursBus cuenta con una excelente documentación. Un punto muy favorable es que provee a los diseñadores de una serie de métodos muy sencillos para personalizar su aspecto visual, algo fundamental si lo que buscamos es una perfecta integración con nuestro diseño.

Web: jQuery TourBus