jQuery plugins are what web designers love most. From image sliders, to image galleries and navigation plugins, they are so many, so diverse, so amazing and interactive that can beautify a website instantly. Let`s take a look at 30 plugins which I consider a must when building websites. Of course, you can`t implement all of them, but I`m sure you`ll find them a use in your future projects.
I`ll start with some jQuery slider plugins. Sliders are the most popular plugins used in webdesign and you can use them to showcase your products, latest posts or some interesting images.
The plugin is without a doubt the world most awesome jQuery Image Slider and comes with more than 15 transition effects.
Anything Slider is the most versatile slider from all. You can add absolutely anything from videos to simple text and images, which is awesome.
Slides is a slideshow plugin for jQuery that is built with simplicity in mind. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.
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. It also supports, but does not require, the Easing Plugin.
Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area.
Kwicks for jQuery
Kwicks for jQuery works like an accordion and looks great with some images and titles.
Jquery Slide Deck
jQuery Slide Deck is the web`s most powerful jQuery slider plugin.
Every website navigation needs to be clear, clean and interactive, therefore, there are some plugins which beautifies and make every website looking good.
jQuery Multi Level CSS Menu
This is a multi-level horizontal CSS menu created using a regular nested HTML list, then turned into a fully functional drop down menu using CSS and a touch of jQuery. The sub menus slide in and out into view, which also automatically reposition themselves horizontally if too close to the window’s right edge.
jBreadCrumb plugin is a collapsible and interactive breadcrumb which was developed to deal with deeply nested, verbosely named pages. It is a good thing to use breadcrumb on your website, because your visitors have more control while navigating.
jQuery Mega Drop Down Menu
The jQuery Mega Drop Down Menu plugin takes any standard HTML nested lists and turns them into horizontal mega menus.
With some basic CSS styling the mega menus can be used to create unique and visually appealing navigation for any website.
jQuery Vertical Mega Menu
This plugin creates vertical mega menus from standard HTML nested lists, allowing users to view all available menu options for each top-level menu item. Perfect to use for e-commerce websites.
A photo gallery needs to look nice and to be versatile and interactive, needs to be out of the box. There are a few plugins which fits for everything you need. Photography websites, products showcases or personal photos, you name it.
This is an awesome plugin. I love it so much. Supersized is a fullscreen background slideshow built using the jQuery library which transform your website into a veritable photo slideshow. If you`re a photographer, you need Supersized!
prettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes and ajax. It’s a full blown media lightbox. It is very easy to setup, yet very flexible if you want to customize it a bit. Plus the script is compatible in every major browser, even IE6.
slideViewer is a lightweight (3.5Kb) jQuery plugin wich allows to instantly create an image gallery by writing just few lines of HTML such as an unordered list of images.
FancyBox is a tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page.
ColorBox is a light-weight, customizable lightbox plugin for jQuery 1.3 through 1.6. Is working exactly like FancyBox, so you have from where to choose.
jQuery Filter Plugins
Filtering, categorizing and reordering things is a nice way to implement in a webpage. Even for a portfolio or an e-commerce store, this plugins will save your day!
jQuery Quicksand Plugin
Quicksand is a jQuery plugin which allows you to reorder and filter items with a nice shuffling animation. Is very popular thanks to the amazing effects and versatility.
This is not a plugin, is actually an amazing tutorial which explains step by step how to build a beautiful HTML5 portfolio powered by jQuery and the Quicksand plugin. You can use it to showcase your latest work and it is fully customizable, so potentially you could expand it to do much more.
Filtering Blocks works very well integrated into an e-commerce website. It was built for selling items and you can start using it for your own online shops.
Isotope is an exquisite jQuery plugin for magical layouts. It has a lot of features, a lot of filtering effects, layout and sorting options.
These plugins will help you transform your static website into a more dynamic one, so don`t hesitate to try them.
Tipsy is a jQuery plugin for creating a Facebook-like tooltips effect based on an anchor tag’s title attribute.
HTML5 jQuery Music Player
Do you want to integrate some music into a website? Grab the plugin and enjoy it!
Circular Content Carousel
This is a simple circular carousel which slides infinitely. If you click on “More” button, a panel with content will open.
LeanModal is a simple jQuery plugin which creates modal windows for your links. If you need a custom login window and want to make it looking nice, you should try leanModal.
jQuery Validation Plugin
This jQuery plugin makes simple clientside form validation trivial, while offering lots of option for customization. That makes a good choice if you’re building something new from scratch, but also when you’re trying to integrate it into an existing application with lots of existing markup.
Animated Text and Icon Menu
This is a slick menu with a nice animation feature on hover. The idea is to make some elements slide out, change and animate the background color of the item and then slide the elements back in with a different color.
jQuery News Ticker
Taking inspiration from the BBC News website ticker, jQuery News Ticker brings a lightweight and easy to use news ticker to jQuery.