November 10, 2024
Great jQuery plugins for Drupal

Anyone who has ever developed with Drupal will know that jQuery was an amazing addition to the Drupal toolkit as of Drupal 5, but you have to be a developer to make use of Drupal as there’s already a great selection of modules using some great jQuery plugins.

jCarousel Lite
This great little module is a lightweight version of the jCarousel plugin that allows you to create scrollable lists of content which can be a good way of fitting lots of content in a small area.
jCarousel Lite
Carousels can be horizontal or vertical and a stack of settings to allow you to customise the carousel.
No coding needed as it is already integrated with the views module and node module.

The easySlider module also offers similar functionality.

Module: http://drupal.org/project/jcarousellite
Plugin: http://www.gmarwaha.com/jquery/jcarousellite/
Demo: http://www.gmarwaha.com/jquery/jcarousellite/#demo

jQuery Media
The jQuery Media plugin will automatically turn links to media into their embedded media equivalents. Works great with the file field CCK module to for example convert URLs to Flash Videos into a Flash Video player.

Module: http://drupal.org/project/jquery_media
Plugin: http://www.malsup.com/jquery/media/
Demo: http://www.malsup.com/jquery/media/#demos

Content Glider

Great jQuery plugins for Drupal

Featured Content Slider
This module provides a cool feature content gallery block containing a teaser and title from your selected content types.

No views integration yet which is a shame but is is planned for the near future.

Module: http://drupal.org/project/content_slider
Plugin / Demo: http://www.dynamicdrive.com/dynamicindex17/featuredcontentglider.htm

Thickbox or jQuery Lightbox
Both these modules offer very similar functionality and provide pop-up overlays for your images and HTML code.
Both are lightweight and offer a great alternative you standard pop up windows.

There are plenty of modules offering similar functionality: http://drupal.org/node/266126

Thickbox
Module: http://drupal.org/project/thickbox
Plugin / Demo: http://jquery.com/demo/thickbox/

jQuery Lightbox
Module: http://drupal.org/project/jlightbox
Plugin: http://www.huddletogether.com/projects/lightbox2/
Demo: http://www.huddletogether.com/projects/lightbox2/#example

Cluetip, jTooltips & Hovertips
All three of these modules provide roughly the same functionality of hover tips for images and HTML content. They are all available for Drupal 5 and 6 so which one you choose is up to you!

Cluetip
Module: http://drupal.org/project/cluetip
Plugin: http://plugins.learningjquery.com/cluetip/
Demo: http://plugins.learningjquery.com/cluetip/demo/

jTooltips
Module: http://drupal.org/project/jtooltips
Plugin: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
Demo: http://jquery.bassistance.de/tooltip/demo/

Hovertips
Module: http://drupal.org/project/hovertip
Plugin / Demo: http://www.dave-cohen.com/node/1186

PNG Fix

PNG Fix
This module fixes IE 5.5 & 6’s bad rendering of transparent PNG images. Works with embedded images (img tags) and CSS background images.

Module: http://drupal.org/project/pngfix
Plugin / Demo: http://jquery.andreaseberhard.de/pngFix/

Feedback

Feedback 2.0
This module provides a cool feedback tab and form on each page of your site to allow users to give quick and useful feedback on the current page they are on.
The form uses fixed positioning and is submitted using Ajax (no page refreshes)

Module: http://drupal.org/project/feedback

Hide Submit Button
Useful little module that prevents users submitting the node form more than once by hiding the submit button after it’s clicked.

Module: http://drupal.org/project/hide_submit

Live
Provides live previews for nodes and comments by using Ajax to submit and render the preview with needing to refresh the page.
This helps speed up and simplify the node and comment submission process.

Module: http://drupal.org/project/live

Text Size

Text Size
Allows user to increase and decrease text size throughout a Drupal site making it better for Web Accessibility.

Font size settings are remembered from page to page using Javascript cookies.

Module: http://drupal.org/project/textsize

And the list could go on and on but I’ve tried to pick out cool modules that are available for both Drupal 5 and 6, I know Drupal 6 has even more jQuery based modules which I’ve not mentioned.
Feel free to add your favourite jQuery based modules as comments below!