Social Block

Teaching my friend Darin Amory about getting started with #Drupal. Anybody have any suggestions for him? :)

DiasporaIdenticaTwitterTumblrDeviantArtYouTubeRSS Feed

Dead SuperHero

Utilizing Weapons of Mass Creation

7 Awesome jQuery Modules For Drupal 7

Drupal IconIt's no secret that one of the big selling points of Drupal is its sheer modularity, and the active development community behind it. Drupal.org has over 2,900 modules just for Drupal 7 alone. One of my favorite modules is Views, because it can show a seemingly infinite amount of variations of data output. It's really useful for lumping together bits of data from Fields and other entities and creating a desired output. But, what do you do if you want to style it using a jQuery plugin? With the following modules, you'll be able to create a multitude of things. Whether you want a slider or an image gallery, the possibilities are endless.

Because the Drupal project site is so large, a good amount of perfectly good modules can drown in a sea of obscurity when stacked against the rest of them. I've decided to hand-pick a few that I think could be particularly useful for designers on the Drupal end of things. Whether you've been in the Drupal community for a long time, or you're a recent convert from Wordpress, Joomla, etc, I'm sure at least one of these modules could end up actually being pretty useful for you.

Views jQFX: This project is looking towards solving the age-old problem: to properly use a jQuery plugin with Views efficiently, a custom module is usually needed for that. What jQFX proposes to do is to provide a simple API for developers to hook the packaged jQuery plugin into The project is a little short on documentation at the moment, but I think this could make some real inroads for developing more custom Views formatters. (For the sake of saving time, the currently available jQFX Views modules are Galleria, ImageFlow, jQFX Nivo Slider, Cloud Carousel, and Cycle

Views Isotope: This is a in-development port of the Drupal 6 version. It makes use of the Isotope jQuery plugin, which is useful for visually sorting items in a grid-like format.

Views Quicksand: Quicksand is similar to Isotope in which it allows developers to align a set of elements on a grid. This one builds upon the Quicksand library, and allows for some very slick visual sorting of elements.

Views Nivo Slider: If you're even reading this article, chances are that you've probably heard of Nivo Slider. Heck, I even use it on the front page to showcase ongoing projects. This module makes it easy to use as a Views formatter. Very handy for when you want to build a slider in a hurry, and you have nodes or an entity of some sort that has an image field for the slider image.

FlexSlider: FlexSlider seems to be very similar to Nivo Slider, but it also brings the additions of Fields functionality to the formatter (Views Nivo Slider technically can only make use of a Text field, an Image Field, and a Link field), and it makes use of the Flexslider plugin rather than the Nivo one. Additionally, this slider bills itself as "The Best Slider Around for Responsive Web Design".

Views Slideshow: This module allows for a highly configurable set of options to create a slideshow or image gallery. Technically, you could also put in a large amount of other things such as nodes, categories, other galleries, and so on and so forth.

Horizontal Slider: This one is a relatively unique take on jQuery sliders, but I could see it working out very well for a corporate site, or a personal one. It uses cropped images as bars that slide and expand while a mouse hovers over them, pushing the other bars away.

Filed Under: 

Add new comment