If you don’t already know, it’s not too late – jQuery is awesome.
It comes in diverse forms and is applicable in almost any environment.
This article is a mighty collection of jQuery plugins which many web designers will love and use in their designs.
This collection is stacked orderly with image gallery plugins, typography plugins, navigation plugins, slideshow and photo album plugins and many other kinds of plugins.
This post also contains tutorials which are a must see for newbie designers.
This article contains
- jQuery Plugins for Image Galleries
- jQuery Plugins for Typography
- jQuery Plugins for Photo Slideshow
- jQuery Plugins for Navigation
- e-Commerce jQuery Plugins
- jQuery Plugins With Parallax Effect
- Infinite jQuery Scroll Plugins
- jQuery Tables and Plugins
- Miscellaneous jQuery Plugins
- Extremely Useful jQuery Tutorials
Best jQuery Plugins for Image Galleries
Every photo based website needs a photo gallery, and the best photo gallery plugins. It’s not easy to create impressive image galleries but these plugins will point you in the right direction. Some of these plugins also come with a tutorial.
This can work as a slideshow or a photo album, everything depends on how you use it.
I loved this gallery. Versatile, stylish yet elegant.
A routine image gallery. Everybody needs it.
Flipping book style album.
This is a custom gallery that scans a computer folder for images and creates a slick gallery using the images in the folder. It uses PHP, CSS3, jQuery and Lightbox plug-in.
This is somewhere in between a gallery and a slideshow, but since it takes up a full webpage, it will be considered a gallery. The screenshot tells all about the output result so no need to define it.
This gallery became very a popular a year ago. The reason being that it contains amazing effects and it is also perfect usability wise.
containersPolaroid effect is made by slightly rotating the images. It works as an album and as a gallery as well.
This is a unique, slightly non-serious but attractive kind of gallery.
Click on any image to enlarge it. Click it again to go back.
This is an old fashioned responsive (even though responsive is a new trend) design for a portfolio gallery.
This gallery contains four different layouts, including Pinterest and metro style.
This design of galleries became quite popular a few years ago. These days, they aren’t that common.
This is a jQuery slider plugin, not really a gallery plugin but it can work either way.
This plugin costs $9.
This plugin has a price of $6.
This plugin doesn’t come free. It will take $14 out of your pocket.
This plugin costs $7
This plugin comes at a cost of $9
$14- that’s how much this plugin will cost you. It isn’t free.
This plugin is very elegant, stylish without being flashy.
A very stylish plugin provided for free.
Elastislide – A Responsive jQuery Carousel Plugin
This is a carousel, it can also work as an album.
Best jQuery Plugins for Typography
When the internet was first launched, webpages didn’t have pictures at all… and that trend is coming back. This is because images cannot adjust according to screen resolution, nor are they search engine friendly.
Text however adjusts itself like water adjusts itself according to its contain. It can be squeezed, expanded, moved around, broken and rejoined. These days every one is focusing on typography based flat designs for better usability.
A cool little script that changes the content height/width to fit the best on the screen.
CSS doesn’t give complete down-to-the-letter controlling but no tension, we have jQuery for that. Lettering.js provides controls for:
- Kerning Type
- Editorial Design
- Manageable Code
- Complete Control
CSS3, meet kerning. Kerning, meet CSS3. You can Kern, stylize, transform and scale your web type with real CSS3 rules, automatically. All you have to do is add: <script src=”kerning.js”></script> in to your webpage.
If you used any vector design software, you’d know what it means to fit text along a path. This plugin does exactly that. Fits your text along a arc, circle or such another shape.
If you’ve ever worked in newspapers, you’d know what slabbed text is.
This is my favorite jquery plugin related to typography. And I recommend you to use it.
As the above one is made only for headings, this plugin is made mostly for the content part.
This jQuery typography plugin allows you to set optical kerning for any font on your website. If you’re longing for beautifully laid out text that today’s browsers just don’t provide, this is the plugin for you.
Open this page, locate this text in the screenshot, stare at it for a while.
We all know about indent and outdent. Behold, this is the time for exdent. Create stylish blockquotes.
Kind of a strange effect, but they come very handy sometimes.
Best jQuery Plugins for Photo Slideshow
These slideshows add ‘wow’ factor in your websites, but that’s not all. Apart from this ‘wow’ factor, a slider can also add a huge amount of user interactivity to your sites and that’s why they are loved by clients.
I think the screenshot says it all. The shape and stacking of the pictures is where the beauty of this jquery plugin lies.
Simple effect, highly interactive. Perfect for online magazines and large portals. You can also customize it as an image gallery.
This is a carousel, not particularly a slideshow but this can work as a slideshow strip so I added it.
I loved the navigation within this slideshow, and that navigation is the reason I added it to this list.
This responsive and touch-enabled grid will take $13 out of your pocket.
This is one of my favorite plugins. Large size, all thumbnails and text overlays.
3D Rotation Viewer
This one is not really a slideshow, but it can be used as one. I loved the effect so I included it in the list.
Best jQuery Plugins for Navigation
Navigation is the backbone of any web design. It is the hub of all interactivity with the user. And that’s why it has to be paid so much attention.
My suggestion is that in navigation, don’t go for style but usability. However, I’m adding navigation jQuery plugins for style as well as usability.
In this section, you’ll find
- Normal Navigation Bar Plugins
- Free Off-Canvas Navigation Bar Plugins
Normal Navigation Bar Plugins
This isn’t really a navigation menu but a navigation panel. Check out the demos, you’ll know what I’m talking about.
This should be one of the perfect examples of jQuery plugins for navigation. This creates floating bar so it always has high visibility.
This contains Photoshop tutorial to learn how to design this menu, then coding tutorial for development of the tutorial and then it also includes downloads for both of these tutorials. Excellent resource for learning web designers.
This resource contains two types of impressively designed menus. Smooth Ajax adds the spark, blue is the color, rest is history.
This is another one of those navigation panels, this can be used to display featured content as well. You roll over the mouse pointer and it expands.
For giving the website a cool funky look, this navigation should be the very best solution.
You can see the result navigation in the image, what else do I need to say 🙂
If you are fed up with the routine kind of navigations, then go for this. This is nothing like routine. It is designed mimicking the Mac OS X styling.
This is my favorite navigation menu from the selection. The image expands on mouse pointer hover. The text is very visible, large.
Free Off-Canvas Navigation Bar Plugins
These days, the effect has gone a step ahead. Now, it is not associated with Medium-like websites. Now, it is being used in all kinds of websites. All thanks to its space-saving, dynamic style.
The plugin works like this, it stays folded up and it is nowhere visible on the whole web page. But when the user clicks a particular button usually identified with three hyphens, even though trend is changing, the menu pushes the whole canvas (web page) away and loads itself.
This kind of menus are extremely handy if you are designing a responsive web design for mobile devices.
Pushing is not necessary however, the menu can slide over the web page, but then it will hide the contents below it.
Free for personal use, this is a mighty navigation bar plugin that can cater all your needs.
A quick and easy way to add a contextual Ajax sliding panel to your site.
It will slide the navigation panel as well as any containers given the .push class (or a class of your choosing in the settings).
The best jQuery plugin for app look-alike on- and off-canvas menus with sliding submenus for your website and webapp.
Recently, tutplus network did a tutorial using mmenu.
Side Toggle Menu lets you add a side bar menu to your page that slides in from the left or right edge of the browser window.
This is a hardware accelerated slide menu example. It is modeled after Facebook’s famous menu.
jPanelMenu is a jQuery plugin that creates a paneled-style menu (like the type seen in the mobile versions of Facebook and Google, as well as in many native iPhone applications).
You will be able to create multiple sidrs on both sides of your web to make responsive menus (or not, it works perfectly on desktop too).
This website did not provide a live demo, however, it did give me an animated GIF.
Best e-Commerce jQuery Plugins
e-Commerce jQuery plugins help web designers to engage more visitors, deliver better user experience and make the website look better.
All these plugins are 100% (almost all of them are free even for commercial use as well). You can build your online store within hours. And the good thing is that you don’t have to be a coding maestro to use these jQuery plugins to their fullest extent.
These plugins help you implement, validate and maintain a shopping cart based online shop.
It makes the add-to-cart section of online shopping much easy and user friendly. It is compact in design, very easy to implement and only minimal HTML required.
Product Colorizer is a light-weight solution for users to quickly preview a product in different colors. The plugin uses only two images per product to create the effect.
This jQuery plugin can create drag-and-drop effect on any website. It is particularly useful if you are developing a shopping cart based website.
The implementation of this jQuery cart features drag and drop functionality, updating the cart to reflect the items added to it and also updating the quantities without duplicating the item within the cart.
Comparatively, this is an old tutorial but you will still find it quite useful.
This jQuery plugin takes advantage of Google Maps API version 3 to create an easy to implement store locator. No back-end programming is required, you just need to feed it KML, XML, or JSON data with all the location information.
This is plugin and a tutorial. You can create an item slider with CSS animations and some jQuery. The idea was inspired by the Aplle product slider where several little items fly in with a bouncing animation.
This creates multiple sliders for each of gallery item. It is ideally designed for e-commerce websites but I believe that design studios can use this plugin quite effectively.
This is a drag-and-drop jQuery add-on for e-commerce websites, or one page websites.
Best jQuery Plugins with Parallax Effect
Parallax has taken the web by storm. Everybody is talking about and everybody wants it in their website. These are a few plugins which you can easily add in any website add that parallax spark everyone is chasing.
Here are 50 Best Parallax Scrolling Examples, do check them out if you like parallax effect.
A classical parallax scrolling effect. This is a plugin you could need when a client demands parallax effect and you don’t need a quick way to meed his/her demand.
You can find the live demo on the page. Just check out the header.
The best thing about this jquery plugin is that it is very well documented so you never have the trouble of finding, fixing or editing and updating the code.
Excellent result, easy to implement. What else do you want?
Infinite jQuery Scroll Plugins
Infinite scroll is a method of displaying content on a webpage, or on a section of a webpage.
What happens is that when the webpage visitor reaches the end of the page, the page loads in more content. Social media sites like Facebook and Twitter use this technique for displaying content. Whenever you reach the end of the newsfeed/ stream, the site immediately loads more content so they can waste more of your time… did I say too much?
Getting back to the topic, this technique can be applied through jQuery and its subordinates, such as Ajax.
These are all free plugins. You can use these jQuery plugins on any website.
You can modify these plugins and you have the option of checking demos before choosing which plugin to use for your project.
Create Infinite scroll effect using jQuery.
jQuery Tables and Plugins
HTML has the capability to create tables… but not interactive tables. We need jQuery tables to make our tables dynamic, animated and more user-friendly.
For creating jQuery based tables, we need jQuery table creators and jQuery plugins for tables. That is exactly what we are sharing today. And all of those are free.
These jQuery tables and plugins are useful for sorting data in a more efficient and business friendly way.
Now you can add more data than a simple HTML table can imagine, and you can even make it look better than a routine HTML table.
These table makers and table plugins are fairly simple to use. If you can work with simple HTML and CSS, you can easily handle these tools. So get, set, go!
This is a very power-packed jQuery plugin and it is highly customizable. Probably the most customizable plugin in this jQuery table plugins list. This is based on the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.
Table plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell.
jTPS is a datatable jQuery plugin that offers pagination, animated scrolling through pages and intelligent natural sorting capability. The development version is currently 15KB.
This TableDnD plugin allows the user to reorder rows within a table, for example if they represent an ordered list (tasks by priority for example).
A simple jQuery plugin that transforms an HTML table into a graph using the flot library.
Fixed Header Table in its simplest form displays a fixed header for any valid table mark-up. This is an active jQuery plugin project so expect new features and improvements to be released.
jExpand is ultra lightweight jQuery plugin that will make your tables expandable.
Miscellaneous jQuery Plugins
These are mixed types of jQuery plugins that can add a lot of usabilities and/or dynamism to your website.
It displays a large of the image on hover.
Displays various styles of hovers over images and albums.
I loved this one for displaying featured content on a website.
Hover over any image and it slides away.
Almost like Cloud Zoom, but this one is a little funky while that one was pretty elegant.
A lightweight plugin which adds a social media sharing bar.
A very cool animation effect. Works great on banners and objects that hover over the main web page (such as “follow us on twitter”).
Cool form maker plugin with plenty of themes and styling options.
A unique plugin which enables a full website tour using jquery.
The title says it all…
Though I’m against using a custom player, since every one can recognize the youtube player but a custom player might be just a little confusing for the visitor… but nevertheless it sounds intriguing.
Extremely Useful jQuery Tutorials
jQuery is a wonderful blessing for developers and designers through which they can easily pour life, make stuff look attractive and give good functionality to their sites.
The best part is that it’s not even hard to understand or learn. jQuery is open source and there are lots of free available plugins available as well.
Here are some of the best online freely available jquery plugins and tutorials.
This is a tutorial that explains how you can develop an impressive jQuery slider. Of course, you can get the code and use it as a plugin.
This is a very useful image rotator, slideshow, featured content container etc. etc. etc. It contains image size image, thumbnails of the rest, titles of the rest and image description as well as the title of the current slide.
The vintage style of billboards in the sports stadiums.
jQuery Demo: Creating A Sliding Image Puzzle Plug-In
Animate Curtains Opening with jQuery
Sexy Drop Down Menu w/ jQuery & CSS
Building a jQuery Image Scroller
jQuery Virtual Tour
Creating a Keyboard with CSS and jQuery
Sliding Boxes and Captions with jQuery
This tutorial is my personal favorite, u can stylize your images with divs/boxes and make superb , very attractive effects by simple jquery. The tutorial belongs to www.buildinternet.com
Create an Image Rotator with Description (CSS/jQuery)
This is a very very handy and attractive master piece of jquery and css. You can pour life in your site’s homepage by using this image rotator. All your features of site can be well explained in limited space too. This tutorial Belongs to www.designm.ag
Anything Slider jQuery Plugin
AnythingSlider is an attempt at bringing together the functionality of all of those previous sliders and adding new features. It is an awesome Plugin/ Jquery you can make animated slider effect with images, text, text and images together, very well written by www.css-tricks.com
Creating a polaroid photo viewer with CSS3 and jQuery
This example is making use of CSS3 and jQuery. It really shows the effect when combining two powerful techniques.
Creating An Infinite Scroll Effect With jQuery And ColdFusion
Watch Demo in Video
Animated Portfolio Gallery
In this tutorial jQuery is used to create awesome animated portfolio gallery with scroller for thumbnails and a content area where we will display details about the portfolio item. Images will appear as an overlay when we click to enlarge them. The heading will be animated from the top, fade out the previous image and slide the descriptions from the slides.
Full Page Image Gallery
In this tutorial you will create a stunning full page gallery with scrollable thumbnails and a scrollable full screen preview using jQuery and CSS3 Webkit properties.