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.
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!
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
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
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!
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.
- 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 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
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.
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.
JFormVal is jQuery Plugin for form validation. It has been tested on all major browsers and works wonders!
- 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
13. Sexy Curls jQuery Plugin
an open-source jQuery plugin which lets you share in the beauty of the page fold.
14. Apple Slideshow Gallery
A Beautiful Apple-style Slideshow Gallery With CSS & jQuery
15. 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 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
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.
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
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 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 that helps you keep time in a special way.
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
A jquery plugin that allows to make smooth animated menu.
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
This plugin takes a few CSS3 techniques which are:
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
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.
25. 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
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.
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 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.
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
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 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 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
- 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
36. 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
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
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.
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.
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:
45. 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.
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.