Los mejores 26 plugins jQuery que tienes que conocer

Qué es jQuery

Antes de instalar cualquier jQuery plugins, hay que entender que es la librería jQuery.
jQuery es una librería (o biblioteca) JavaScript que fue creada por John Resign, que permite interactuar con los documentos HTML, manipular el árbol DOM, gestionar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web.

En su 10 años de vida jQuery ha conseguido ser la librería Javascript  más utilizada en todas las páginas web creada y activas.

jQuery es un único fichero Javascript que contiene todas las funcionalidades de DOM, efectos eventos y AJAX.
Con esta librería se puede cambiar el contenido de las páginas web sin necesidad de recargarla, con la manipulación del DOM y las peticiones AJAX. 
La versión actual es la 3.1.0.

Los proyectos de la Fundation: jquery y jquery uy

Ante todo hay que decir que la “jQuery Foundation” es el organismo que hoy en día se ocupa del desarrollo y manutención de jquery. Tiene entre sus proyectos además del mismo jQuery, también otro importante proyecto muy utilizado como jQuery ui. En la página web de la Foundation jQuery se puede encontrar toda la información necesaria sobre cada uno de sus proyectos. Además esta es una página rica de documentación y código de ejemplo como desarrollar (utilizar) jQuery o jQuery ui en nuestras páginas web.

Porque utilizar los jQuery plugins

Hoy en día en todos mis proyectos estoy utilizado jQuery para desarrollar algunas funcionalidad útiles a la usabiulidad de mi páginas web. Un ejemplo concreto podría ser el XXXXXXXXXXXX de está página web (enlace al proyecto de portfolio). jQuery nos ayuda a economizar nuestro tiempo y a hacer más potentes y usables nuestras aplicaciones u nuestras páginas web.
Esta librería javascript es utilizada en más del 90% de páginas web y eso hace que sea ya un estándar web el hecho de incluirlo en nuestros proyectos. Es de fácil aprendizaje, eso si, seria mucho mejor empezar a aprender JavaScript porque esa librerías de JavaScript depende.
Con la librería jQuery es relativamente sencillo crear animaciones, objectos animados, y si en conjunto utilizamos un poco de animaciones hechas con HTML5/CSS3, nos quedaran páginas web espectaculares.
Otro aspecto importante es el manejo del DOM usando css y también el manejo rápido de propiedades y css.

Como instalar jQuery

Es muy simple incluir en nuestros proyectos web la librera de jQuery. Yo aconsejo siempre incluirlo en el footer de nuestros proyectos. Eso no es siempre posible porqué hay códigos que hay que ejecutarlo antes que se cargue la página. En estos caso el archivo hay que incluirlo en el Header. En linea general en una plantilla WordPress hay que insertar en el archivo footer.php esta linea:

< script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min-js”>< /script>

Esta linea lo que hace es incluir a nuestro proyecto el archivo comprimido (min) de la versión 1.11.3 de jquery.
Hay dos posibilidad de incluir la librería de jQuery en nuestro sitio web. Hay que decir que es imprescindible incluir el archivo jQuery.js antes de incluir cualquier otro plugin que depende de esa librería.

Descargar el archivo de la librería jQuery en local

La primera opción es incluir en local en nuestros proyecto, por ejemplo en una carpeta /js/ el archivo:

< script src=“/js/1.11.3/jquery.min-js”>< /script>


Esta ruta puede cambiar según tu proyecto.
Por ejemplo en WordPress podría ser algo como este:

< script src=“< ?php bloginfo(‘template_directory’)?>/js/jquery.min-js”>< /script>


La función bloginfo(‘’) lo que hace es imprimir la ruta correcta de nuestro tema wordpress.

con CDNs

La otra manera de incluir la librería jQuery en nuestros proyectos web es la de utilizar los CDNs. Un CDN es un Content Delivery Network o Red de entrega de contenidos. Además un CDN permite que el cliente descargue el archivo desde un tercero en lugar de nuestro servidor.

Las ventajas de utilizar un CDN

  • Ahorro del proprio ancho de banda.
    Ante todo hay que decir que si en lugar de ser nuestro servidor el que sirve la librería jquery, lo hace otro servidor, estamos ahorrando el ancho de banda. De todos modos hay que decir que estamos hablando de unos pocos Kbs por petición, entonces el coste es marginal.
  • Mayor velocidad en la descarga de la librería jQuery.
    Las peticiones simultáneas que pueden realizarse a un mismo servidor suelen limitarse en número. Entonces si nuestra página web está compuesta por muchos archivo, utilizar un CDN permite que los archivos puedan descargarse de forma paralela diminuyendo el tiempo necesario para cargarse.
  • Uso mejor de la cache en el lado cliente.
    Este es el punto más importante de utilizar un CDN. Cada vez que un navegador navega una página web, este guarda cada archivo css o javascript, para recurrir a ellos en futuras visitas. Eso significa que a lo largo del día el navegador de llega de archivos. Sin embrago cuando usamos un CDN que sea Google, Microsoft o Amazon, podemos aprovechar la versión cacheada que haya generado alguna otra página por la que hayamos navegados tener que volver a descargarlo.

Enlaces directos a los CDNs más populares:

Google
Microsoft
Amazon
MAXCDN
JSDelivr

Los mejores 26 jQuery plugins (con descarga directa)

Finalmente os pongo 26 jQuery plugins que nos pueden ayudar en vuestro proyectos web.
 Muchos de estos plugins son ya versiones bastante estables, de todos modos os aconsejo de probarlo antes de ponerlos en en el proyecto en producción.

Como instalar los jQuery plugins

En conclusion puedo deciros que la instalación de un plugin jQuery es bastante sencilla. Hay solo que incluir el archivo después de incluir el archivo de jQuery.

1. AnimateScroolAnimateScroll jQuery Plugin

Ante todo he puesto AnimateScroll que es un plugin de jQuery que permite desplazarse a cualquier parte de la página con sólo llamar a la función animatescroll () con el identificador o nombre de clase de elemento hasta que desea desplazarse.

2. Moment.jsMoment.js jQuery Responsive

Este plugin es muy bueno si hay la necesidad de trabajar con las fecha en tu proyecto web. Sirve para analizar, gestionar y manipular cada fecha.

3. Responsive SlidesResponsive slides jQuery Plugin

Entre todos los jQuery plugins de “slider jquery” el plugin Responsive Slides es un plugin que sirve para crear un Slider sencillo de fotos. No tiene muchas opciones pero si que es super ligero y se carga super rápido. Lo aconsejo si quieres crear slider sencillos en tu paginas web.

4. AlertifyAlertify jQuery Plugin

Este plugin me gusta mucho porqué permite crear ventanas modal en las cual se pueden incluir “botones” que generan eventos al pinchar sobre esos. El creator del proyecto ya no sigue la manutención de plugin pero hay otras páginas web que lo están desarrollando como:

5. TooltipsterTooltipster jQuery Plugin

Entre todos los jQuery plugins de este estilo, este plugin sencillamente permite crear cualquier tipología de Tooltip, que se pueden personalizar y incrementar. Permite dar unas información más y más bonita en tu proyectos web.

6. ChartjsChartjs jQuery Plugin

Si necesitas incluir gráficos en tu proyecto y sobretodos si buscas una manera sencilla de mostrar gráficamente algunos datos, este plugin te será muy útil.

7. JarallaxJarallax jQuery Plugin

Con este plugin la navegación vertical de la página es mucho más bonitas. Los elementos se muestran en modo dinámico y más bonito. Este plugin no es necesario para el desarrollo de la página pero si que a veces puede ser útil para mostrar información en nuestras páginas web.

8. Scrollpathscroll path plugin jquery

Otro plugin para crear una navegación aún más dinámica del plugin de arriba se puede obtener con este plugin. En algunos proyectos puntuales puede ser útil crear una navegación particolarmente dinámica.

9. gridaliciousGrid a licious jQuery Plugin

El plugin “gridalicious” permite crear una “grid” bonita y sobretodo Responsive (adaptativa).

10. iosslideriosscript jquery plugin

iosslider es un plugin de jQuery que le permite integrar un control deslizante de contenido multi-navegador personalizable en su proyecto en la web. Diseñado para su uso como un control deslizante de contenido, carrusel, el desplazamiento de banner sitio web o galería de imágenes.

11. Slinky Menuslinky menu jquery plugin

Este plugin es sencillo y ligero y permite crear un “Sliding menu” responsive.

12. Tabslettabslet jquery plugin

Otro plugin sencillo y ligero, que permite crear y personalizar las pestañas. Con este plugin se puede crear animaciones y eventos.

13. Readablereadable jquery plugin

Readable es un plugin de jQuery para ayudarle a crear párrafos de tamaño óptimo para la máxima legibilidad.
Una buena tipografía puede hacer o romper un diseño web, por eso es muy útil este plugin.

14. UnsolderUnslider plugin jquey

También este plugin es un Slider jQuery plugins. Es bonito y muy sencillo para utilizar en las páginas web. Como tamaño es un poco más grande en comparación con Responsive Slides pero tiene unas opciones más.

15. Aground ModalAvgrund Modal jquery Plugin

Avgrund es un plugin de jQuery para ventanas modales. Utiliza un interesante concepto que muestra profundidad entre la ventana y la página. Funciona en todos los navegadores modernos.

16. Monthly.jsjQuery plugins: monthly

Si necesitas utilizar calendarios en un proyecto web, este plugin jquery te puede ser muy útil. También se puede crear eventos en las fechas.

17. paginationjspaginationjs plugin jquery

Un plugin jQuery que nos permite crear un simple sistema de paginación totalmente customizable. Es posible crear cualquier tipología de paginación.

18. Fancyboxfancybox jquery plugin

FancyBox es una herramienta que ofrece una manera agradable y elegante para añadir funcionalidad de zoom para imágenes, contenido HTML y multimedia en sus páginas web.

19. FormValidation (de pago – 50$)FormValidation jQuery Plugin

Un plugin jquery muy bueno para la validación de los campos de los formularios. Este plugin es de pago pero es realmente muy bueno.

20. Sticky HeaderSticky header plugin jquery

Hay muchas manera de crear un menu fijo en el top de la página. Pero este plugin jquery es realmente muy sencillo de usar y hay algunos parámetros que se pueden cambiar para por ejemplo crear una animación al mostrarse el menú.

21. rPagerPage jquery plugin

Este plugin me gusta porqué es muy sencillo pero realmente muy útil para crear una paginación responsive, es decir que cambia según el tamaño de la pantalla.

22. Image Map Pro (de pago 9$)Image Map Plugin jQuery

Este plugin es de pago pero realmente muy bonito y puede ser muy útil en algunos proyecto donde hay que crear mapa en las imagenes. También existe una versión como plugin wordpress.

23. 360 Product View (de pago 10$)360 Product View Plugin jQuery

También este jQuery plugins es de pago pero que en algunos proyectos (como por ejemplo en una tienda online) puede ser muy útil para mostrar los productos.

24. SweetModalsweetmodal plugin jquery

Ante todo hay que decir que hay mucho plugins de este estilo, algunos pesan más y otros menos, depende de lo que queremos nosotros en nuestro proyecto. Este plugin es muy sencillos (pero no muy ligero) para crear ventas modales muy bonitas y impactantes. También he mencionado “Alertify” (numero 4).

25. Tablesortertablesorter plugin jquery

Con este plugin se pueden crear tablas ordenables y es muy sencillo incluirla en un proyecto web.

26. bootstrap-switch.jsbootstrap switch jQuery plugins

Este Plugin también es muy útil pero solamente si esta utilizando el framework Bootstrap porqué utiliza su css para “diseñar” los switch. Es unos de los plugins creado por wpic.

MUY IMPORTANTE: Puede ser que algunos plugins no funcionan con algunas versiones de jQuery. Lo que os aconsejo es mirar en la documentación de cada plugin cual versión se aconseja para cada plugin.

  • Jeny hil

    Gracias por compartir estos hermosos plugins slider …
    Quiero recomendar un complemento más de Slider: Avartan Slider. Es un complemento receptivo para crear un deslizador de imágenes deslumbrante y un deslizador de video para su sitio web de WordPress. Tiene muchas características, como un control deslizante SEO, Truly Responsive, Drag & Drop Builder, etc.

  • Rebeca Cobarrubias

    ¡Muy interesantes plugins! Útiles para quienes, como yo, no saben mucho de como hacerlo directamente con código, ¡Gracias por el aporte!