115+ Must Have jQuery Plugins


If you don’t already know, it’s not too late – jQuery is awesome.
It is a JavaScript library which helps web designers and developers control HTML events, animations, and other interactions on web very easily.

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

  1. jQuery Plugins for Image Galleries
  2. jQuery Plugins for Typography
  3. jQuery Plugins for Photo Slideshow
  4. jQuery Plugins for Navigation
  5. e-Commerce jQuery Plugins
  6. jQuery Plugins With Parallax Effect
  7. Infinite jQuery Scroll Plugins
  8. jQuery Tables and Plugins
  9. Miscellaneous jQuery Plugins
  10. 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.

Responsive Thumbnail Gallery Plugin

This can work as a slideshow or a photo album, everything depends on how you use it.

Responsive Image Gallery

Grid Navigation and Gallery

I loved this gallery. Versatile, stylish yet elegant.

jQuery download

Classic JavaScript Gallery

A routine image gallery. Everybody needs it.

free download

Moleskine Notebook Booklet

Flipping book style album.

Free Plugin

Making a Really Cool jQuery Gallery

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.

Tutorial and Download

Slider Gallery with jQuery

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.

JS jQuery tutorial

Sideways – JQuery Fullscreen Image Gallery 

This gallery became very a popular a year ago. The reason being that it contains amazing effects and it is also perfect usability wise.

Tutorial and download

Polaroid Photobar Gallery

containersPolaroid effect is made by slightly rotating the images. It works as an album and as a gallery as well.

Polaroid Photobar Gallery


This is a unique, slightly non-serious but attractive kind of gallery.



Flip Grid

Click on any image to enlarge it. Click it again to go back.



Filterable jQuery Portfolio

This is an old fashioned responsive (even though responsive is a new trend) design for a portfolio gallery.

Filterable jQuery Portfolio Gallery Plugin


Brick Work

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.

Tutorial and download


Flipping 3D Gallery

This is a jQuery slider plugin, not really a gallery plugin but it can work either way.

Flipping jQuery Slider Plugin


 Ken Burns Media


Ken Burns Media


Cube Portfolio

This plugin costs $9.

Cube Portfolio


The Wall

This plugin has a price of $6.

The Wall



This plugin doesn’t come free. It will take $14 out of your pocket.



Tonic Gallery

This plugin costs $7

Tonic Gallery



This plugin comes at a cost of $9

Mega Folio


Lightbox Evolution

$14- that’s how much this plugin will cost you. It isn’t free.

Lightbox Evolution



This plugin is very elegant, stylish without being flashy.


Demo | Download

Factory Galleries

A very stylish plugin provided for free.


Demo | Download

Elastislide – A Responsive jQuery Carousel Plugin

This is a carousel, it can also work as an album.


Demo | Download

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.

Check out: Beginner’s Guide to Using Typography in Responsive Design


A cool little script that changes the content height/width to fit the best on the screen.

jQuery Plugin free download


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

A jQuery plugin for creating responsive typography.


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.

Kerning.js for typography web pages.


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.

jQuery plugin for making text go along a directed path.


If you’ve ever worked in newspapers, you’d know what slabbed text is.

Slabbed Text through jQuery
jQuery based slabbed text example.


This is my favorite jquery plugin related to typography. And I recommend you to use it.

Hatchshow is the plugin that creates old newspaper like slabbed text effect.

Text Bacon

As the above one is made only for headings, this plugin is made mostly for the content part.

Text Bacon: a jquery typography plugin for stylizing content text.

Type Butter

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.

Type Butter is one of the many jQuery typography plugins.Textualizer

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.

jQuery Exdent is a plugin for creating stylish blockquotes. JqIsoText
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.

Rotating Image Slider with jQuery

I think the screenshot says it all. The shape and stacking of the pictures is where the beauty of this jquery plugin lies.

jQuery JavaScript tutorial

cool image slider jquery

jQuery Slider Shock

Simple effect, highly interactive. Perfect for online magazines and large portals. You can also customize it as an image gallery.

Slider Shock

Elastislide – A Responsive jQuery Carousel Plugin

This is a carousel, not particularly a slideshow but this can work as a slideshow strip so I added it.


jQuery Banner Rotator

I loved the navigation within this slideshow, and that navigation is the reason I added it to this list.

Banner Rotator

Royal Slider


Royal Slider


Grid Accordion

This responsive and touch-enabled grid will take $13 out of your pocket.

Grid Accordian


Advanced Slider

This is one of my favorite plugins. Large size, all thumbnails and text overlays.


Demo | Download

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.


Demo | Download

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

jQuery Facets

This isn’t really a navigation menu but a navigation panel. Check out the demos, you’ll know what I’m talking about.

Image based jquery navigation bar.

Floating Social Toolbar With jQuery And CSS

This should be one of the perfect examples of jQuery plugins for navigation. This creates floating bar so it always has high visibility.

free download

Create a Cool Animated Menu with jQuery

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.

NavDoc: jquery navigation bar for web developers.

Expanding Image Menu

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.

free javascript

Elastic Thumbnail Menu

For giving the website a cool funky look, this navigation should be the very best solution.

jquery javascript

Slide Down Box Menu

You can see the result navigation in the image, what else do I need to say 🙂

jQuery navigation

Outside the Box

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.


Image Menu with jQuery

This is my favorite navigation menu from the selection. The image expands on mouse pointer hover. The text is very visible, large.

jquery tutorial

Free Off-Canvas Navigation Bar Plugins

Off-Canvas slide is a unique jQuery effect that was pioneered by Twitter’s blogging platform, Medium. Then came along Ghost CMS and nearly all of its themes contained off-canvas navigation bars.

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.


Contextual Ajax Sliding Panel

A quick and easy way to add a contextual Ajax sliding panel to your site.

Contextual Ajax Sliding Panel


It will slide the navigation panel as well as any containers given the .push class (or a class of your choosing in the settings).

Big Slide jQuery Off Canvas Plugin


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.


Responsive Side Toggle Menu

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.

Side Toggle Menu

Tegan Snyder Mobile Friendly Navigation Bar

This is a hardware accelerated slide menu example. It is modeled after Facebook’s famous menu.


jPanel 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).

jPanel Menu


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).

jQuery Off Canvas Navigation

Bootstrap Off Canvas

This website did not provide a live demo, however, it did give me an animated GIF.

Off Canvas Menu

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.


Based on jQuery and PHP, jCart handles visitor input without reloading the page and is fully functional even without JavaScript.


Smart Cart

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.

Smart Cart 2

Product Colorizer

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.

Product Colorizer

Droppable: Drag and Drop Plugin

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.


jQuery Cart

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.


AJAX Based Shopping Cart

Comparatively, this is an old tutorial but you will still find it quite useful.

Ajax Based Shopping Cart

jQuery Store Locator

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.


Image Slider

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.


3D Items

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.

scrolly jquery parallax


You can find the live demo on the page. Just check out the header.

Spritely jquery Parallax Plugin


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.

Plax Jquery Parallax Plugin

Parallax Slider

Excellent result, easy to implement. What else do you want?

Parallax Slider Plugin


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.

Infinite Scroll jQuery Plugin

Watch Demo

Infinite Scroll jQuery Plugin

jQuery quickie: Unlimited Scroll using the Twitter API

Watch Demo

jQuery quickie- Unlimited Scroll using the Twitter API

jQuery Scroll Path

Watch Demo


Web Developer Juice

Watch Demo

Create Infinite scroll effect using jQuery.

Web Developer Juice

Infinite Scrolling jQuery plugin

Infinite Scrolling jQuery plugin

jScroll Infinite Scrolling Plugin for jQuery

Watch Demo

jScroll Infinite Scrolling Plugin for jQuery

Autobrowse jQuery plugin

Autobrowse jQuery plugin

Release: [jQuery Plugin] Endless Scroll

Watch Demo

Release (jQuery Plugin) Endless Scroll

Infinite Ajax Scroll, a jQuery plugin

Watch Demo

Infinite Ajax Scroll, a jQuery plugin

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!


A jQuery table plugin with sorting, paging, filtering…and other good stuff. It is possible the simplest tool you’ll find for creating tables with JavaScript but it is powerful enough to compete with nearly any jQuery tables plugin.



jTable is a jQuery plugin that is used to create AJAX based CRUD tables without coding HTML or JavaScript.



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.


Drag and Drop jQuery Plugin

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).

Drag and Drop

Graph Table

A simple jQuery plugin that transforms an HTML table into a graph using the flot library.

Fixed Header Table

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.

Fixed Header jQuery Tables

jExpand plugin

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.

Cloud Zoom

It displays a large of the image on hover.

free jquery plugin


Displays various styles of hovers over images and albums.

jQuery Slider plugin free download


I loved this one for displaying featured content on a website.

Image Sliding Effect

Hover over any image and it slides away.

free javascript jquery

Lens Image Zoom

Almost like Cloud Zoom, but this one is a little funky while that one was pretty elegant.

jquery effect

Minimal Social Share

A lightweight plugin which adds a social media sharing bar.

jquery plugin download


A very cool animation effect. Works great on banners and objects that hover over the main web page (such as “follow us on twitter”).

jQuery plugin free download

Form wizard

Cool form maker plugin with plenty of themes and styling options.

Website Tour

A unique plugin which enables a full website tour using jquery.

how to use website plugin

Apple.com like Search Suggestions

The title says it all…

live results

Custom Youtube Player

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.

jquery plugin

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.

Create Beautiful jQuery Slider Tutorial

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.

tutorial dreamcss


Create an Image Rotator with Description (CSS/jQuery)

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.

jQuery image tutorial

Creating a Rotating Billboard System with jQuery and CSS

The vintage style of billboards in the sports stadiums.


jQuery Demo: Creating A Sliding Image Puzzle Plug-In

jquery puzzle tutorial

View Demo | Go to Tutorial

Animate Curtains Opening with jQuery

jquery curtain animation

View Demo | Go to Tutorial

Sexy Drop Down Menu w/ jQuery & CSS

sexy drop down menu jquery

 Go to Tutorial

Building a jQuery Image Scroller

jquery scroller tutorial

View Demo | Go to Tutorial

jQuery Virtual Tour

jquery virtual tour tutorial

View Demo | Go to Tutorial

Creating a Keyboard with CSS and jQuery

jquery keyboard tutorial

View Demo | Go to Tutorial

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

sliding box jquery tutorial

View Demo | Go to Tutorial | Download Tutorial

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


Go to Tutorial

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


View Demo | Go to Tutorial 

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.

poloroid jquery photo viewer

View Demo | Go to Tutorial | Download Tutorial

Creating An Infinite Scroll Effect With jQuery And ColdFusion

Watch Demo in Video

Creating An Infinite Scroll Effect With jQuery And ColdFusion

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.

Animated Portfolio Gallery


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.

Full Page Image Gallery


create free website wix below post

Further Related Readings

  1. Imtiaz June 10, 2013 at 10:59 pm

    nicely put together, thanks for sharing Ayaz.

Leave a Reply

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

Copyrights © 2016 - Designzzz. All Rights Reserved