Flexisel es un excelente plugin para jQuery que permite crear carruseles que se adaptan fácilmente a cualquier resolución de pantalla (Responsive Design).

El plugin cuenta con opciones para habilitar la reproducción automática, definiendo la velocidad de la animación y detenerla si se pasa el mouse sobre el carrusel.

Además, Flexisel proporciona una opción para personalizar el "número de elementos visibles" para los tamaños de pantalla preferidas, lo que ofrece una gran experiencia de navegación para los usuarios.

FORMA DE USO

Lo primero será incluir los archivos JS necesarios:



Este sería el HTML del carrusel:



Ejecutamos el plugin (forma básica):



Si se desea personalizar algunos parámetros, esta sería la forma de ejecutar el plugin:



Web: http://9bitstudios.github.io/flexisel/
Descarga: https://github.com/9bitStudios/flexisel

Responsive Nav es un pequeño plugin de JavaScript (pesa sólo 1,7 KB minimizado y no depende de ninguna biblioteca externa), que permite crear menús de navegación adaptables a pantallas pequeñas (Smartphones).

El plugin utiliza eventos táctiles y transiciones CSS3 para un mejor rendimiento. También contiene una solución "inteligente" que hace posible la transición de altura, de height: 0 a height: auto, que normalmente no es posible con transiciones CSS3. Además, funciona aún con el JavaScript desactivado.

EJEMPLO BÁSICO DE USO:



El plugin también cuenta con opciones de configuración y además, funciona en todos los navegadores de escritorio y móviles, incluyendo IE 6 o superior.

Web: http://responsive-nav.com/
Demo: http://responsive-nav.com/demo/
Descarga: https://github.com/viljamis/responsive-nav.js

Puede haber momentos en los que se requiera informar/orientar a los usuarios sobre los datos/funciones de determinados elementos HTML de una página, para ello Chardin.js nos será de gran utilidad.

Chardin.js es un plugin para jQuery que permite añadir instrucciones superpuestas sobre cualquier elemento HTML (similar a la reciente tour de instrucciones que Gmail implementó en su nuevo redactor de correos).

Utiliza la información mencionada en "atributos de datos personalizados" de los elementos dados y una vez ejecutado, las guías visuales aparecen encima de los elementos HTML sobre los que se quiere mostrar la información.

Web: http://heelhook.github.com/chardin.js/
Descarga: https://github.com/heelhook/chardin.js

Sidr es un plugin para jQuery que nos permite crear menús laterales deslizantes totalmente configurables, ideal para sitios web responsive, ya que el menú se mostrará cuando el usuario lo requiera.

El menú puede configurarse para que se muestre a la derecha o a la izquierda de la página, y ofrece múltiples formas para mostrar el contenido. En diseños responsive, el menú se conecta con un botón que se muestra en tamaños de pantalla específicos, haciendo útil la navegación desde pantallas pequeñas.

FORMA DE USO:



Web: http://www.berriart.com/sidr/
Descarga: https://github.com/artberri/sidr

Bespoke.js es un ligero (menos de 1KB minimizado en gzip) framework JavaScript para la elaboración de presentaciones o sliders de contenido totalmente personalizable.

Bespoke.js puede usarse con el teclado, también tiene soporte para pantallas táctiles, y añade las clases necesarias para el deslizamiento de las diapositivas, incluídas las transiciones CSS.

Además, cuenta con un API de JavaScript dotado de la mayoría de eventos, como siguiente, anterior, ir a una diapositiva específica, etc, y cuenta con un sistema de plugins para extenderlo.

Bespoke,js es compatible con navegadores modernos que tengan soporte ES5.

USO BÁSICO:

Las etiquetas HTML que usemos son completamente opcionales. Una vez que el elemento principal es seleccionado, los elementos secundarios pasan a convertirse en diapositivas.



Web: http://markdalgleish.com/projects/bespoke.js/
Descarga: https://github.com/markdalgleish/bespoke.js

Swipebox es un plugin lightbox para jQuery con soporte para pantallas táctiles, además de adaptarse muy bien a cualquier dispositivo (Responsive Design).

El plugin puede mostrar un solo elemento o un grupo de elementos (galería) donde se puede navegar con gestos táctiles o con las flechas del teclado. Utiliza transiciones CSS y jQuery.

Swipebox es compatible con Google Chrome, Safari, Firefox, Opera, IE8+, iOS4+, Android, Windows Phone.

FORMA DE USO:

Incluímos los archivos JS y CSS necesarios:



Ejecutamos el plugin:



En el HTML es necesario añadir una clase CSS específica (swipebox) en los enlaces de las imágenes, además de usar el atributo TITLE para que sirva como encabezado de la imagen en el lightbox.



Web: http://brutaldesign.github.com/swipebox/
Descarga: https://github.com/brutaldesign/swipebox

Twitter ha desarrollado un proyecto open source llamado typeahead.js, que es un plugin para jQuery que convierte cualquier campo de texto en un campo de autocompletado.

Typeahead.js acepta JSON como origen de datos y tiene varios ajustes para optimizar las peticiones remotas (limitación de velocidad, maxConcurrentRequests, etc.).

El plugin puede trabajar con conjuntos de datos locales o remotos, está optimizado para devolver los datos rápidamente, ya que almacena los datos en el cliente.

Web: http://twitter.github.com/typeahead.js/
Descarga: https://github.com/twitter/typeahead.js

El uso de scrollbars personalizados en una web se ha hecho muy común, por ejemplo, casi todas las aplicaciones de Google lo usan, otro ejemplo es el scrollbar de la barra lateral de Facebook.

Perfect Scrollbar es ligero plugin para jQuery (14KB) que nos permite crear estos scrollbars de forma rápida y sencilla.

El plugin no arruina el diseño predeterminado ni requiere que se hagan cambios en tu CSS. Funciona con contenedores de cualquier tamaño y vuelve a ordenar las posiciones si estos son redimensionados.

Además, el diseño del scrollbar se puede personalizar completamente con CSS y es compatible con la rueda del mouse en caso de que quiera hacer uso de ella.

Web y demo: http://noraesae.github.com/perfect-scrollbar/
Descarga: https://github.com/noraesae/perfect-scrollbar

elevateZoom es un plugin para jQuery bastante personalizable que nos permite crear interfaces de ampliación (Zoom) de imágenes con mucha facilidad.

El plugin permite trabajar con una sola imagen de alta calidad o con dos imágenes (un thumbnail y una versión de alta calidad).

La ventana de zoom puede colocarse en cualquier parte de la página (o imagen), y también tiene una opción para hacer inline-zooming, que ahorra espacio. Para esta opción, es posible utilizar una imagen de lente (lupa) que muestra en su interior la parte ampliada.

Y, por lo general para la visualización de productos, también cuenta con un modo de galería que presenta varias imágenes con la función de zoom.

elevateZoom tiene muchas opciones de configuración como fadeIn/fadeOut, opacidad, bordes, etc.

Web y demos: http://www.elevateweb.co.uk/image-zoom/examples
Descarga: http://www.elevateweb.co.uk/image-zoom/download

ayaSlider es un plugin de jQuery de fácil uso y configuración.

El slider puede mostrar un número ilimitado de items donde puede ser utilizado cualquier código HTML para las diapositivas, tiene pocas opciones de configuración, como los valores easeIn/easeOut, retraso entre cada diapositiva y selectores anterior/siguiente.

Sin embargo, cada diapositiva puede comportarse de manera diferente con la ayuda de las "opciones por diapositiva". Estos incluyen los puntos de partida de cada animación, la opacidad, retraso y duración.

ayaSlider es completamente personalizable, su aspecto puede definirse vía CSS.

FORMA DE USO:
1. Incluir los archivos JS necesarios:


2. Creamos el HTML:


3. Antes de la etiqueta </body>, ejecutamos el plugin configurando algunas de sus opciones:



Web: http://mamod.me/ayaSlider/
Descarga: https://github.com/mamod/ayaSlider