Need some help with your project? Contact me

10 jQuery based Drupal modules you may not know about

So lately I’ve been coming across a lot of jQuery plugins and also some interesting Drupal modules that integrate them. It is more and more commonplace to see websites sporting all sorts of cool looking jQuery magic. Drupal is no worse I gotta tell you.

I put this article together to show you some modules that you may not know yet but that integrate some of that jQuery goodness you might like. I know I also sometimes see some plugin out there and immediately think boy, this would look nice in a Drupal context. And what do you know? Already a module there at least in its dev version :)

So here you have them: 10 Drupal modules that one way or another integrate jQuery plugins.

1. Isotope (Views Isotope)


These are actually 2 modules. Isotope.js module integrates the actual plugin into the Drupal library, while Views Isotope integrates it with Views. Now, this jQuery plugin is a sweet thing to have and more and more websites and themes out there are using it, so check it out.

2. FooTable


I mentioned this module in a post I wrote a while back in which I talked about some nice modules that go with Views.In case you don’t know what it’s about: responsive tables! Because tables do not need to be the most rigid piece of HTML out there anymore.

3. Joyride JQuery for Drupal Site Tours


Now this is a funky module. It integrates Zurb’s Joyrider jQuery plugin and with the help of the Context module lets you create a tour of your website. If you don’t know what I mean yet, check out this demo. It’s pretty awesome.

4. jQuery expander

This module integrates the jQuery expander plugin with your Drupal fields. What this means is that it helps you have expandable/collapsible fields on your site. Pretty cool so check it out.

5. FullCalendar


Because we all can use calendars right? FullCalendar integrates with Views and provides a display to show nodes using the FullCalendar jQuery plugin. Can come in handy!

6. jQuery File Upload


This cool module implements the jQuery File Upload plugin as a block on your Drupal site. It provides quite a complex file uploading framework which includes multiple uploads, progress indication, cancelling etc. Also, its design is based on Twitter Bootstrap.

7. jQuery Waypoints

A cool module that implements the tiny Waypoints plugin with your Drupal site. What this does is trigger a specific jQuery function whenever you scroll to an element. It looks pretty cool but you can check out some examples of how this works.

8. jQuery selectBox


This is a module that integrates with the selectBox plugin to provide some nice styling for your select elements. You can check out a demo here but all in all it looks pretty cool.

9. jQuery LocalScroll

Don’t you like it when you go to a website and you click on a button on the bottom of the page and it nicely slides you to the top instead of jumping you there directly? This is what the jQuery LocalScroll plugin does. And the module integrates that in Drupal.

10. jQuery Easing

This one is more for the developers out there as it does not provide any ready made jQuery magic. What it does do is make available for other modules jQuery Easing, a plugin that provides some advanced easing options.

Bonus: Colorbox


I know there are a lot of awesome and highly used jQuery modules out there but I chose this one for the bonus. I think Colorbox is simply awesome - it looks and works great. And even though maybe you already know about it, I want to remind you of this cool module.


Great list, but you're missing the best one in my opinion!

Very nice indeed! Didn't know about it.


Very helpful indeed, thanks for compiling.

Wasn't aware of Chosen either. Sur-weet :)

Masonry -
Views Infinite Scroll -

Work even better when knit together

I know about both of them. However, I chose to go with Isotope. It has the Masonry effect plus a kick ass filtering and sorting feature as a jQuery plugin.


Nice comment box from drupal itself! :D

Add new comment

You can post comments in Markdown and basic HTML tags.
For code blocks, wrap your code within '~~~'. For example:
$var = 'my variable';