45+ Fresh and Useful jQuery Plugins to Improve the Look and Feel of Your Website

September 20, 2016 · 3 comments

by Dustin Betonio

There are plenty of plugins for jQuery addressing nearly any front end need you can think of. The apparent abundance of plugins available on the other hand does not stop creative and skilled developers from creating even more goodies for the jQuery community.

jQuery is one of the most popularJavaScript framwork out there. It is very easy to use and full of cool features. It can be really hard for people with limited coding skills to use JavaScript, but I believe jQuery was a game changer in this area. It encapsulate all the tricky stuff and its plugin architecture have encouraged many skilled developers to offer amazing features for free by creating jQuery plugins. In most cases using a plugin and enabling the cool features requires absolutely minimum programming skills.

In this article we will feature fresh and useful jQuery plugins that will help you add beautiful effects that will change the look and feel of your website. Some of these plugins are not referred and yet  its not proper to miss it. Enjoy!


ElegantThemes
ThemeForest

Advertisement

1. RocketBar – A jQuery And CSS3 Persistent Navigation Menu

The way it works is that when a user lands on your page they get to see the default navigation as usual. If they decide to start scrolling however, the top navigation detaches itself from the page and follows you as you scroll down. If you decide to go back to the top of the page (for whatever reason) the navigation goes back to the way it appeared before. This technique isn’t just limited to showing you the default menu in a way that detaches itself from the page, but the code could very easily be modified to show a completely different menu for those that scroll down (eg. just the more popular items in your site navigation and perhaps some share buttons).

2. Super-Easy Animated Effects with jQuery

One of the lovely things about jQuery is it makes it ridiculously easy to animate page elements. Whereas you previously had to mess around with setTimeout() or setInterval(), and lots of JavaScript code, with jQuery you can work wonders with just a line or two of code.

In this tutorial we’ll cover some of the more common effects you can achieve with jQuery

3. jQuery YouTube TubePlayer Plugin

Basically this jQuery plugin implements the YouTube Player API pretty much to spec. I’ve omitted some functions but believe I have captured most of the functionality a developer will need to implement a youtube player.

4. CSS3 Rounded Image

CSS3 Rounded Image

This one is actually a small trick of jQuery which does the magic tag wrapping the image to generate a rounded border and inner shadow by wrapping a span tag around with the original image as a background-image. Nice trick!

5. Uploadify

Uploadify

Uploadify is a jQuery plugin that allows the easy integration of a multiple (or single) file uploads on your website. It requires Flash and any backend development language.

6. jQPlot

jQPlot

jqPlot is a plotting and charting plugin for the jQuery Javascript framework. jqPlot produces beautiful line, bar and pie charts with many features:

  • Numerous chart style options.
  • Date axes with customizable formatting.
  • Up to 9 Y axes.
  • Rotated axis text.
  • Automatic trend line computation.
  • Tooltips and data point highlighting.
  • Sensible defaults for ease of use.

7. ezMark: jQuery Checkbox & Radiobutton Plugin

ezMark: jQuery Checkbox & Radiobutton Plugin

ezMark is a jQuery Plugin that allows you to stylize Radio button and Checkbox easily. Its very small (minified version is ~1.5kb) compared to other similar scripts. It has been tested and works on all major browsers (IE 6/7/8, Firefox, Safari, Chrome) and it gracefully degrades.

8. jQuery color plugin xcolor

jQuery color plugin xcolor

This plugin implements an extensiv color parser and a featureful set of color-manipulation methods. There is also an animate() extension to smooth CSS colors. Another useful method isReadable() completes the whole, by allowing you to check if a text is readable on a certain background. The color value can also be passed in different color models: RGB, HSV/HSB, HSL and their adequate alpha extensions.

9. Ingrid

Datagrids don’t have to be difficult to use anymore – say hi to Ingrid. Ingrid is an unobtrusive jQuery component that adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more) to your tables.

10. jFormval


JFormVal is jQuery Plugin for form validation. It has been tested on all major browsers and works wonders!

Main features:

  • One line validation with method chaining
  • Bundle for error messages in different languages
  • Auto change css style of elements
  • Easy configuration

11. jQuery 2D Transformation Plugin

This plugin uses CSS3 transform effects to help you apply these effects to all browsers which support CSS3. Don’t worry about Internet Explorer, this script works well on IE 5.5+. You can use this plugin as a javascript animation library for any project.

12. jQGrid

jQGrid

jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web. Since the grid is a client-side solution loading data dynamically through Ajax callbacks, it can be integrated with any server-side technology, including PHP, ASP, Java Servlets, JSP, ColdFusion, and Perl.

13. Sexy Curls jQuery Plugin

Sexy Curls jQuery Plugin

an open-source jQuery plugin which lets you share in the beauty of the page fold.

14. Apple Slideshow Gallery

Apple Slideshow Gallery

A Beautiful Apple-style Slideshow Gallery With CSS & jQuery

15. QuickFlip 2

QuickFlip 2

QuickFlip works as the name. It’s very easy to implement and it provides an attractive alternative to other slower and more resource heavy Flash and jQuery flip animations. This plugin is really an effective way to flip content panel.

16. jQuery TOOLS

jQuery TOOLS

jQuery Tools is a collection of the most important user-interface components for modern websites.SlideDeck is a free jQuery slider plugin for making a web slide show presentation.

17.  Unlimited Scroll using the Twitter API

Unlimited Scroll using the Twitter API

Here’s a small jQuery example that features unlimited scrolling. Try scrolling the left division, and see the next tweets from my Twitter timeline get loaded automatically.

18. Canimate

Canimate

With Canimate, you can take any series of images and, using the Canimate naming convention, have them animate at any speed. You can treat the element that holds the image just like any other, including giving it borders, dragging it, etc. Give it a try!

19. Sponsor Flip Wall

Sponsor Flip Wall

Designing and coding a sponsors page is part of the developer’s life (at least the lucky developer’s life, if it is about a personal site of theirs). It, however, follows different rules than those for the other pages of the site. You have to find a way to fit a lot of information and organize it clearly, so that the emphasis is put on your sponsors, and not on other elements of your design.

20. Pines Notify jQuery Plugin

Pines Notify jQuery Plugin

Pines Notify is a flexible jQuery notification plugin which is very easy to implement and having bunch of option for developers to display any kind of notification. The script is fully customizable since it uses the jQuery UI CSS library for styling.

21. A Colorful Clock

A Colorful Clock

A colorful clock that helps you keep time in a special way.

22. Contactable

Contactable

Contactable is a jQuery plugin designed to make contact/feedback forms simpler and more accessible. This plugin will enable you to create a contact form on any page of a site with minimal effort. If you have ever seen the feedback forms provided by kamypyle you will be familiar with the technique they use, however contactable makes this process even simpler by overlaying the content onto your page quickly and easily with a slide effect and inline validation.

23. Smooth Animated Menu

Smooth Animated Menu

A jquery plugin that allows to make smooth animated menu.

24. LumeBox

LumeBox

This is an alternative lightbox script for jQuery which can parse the RSS of the post or page of your blog then displays images inside them (off course only with specific image group you defined). The script will open the image in popup just like other lightbox scripts.

25. Crazy Dots jquery plugin

Crazy Dots jquery plugin

This plugin takes a few CSS3 techniques which are: rotate, border-radius, and linear-gradients to make an ajax loader like effect. The plugin works even with IE browsers(depends on jQuery 2D Transformation Plugin above)

23. jQuery Apple-like Retina Effect

jQuery Apple-like Retina Effect

Inspired by Apple iPhone 4 promotion page but after publishing this tutorial, Apple already implemented this effect to their product feature page here. The tutorial show us how to implement a nice effect which can zoom-in the content in a magnifier. You can follow this tutorial to build a jQuery plugin for your own project.

24. CrossSlide

CrossSlide

CrossSlide is a jQuery plugin implementing in 2kB1 of Javascript code some common slide-show animations, traditionally only available via Adobe Flash™ or other proprietary plugins. CrossSlide builds upon jQuery’s animation facility, so it is as portable across browsers as jQuery itself.

25. jQuery Constant Footer

jQuery Constant Footer

This plugins will convert a static HTML footer into a fixed-position footer that is glued to the bottom of the browser window. The feature that I like much is you can parse the feed and display as a stories on the footer which is really useful for blogs, magazines…

26. UI Elements: Search Box with Filter and Large Drop Down Menu

UI Elements: Search Box with Filter and Large Drop Down Menu

A search box with a filter has a slick looking details. This search box will reveal a drop down menu after the user clicks into the input field when implemented to the page. With the filter built-in, users can select options for searching.

UI Elements: Search Box with Filter and Large Drop Down Menu

A good option for sites with a lot of navigation items. It’s such a sexy mega drop down menu element you should use.

27. BubbleUp jQuery Menu Plugin

BubbleUp jQuery Menu Plugin

BubbleUp is a jQuery plugin released from a jQuery tutorial Learning jQuery: Your First jQuery Plugin which helps you to create your first jQuery plugin. It’s not just for demonstration, it’s useable. With BubbleUP, images in a list will enlarge with a smooth animation when you move your mouse over it. Then, if you move the mouse out, it will reset to the original size with the same smooth animation. Imagine the Mac Dock effect, although this plugin’s effect is not awesome like that, it’s light weight for such a similar zooming effect.

28. gvChart

gvChart

gvChart uses Google Charts API to create interactive visualization by using data from the HTML table tag. There are five types of the charts at your choice: AreaChart, LineChart, BarChart, ColumnChart and PieChart.

29. Simple unlimited levels vertical drop down navigation menu jquery plugin

Simple unlimited levels vertical drop down navigation menu jquery plugin

Simple unlimited levels vertical drop down navigation menu jquery plugin

30. jDesktop

jDesktop

It’s a complete framework for making desktop-like environment in a web browser with very cool effects and animations. Remember to check the “Go 3D” effects to see how awesome it is.

31. AeroWindow – Plugin for jQuery

AeroWindow – Plugin for jQuery

AeroWindow generates very cool Boxes in the Aero Style, inspired by the style of Window7. The popup window offers the usual options and full functionality similar to Windows modal windows.

32. Cloud Zoom

Cloud Zoom

Cloud Zoom is a jQuery image zoom plugin, a comparable alternative to products such as Magic Zoom. Compared to the popular jQZoom plugin, Cloud Zoom is smaller, has more features and more robust compatability across browsers.

33. Nivo Zoom

Nivo Zoom

Features

  • 5 different zoom types
  • Optional overlay support
  • Supports HTML captions
  • Simple clean & valid markup
  • Loads of settings to tweak
  • Packed version only weighs 4kb
  • Free to use and abuse under the MIT license

34. jQuery Ajax Poll

jQuery Ajax Poll

In a complete tutorial, the author explains in detail how to make an ajax-based poll system with PHP, MySQL and jQuery. You can simply take the javascript part and this script can be implemented to any website quickly to interact with PHP and MySQL to create an ajax-based poll system.

35. jTweetsAnywhere

jTweetsAnywhere

jTweetsAnywhere is a jQuery Twitter Widget that simplifies the integration of Twitter services into your site. The scripts comes with a bunch of features; As its name, you can implement an almost complete Twitter with just few lines of Javascript.

36. Beautiful Photo Stack Gallery

Beautiful Photo Stack Gallery

A fresh idea for a photo gallery. The idea is to show the albums as a slider, but in the stack view. We can browse through the images by putting the top most image behind all the stack with a slick animation. However, the plugin works if you use a Webkit browser like Chrome or Safari because of some Webkit properties. However, if you use it together with jQuery 2D Transformation Plugin above, you won’t worry about cross browser compatibility anymore.

37. Blur Gallery

Blur Gallery

This is little plugin for soft image blur effect on page load (and ‘clear’ on hover/rollover). The idea is pretty cool, the way to make blur effect is duplicating the original image to many then set opacity for each copy.

38. jQuery content feature like MailChimp

The plugin is using jQuery Cycle plugin to scroll images

39. Colortip

Yet another jQuery tooltip plugin which uses the title attributes of elements as a series of colorful tooltips. Six color themes are available, so you can easily match it with the rest of your design. Not much different to other plugins we knew, but it’s just fancy

40. jQuery Corner Demo

Have you ever noticed how designers seem to love rounded corners? To do this you used to have to make all kind of images then use some fancy CSS to get it all looking right. And once you get it working in Firefox or Safari you have to do it all over again for Internet Explorer. Good times.

jQuery corner is a cross-browser solution to those woes.

41. jQuery Hint

You will see a lot of web sites with search boxes have text already populated inside of the field and when you select the input text box it disappears and reappears when it’s not selected.

This tutorial will show you how can add a small amount of jQuery to add this feature to any of your web sites.

42. Overscrol

Overscroll is a jQuery plug-in that mimics the iphone/ipad scrolling experience in a browser. The plug-in adds a draggable drift to overflowed DOM elements as well as a set of fading ‘thumbs’.

43. jQuery Cycle Plugin

The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more.

44. jQNotice

A little small plugin for jQuery that allows you to show some notifications at the top of your website with just a simple line. You can use it by just call the following method:

jQnotice('Your notification');

45. jQuery Form Labels Plugin

jQuery Form Labels Plugin

Another awesome jQuery plugin to make caption for input fields. This jQuery plugin uses the form label as a caption. However, you have to implement jQuery UI for the plugin works.

46. Showloading

Showloading

This plugin is designed to show a loading image over a specific area of the screen (e.g. a specific div or other dom element) while an ajax request is running.

Want more? If you use Joomla 1.6 you also need a good Joomla 1.6 Template so we have gathered a list of great themes. Also you should know that improving your webshop is not very hard if you choose a great wp e-commerce theme.

 

Author : Dustin Betonio

Dustin Betonio is a Translation Management graduate at University of Mindanao. His earlier career was devoted on customer service outside the information highway. Currently studying Law in the same University.

{ 1 comment… read it below or add one }

prabhat June 20, 2012 at 11:00 am

superb.

it helps me very much

thanx

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

{ 2 trackbacks }

Previous post:

Next post:


Web Analytics