Drupal Tutorials

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

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!

Commenting on this Tutorial is closed.

Categories:

Comments (22)

Monstor Graphix Design Studio's picture

Tom – this is something I’m really interested in. Ajax is something I really don’t know much about. I’m actually in the process of looking for an ajax solution to a problem I have currently. I would like the ability to have a link within a node that, when clicked, would pull in the content of another node via ajax. I’m sure this is possible, but I don’t know where to start. Can you help me with this?

Here is the link for the page that I want the function on:
http://etexts.diggingwithdarren.com/pirkei_avot/chapter_1

I would like the “[Read Commentary]” links to provide this functionality. Any suggestions?

DrupalSN's picture

Hi Monstordh!

Yeh jQuery is great and the syntax is very simple and logical.
This article should help: http://www.sitepoint.com/article/ajax-jquery/

and some docs here: http://docs.jquery.com/Ajax

Hope that helps
Tom

Monstor Graphix Design Studio's picture

Thanks, Tom!

stellarvisions : communication architects's picture

Thanks for the Cliff Notes Tom.
I know you can dig all over to get this stuff but now I know I can check in on your summary.

—-
Stella Gassaway
principal
STELLARVISIONS : communication architects
http://stellarvisions.com/firm/stella-gassaway

Well I’ve done it! I’ve written my first jQuery plugin. The plugin creates rollover balloon-help style tooltips for any element on your page. While there were a few different tool tips plugins that existed for jQuery, none of them seemed to quite meet my need for a NetFlix (or Google Maps) style talk-balloon popup. This is one of the reasons why so many of us shell out for better internet service, and wireless utilities. It’s worth a payday loan to keep one’s self from having no internet.

Monstor Graphix Design Studio's picture

IsaiahR – so… you gonna share the wealth and post the fruits of your labor so that we can glean the corners of your field?

Drupal is considered the best system for managing content in your website. It is written in PHP language and requires a MySQL database. It can be easily used for building various types of web pages such as simple blogs and large online communities.

Smith,
SEO

Monstor Graphix Design Studio's picture

Tom – here are a couple more modules that are nice:

Views Rotator (which makes use of the Views module)
http://drupal.org/project/views_rotator

Dynamic Display Block
http://drupal.org/project/ddblock

Beetbe's picture

Awesome post. So please spread the world

adodis technology's picture

Hai,

Thanks for sharing this great modules.It will be very useful in developing the websites.

Thanks

http://www.drupal-web-developers.com

Hi guys, I’ve been playing with the jq_eyecandy module. The gradient and curvy corner features are great, but I’ve been running into performance problems that seem to be related to this. Should I expect better performance on graphics for this that the jquery way?
poquer

Thanks for sharing the information.I will try out this on my own. wine tasting clubs.
Regards,

Joomla and WordPress is my best friends in building webs all these years. I can meet almost all my clients request based on those two. Tried others like oscommerce and even Drupal, but back to those two right away.

Adlin,
cheap laptop

Thanks for sharing the information.
People looking for low fee cash advance loans usually need the money as fast as possible. These loans are generally required to pay a late bill, handle a financial or medical emergency or cover a payment between paychecks.

Thank you.. it’z a grate plugins..hover tooltip is very useful for me .. auto parts

Very useful tips here. I really appreciate you taking the time to teach people with this tutorial.

-Bob
washing machines

Amazing jQuery, it has given me so much surprise.
fat burning furnace review

I didnt know the JQuery existed. It just goes to show again, that Drupal is the best platform out there and this is why the higher class companies use it.

baby booties

Adodis Technology Private Ltd's picture

Amazing jQuery,So please spread the world.Keep on sharing
http://www.module-node.com

Carousels can be horizontal or vertical and a stack of settings to allow you to customise the carousel.
jumpmanual and Mp3 rockets