26 jQuery Plugins for web designers and developers. This post contains jQuery sliders, image galleries, slideshow plugins, jQuery navigation menus, interactive maps, image rotator, plugins for tabs, accordion menus, user interface elements, web contact forms, modal windows, tooltips, font size, and many other fresh jQuery plugins collected in one place.
jQuery plugins are constantly being released, and it’s no surprise since it’s insanely popular, and for good reason. The only problem is being able to sort through them all to find the good ones. That’s why we’re always on the lookout, and we will found some good ones for you. Here are 10 useful jQuery plugins for designers.
In this post you can fine 26 Fresh jQuery Plugins. Enjoy!
You may be interested in the following modern trends related articles as well.
- 25+ Latest jQuery Plugins
- 20 jQuery Plugins You Have To Know
- jQuery Plugins – 20 Amazing jQuery Plugins and 100+ Excellent jQuery Resources
- Full Page Background Image Navigation (Slide Effect) with jQuery
- Download jQuery MegaMenu 2 Plugin
- jQuery Validity Elegant and Powerful jQuery Plugin
Please feel free to join us and you are always welcome to share your thoughts even if you have more reference links related to other tips and tricks that our readers may like.
It can get the content from an unordered list, RSS feed or an HTML file and show it in a simple-yet-slick interface (the interface can be totally customized).
There are prev-next and play-pause controls for quickly navigating through the items and few settings exist like:
- speed of the effects
- effect type (reveal or fade)
- direction (left-to-right or right-to-left)
- display duration of each item
- and more..
Slider.js is a slidershows latest web technologies engine build with jQuery and the power of CSS Transitions to perform awesome and efficient effects and the HTML5 Canvas to perform some non trivial transitions.
Items can have a text-caption with links and users can browse it with apagination or using the prev-next links.
- Each slide displays the image, but can also have a text caption and a link.
- Slides navigation (pages, next, previous)
- Load images before starting the slider.
- Load the slider photos with a JSON object (distant or local).
Highly extensible and customizable
Choose your transition among 13 available CSS Transitions and 10 built-in Canvas transition functions.
Implement your own transition in the technology you mastery:
- Style your own CSS transitions which fit the best your needs.
- Implement your own render function manipulating images pixels and Canvas API.
The data source is JSON and, besides the 13 available CSS transitions, there 10 built-in and good-looking canvas functions.
The Slidorion is a great new jQuery plugin built to combine an jquery image slider and jquery accordion. Accompanied by a range of features and effects, the Slidorion a fantastic and slick plugin that is compatible with all browsers.
There are multiple built-in effects (‘fade, slideLeft, overRight, overDown an more..) to be used for transitions.
A combination of an image slider and an accordion, the slidorion displays beautiful images along with a variable length description. With images linked to each tab, and accompanied by a large array of effects, the slidorion is a great alternative to the traditional jQuery slider.
The slide to be displayed on initial load can be defined and it can be set to autoplay (hover-on-pause exists) or only manual browsing by clicking each accordion tab.
Also, few other options exist for a better customization like the speed of transitions and interval between each slide.
Slides is a crazy slideshow jQuery plugin. It’s easy to implement, customize and style. Slides comes with A lot of Features like looping, auto play, fade or slide transition effects, crossfading, image preloading, auto generated pagination, the list goes on.
Slides Plugin built with simplicity in mind. Packed with a useful set of features to help novice and advanced developers alikecreate elegant and user-friendly slideshows.
The favorite feature of Slides and main reason for its development is you never see multiple slides fly by. You get to the end and it loops. You click from slide 1 to 5 and slide 5 just slides in from the right.
Basic jQuery Slider is a non-complicated and lightweightjquery content slider plugin its Easy to use, easy to theme, easy to customize and slider can present any HTML content.
There are a lot of jQuery image sliders out there. Most of them are loaded with features and skins, which are great if it’s exactly what you are looking for – but more often than not you need to customise it for your own needs and it can be difficult cutting through the bloat of a full featured slider.
Basic jQuery Slider has been developed to be as simple and lightweight as possible. Only the essential functionality has been included combined with clean semantic mark-up. This means instead of removing features and bending it to suit your needs, you can use this slider and as a base and extend it to be as feature rich, or as simple, as you need.
There are 2 built-in animation types: fade + slide and navigation can be accomplished with prev-next controls, buttons and keyboard.
And, settings like rotation speed, animation duration and pause on hover exist for a better customization.
Basic jQuery Slider is avaliable under the MIT license, so it is free for you to use, abuse and improve as much as you like.
Coin Slider have lot of features that some other slider don’t have like jqFancyTransitions didn’t have at the beginning. Basically it’s a latest (and improved) version of jqFancyTransitions but with new “fancy” transitions effects. jqFancyTransitions slice your images in stripes, while Coin Slider slice them in squares. And that’s the main difference. With changing order of appearing those squares I achieve random, swirl, rain and straight effects.
- Unique transition effects
- Compatible with Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, Opera 9+
- Valid markup
- Flexible configuration
- Auto slide
- Navigation box
- Lightweight (8kb only)
- Linking images
- Free to use under MIT licence
- Fully customizable using CSS
- Compatible with Android and iPhone
liteAccordion is a jQuery plugin for creating horizontal accordions on the fly.
It is sized ~1.4kb (gzipped and minified) and can display any HTML element(images, text, video, Flash..).
Any number of slides can be shown (that fit to the size of it) and it can be set to display a selected slide on initial load.
There are also other options like:
- speed of the transitions
- pause on hover
- time between each slide
liteAccordion is themable and comes with 2 themes (basic and dark).
Also, 2 callback functions exist (after the transition is complete and if any of the slides is clicked) for interacting with events.
Compatibility: All Major Browser
rlightbox is a jQuery UI mediabox and comes with some fresh features that doesn’t exist in its alternatives.
It can display any type of content from images to videos (YouTube and Vimeo), Flash files and HTML.
The plugin has a unique “panorama” feature for showing only part of an image but allowing users to view the rest with panning.
And, “live re-size” auto-scales the images in accordance with the browser size (which is great for responsive designs).
rlightbox can be set to display a single item or a set with th ehelp of pre-next buttons (there is support for keyboard navigation as well).
It is look and feel can be completely customized as the plugin is fullycompatible with jQuery UI ThemeRoller.
The Nivo Slider is world’s most awesome, beautiful and easy to user slider on the market. i find this awesome and amazing jQuery image slider develope by Dev7Studio. Completely free and totally open source, there literally is no better way to make your website look totally stunning. If you don’t believe us, check out the list of features and preview below.
- 16 unique transition effects
- Simple clean & valid markup
- Loads of settings to tweak
- Built in directional and control navigation
- Packed version only weighs 15kb
- Supports linking images
- Keyboard Navigation
- HTML Captions
- 3 Slick Themes
- Free to use and abuse under the MIT license
There are lot of jQuery slidershow available but jQuery HTML5 Slidershow using HTML5 canvas element. As the name implies, this is a special element that allows us to create and modify graphics. In addition, we can also use it like any other element on the page – apply jQuery animations on it, listen for events and integrate it deeply into our layouts.
This is a great technique to show several pieces of content in a limited space and a good way to engage the user. jQuery slidersshow “jQuery Blinds” are a great way to show large amount of content or images on a smaller area in a website or blog. They are commonly used in portfolio sites, corporate sites or blogs. You may probably heard that jQuery isn’t very hard to learn.
- Smooth animated transition
- Customizable sprite grid
- Customizable animation ochestration
- Multiple instances on the same webpage
- jQuery compatible (plugin)
Compatibility: All Major Browsers
Responsive image gallery with a thumbnail carousel using Elastislide. Inspired by Twitter’s “user gallery” and upon a request to show an integration of Elastislide, we want to implement a responsive gallery that adapts to the view-port width. The gallery will have a view switch that allows to view it with the thumbnail carousel or without. We’ll also add the possibility to navigate with the keyboard.
Image gallery using the jQuery Touchwipe Plugin that will make it possible to navigate the images by “wiping” on the iPhone and iPad.
Flexible Nav is a jQuery plugin that can add stylish navigation bar on the right of the page. It improves a web page navigation and helps to visualize different sections of a document, an article and any web page.
It analyzes the heading tags of the page and displays them on the right side of the page as links by proportionally keeping the distances between each item.
Each link gets users to the related items and, as the user scrolls, the navigation keeps showing “on which part of the page you are”.
Generation and Flexibility
The library can generate for you the nav sidebar content providing elements to display in navigation.
By default, it uses
h3 elements to retrieve and locate the different sections of a document but you can override these elements selector.
You have usually two kind of selected elements to use:
- Select a title. The link will take the title as text.
- Select any container and add a
data-navtextattribute to define the title you want.
<div id="demo" data-navtext="Demo of the game">...
- Simple usage used in this page
var nav = new FlexibleNavMaker().make().prependTo('body'); new FlexibleNav(nav);
- Selecting element you want
Using this code bellow, all nodes having this
navtitle class will appear in the flexible nav panel.
You can also create your own nav links to have more controls of used links. Conventionnally, you need to use a
<nav /> element with a
flexible-nav class and
<a href="#myidtarget" /> kind of elements for links.
- Add flexibility to an existing nav
(replace myNav by you nav id)
The plugin is specially handy for web pages that are updated frequently in a given structure as there will be no need to update the navigation each time.
Floating panels or floating sliders are very useful for e-commerce websites to display cart activities, checkout and amount total etc, floating panels viewport while scrolling is a good way of providing an easy-to-reach links/info (like navigation or help) to users.
It functions well with both absolutely-positioned + floated layouts and has cross-browser support.
The plugin has a smart feature which understands whether the screen-size is big enough or not to display the floating panel and decides to float it (or not) automatically.
It is very easy to use and has very few configuration options like “the element to be wrapped” or “its margin from top”.
Joyride is a jQuery plugin extremely flexible that simplifies the process of guiding users to discover the website features.
By defining the steps of the tour as an ordered list, the plugin displays desired information near any HTML element inside tooltips.
It to be cross-browser compatible with modern browsers and even used some fancy CSS to avoid images.
The location of tooltips (bottom, top), scrolling speed of the page, cookie on/off and several other options exist for customization.
To sum up, Joyride is a simple yet effective way of helping users find out the features of a website.
Compatibility: All Modern Browsers
CSSload is a free web-based application that can generate loading animation like spinners and bars with pure CSS.
Your can create loading animations from the pre-made templates, The cssload app currently offers six loader types and they can be customized in means of color, size and animation speed.
It uses the animation, transitions and transforms capabilities of CSS3 and compatible with browsers supporting them.
What is CSS animation?
The animation in CSS was announced in 2007 when WebKit decided to create animation, transitions and transforms in CSS. Animation feature is now among features of CSS3 and is managed by W3C.
- Firefox 5+
- Google Chrome
- Safari 4+
- Safari for IPhone
- Android 2+
- RIM OS6 web browser
- Other browsers with -webkit- prefix
Touchy Boilerplate is a starting kit for creating mobile web apps that covers most of the tricky parts of the development process.
It includes an HTML template with all the mobile-related meta tags, various browsing scenarios like animated navigation, fixed header + scrollable content and deep linking support.
Touchygoes beyond just an HTML/CSS template, adding performance optimization tools, hardware accelerated animation, device API, fixed positioning and much more so you can really rock the mobile web.
Also, there are Geolocation functions and various other UI elementsprovided.
The boilerplate uses jQuery or Zepto.js and has 2 other optional helpers: Touchy JS and Touchy PHP which handles most of the exciting stuff mentioned above.
Touchy Boilerplate Feature:
- HTML template with all the META tag goodies
- Animated page navigation
- Fixed header and scrollable content
- Browser history and deep linking
- CSS JS and Image embedding
- Special UI elements
- Optimized css files and js libraries
- Environment info as CSS hooks and JS data
- Geolocation helper
- Useful CSS only shapes
mTip is a flextendable jQuery tooltip plugin with a lot of customization options.
Customization Options list:
The plugin makes use of the black theme by default (don’t forget to load the CSS).
- Tooltip simple
- Tooltip with HTML content
- Tooltip with delay
- Tooltip top left, shows on mousedown
- Tooltip with dynamic content
- Tooltip with custom animation
- Tooltip box, click me!
- Tooltip subtle sliding effect
Ideal Forms is a lightweight framework, built on the top of jQuery, for creating good looking and user-friendly forms.
It converts standard
<input> elements into ones with rounded corners having an attractive focus effect. And, radio + checkbox elements are completely customized.
No images are used, they requires minimal HTML syntax and can be completely styled with CSS (comes with 3 themes).
Compatibility: IE 7+, Firefox 3+, Chrome 3+, Safari 3.1+ and Opera 11+
ThrivingKings, Daniel Raftery a talented web developer, has created and sharing useful new jQuery plugins.
Daniel Says: “I am a big fan of jQuery, PHP, and burritos. As long as I can find the time, I will continue to release free plugins, code snippets, and applications.”
1. Sticky jQuery Plugin
An unbelievably simple notification system for jQuery
Keep your users all warm and fuzzy by quickly notifying them of software updates, process completions, or annoying registration reminders.
Sticky is just a little guy. About 3.8kb in total for the full and 2.1kb for the minified version.
Download Sticky jQuery Plugin
2. Badger jQuery Plugin
Super sexy iOS style badges for jQuery
Give your users a dose of familiarity with iOS style badges. Badger will easily add a beautiful badge to your element without the need for images.
Internet Explorer 9.0+
Internet Explorer 8 shows a square badge
Badger is almost nonexistent in size. 2.4kb in total for the full and 1.8kb for the minified version.
Download Badger jQuery Plugin
3. Formly jQuery Plugin
The form glamorizer for jQuery
An unbelievably easy way to add style and validation to your forms. Easily add style, validation, and a more impressive user interaction with a single function.
4. Apprise jQuery Plugin
The attractive alert alternative for jQuery
Apprise is a very simple, fast, attractive, and unobtrusive way to communicate with your users. Also, this gives you complete control over style, content, position, and functionality.
Mobiscroll is a Wheel scroller style date/time picker optimized for touch devices such as iPhone, iPad, Android, to easily enter date and/or time. It’s easily customizable to enter date and time which comes as jQuery plugin and comes with very nice pre-defined themes: iOS, Android, Sense UI, Default.
It is highly customizable where values can be anything (including images) and can even be used as an alternative to the default select control (dropdown list).
And, it integrates well with other JS frameworks including jQuery Mobile.
Mercury is a full featured HTML5 WYSIWYG Editor. It was built from the ground up to help your team get the most out of content editing in modern browsers.
Mercury editor similar to the popular ones like TinyMCE or CKEditor but with a different usage experience.
Rather than being positioned inside a given element, it appears over the complete web page and can be used to edit the whole page or any number specified areas.
Preview content while you’re working to see exactly how it’ll look.
- Link Tools
Insert and edit links, including TOC/Bookmark links.
- Media Tools
Insert and edit images, youtube videos, and vimeo videos.
- Image Uploading
Drag images from your desktop to automatically uploaded and insert them.
- Table Editing
Advanced table editing and creation.
Insert and edit predefined and reusable bits of markup/code using drag and drop.
- Custom Regions
We provide Markdown, HTML, and Snippet region types by default.
It supports previewing the edited content and inserting links, images, videos or tables. File uploads can be accomplished with drag ‘n’ drops.
Snippets can be defined and inserted quickly with the help of a sidebar. And, a similar sidebar exists for taking notes.
Also, collaborative editing is supported. Just edit any page that others are working on at the same time and see their changes in real time.
Mercury can be either installed as a Rails gem or by including the necessary JS and CSS files into our web pages.
It creates the UI with CSS3 (VML in Internet Explorer) and works in all browsers (even in IE6).
The spinners can be customized in several ways like setting the number of lines, their color, length, width, radius, speed of the animation and the trail effect. Such a flexibility ends up in many possible variations.
- No images, no external CSS
- No dependencies (jQuery is supported, but not required)
- Highly configurable
- Resolution independent
- Uses VML as fallback in old IEs
- Uses @keyframe animations, falling back to setTimeout()
- Works in all major browsers, including IE6
- MIT License
And, Spin.js weights only 1.7kb gzipped which is smaller than an animated GIF file in most cases.
Few days ago we posted FitText flexible jquery plugin for font re-sizing, making sure a text fits into a defined element. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element and now today we are going to present same features jQuery plugin but this time for Videos.
It automates the Intrinsic Ratio Method by Thierry Koblentz to achieve fluid width videos in your responsive web design.
Usage is simple, just call the
fitVids function by targeting a video and the element will be auto-wrapped with a
<div> and CSS for resizing it will be applied.
Currently, it is compatible with major services like Youtube, Vimeo, Blip.TV or Viddler.
Combogrid is a jQuery plugin for adding advanced auto-complete functionality to input fields. when added to an input field, enables users to quickly find and select from a pre-populated list of values as they type, but in a tabular and paginated manner. Combogrid provides keyboard navigationsupport for selecting an item.
As the user types, it displays the list of possible results dynamically inside a paginated grid interface.
Requests are sent via Ajax and results are returned in JSON (or JSONP for cross-domain requests) datatype.
There are many options provided like the ability to setup alternate row colors, auto-choosing the result that matches the query, minimum length of the text before the grid is activated and more.
Compatibility: All Major Browsers
jQuery color picker plugin ExColor for enabling users to select colors from a Photoshop-like color picker. jQuery color picker plguin “ExColor” easdy to install on your website. It not only allows to choose the color you want. A design of plug-in can be easily edited with the settings. Simply connect to the page the script file and all.
It is attached to
<input> fields and can be activated by simply calling a single-line function.
The color picker’s design is so flexible as every element used in the picker comes with 10 different design options to select from.
Also, a web-based editor helps choosing each design element, their colors and various other options to create a unique look.
Compatibility: All Major Browsers
FOR MORE INSPIRATION