50 Best jQuery Plugins

By December 27th, 2011 jQuery Plugins

jquery-plugins

50 Best jQuery plugins for professional designers and developers. This post contains jQuery sliders, image galleries, slideshow plugins, jQuery navigation menus, interactive maps, image rotators, plugins for tabs, accordion menus, user interface elements, web contact forms, modal windows, tooltips, font size, and many other fresh jQuery plugins of 2011 collected all 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 50 Best jQuery Plugins. Enjoy!

You may also interested to read…

jQuery News Ticker LightWeight Easy-to-Use

jQuery News Ticker Plugin

jQuery News Ticker is a very lightweight easy-to-use news ticker to jquery plugininspired from the BBC news ticker, that simplifies creating them.

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

Requirements: jQuery
Compatibility: All Major Browsers
Website: http://www.jquerynewsticker.com/
Download: http://github.com/rhodimus/jQuery-News-Ticker

HTML5 & CSS3 Slideshows With jQuery :Slider.js

Html5 CSS3 Tansactions Slider

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.

Basic features

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

Requirements: jQuery
Compatibility: All Modern Browsers
Website: http://greweb.fr/slider/
Download: https://github.com/gre/slider.js

jQuery Image Slider & jQuery Accordion :Slidorion

jQuery Image Slider & jQuery Accordion :Slidorion

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.

Requirements: jQuery, jQuery UI and Easing plugin
Compatibility: All Major Browsers
Website: http://www.slidorion.com/
Download: https://github.com/hollandben/slidorian

Crazy Slidershow jQuery Plugin: Slides

Crazy Slidershow jQuery Plugin

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.

Requirement: jQuery 1.4.4+
Compatibility: All modern web browsers
Demo: http://slidesjs.com/
Download: http://slidesjs.com/downloads/slides.zip

Simple jQuery Content Slider: Basic jQuery slider

Basic jQuery Slider Plugin

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.

Requirements: jQuery
Compatibility: All Major Browsers
Website: http://basic-slider.com/
Download: https://github.com/jcobb/basic-jquery-slider

jQuery Image Slider with Effects: COIN SLIDER

jQuery Image Slider with Unique Effects

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.

Features

  • 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

Horizontal Accordion jQuery Plugin : liteAccordion

horizontal-accordion- jquery-plugin

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
  • autoplay
  • 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.

Requirements: jQuery
Compatibility: All Major Browser
Website: http://nicolahibbert.com/demo/liteAccordion/
Demo: http://nicolahibbert.com/demo/liteAccordion/
Download: https://github.com/nikki/liteAccordion

Lightbox with jQuery UI: rlightbox

rLightBox jQuery UI MediaBox

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.

Requirements: jQuery and jQuery UI
Compatibility: All Major Browsers
Website: http://ryrych.github.com/rlightbox2/
Download: https://github.com/ryrych/rlightbox2

Nivo Image Slider jQuery Plugin

Nivo Slider Image slider jQuery Plugin

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.

Features:

  • 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
The implementation and the usage is good enough and this slider is also available on different platforms like wordpress and joomla.

jQuery HTML5 Slidershow

jQuery Html5 SlideShow

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.

All uses of canvas you’ve come so far are probably limited to games and other proof of concept demos. Today, however, we are doing something practical – we are making a progressively enhanced slideshow with a fancy transitioning effect, which is perfectly functional in older browsers as well . Also , make sure to have a good hosting provider, you may want to consider having a your own dedicated server to load your sites faster.

Requirement: jQuery
Demo: http://demo.tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/html5-slideshow.html
Download: http://demo.tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/html5-slideshow.zip

jQuery Slideshow Using CSS Sprites: jQuery Blinds

jQuery SlideShow CSS Sprites

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.

Features

  • Smooth animated transition
  • Customizable sprite grid
  • Customizable animation ochestration
  • Multiple instances on the same webpage
  • jQuery compatible (plugin)
  • Unobtrusive javascript

jQuery Image Gallery with Thumbnail Carousel

jquery-image-gallery-with-thumbnail

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.

Requirement: jQuery
Demo: http://tympanus.net/Tutorials/ResponsiveImageGallery/
Download:http://tympanus.net/Tutorials/ResponsiveImageGallery/ResponsiveImageGallery.zip
Website: http://tympanus.net/codrops/2011/09/20/responsive-image-gallery/

Flexible jQuery Plugin For Stylish Navigation

flexible-jquery-navigation-library

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 h1 to 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-navtext attribute to define the title you want.

Example: <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
    new FlexibleNavMaker(".navtitle"); 

Using this code bellow, all nodes having this navtitle class will appear in the flexible nav panel.

Flexibility only

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
    new FlexibleNav($('#myNav')); 

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

Requirements: jQuery
Compatibility: All Major Browsers
Website: http://demo.greweb.fr/flexible-nav/
Download: https://github.com/gre/flexible-nav

Flexible jQuery Floating Panels With Portamento.js

jquery-floating-panel-plugin

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.

Portamento.js is a flexible jQuery plugin for creating floating panels or sliders quickly all that’s needed is some simple CSS and one line of JavaScript, and you’re away!

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

Requirements: jQuery
Compatibility: All Major Browsers
Website: http://simianstudios.com/portamento/
Download: https://github.com/krisnoble/Portamento

jQuery Plugin For Website Feature Tours :Joyride

jquery-feature-tours-plugin

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.

Requirements: jQuery
Compatibility: All Modern Browsers
Website: http://www.zurb.com/playground/jquery-joyride-featur…
Download: https://github.com/zurb/joyride

CSSLoad: Free CSS Loading Animation Generator For AJAZ & JQuery

css-spinners-bars-generator-ajax-jquery

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.

Browser Support:

  • Firefox 5+
  • Google Chrome
  • Safari 4+
  • Safari for IPhone
  • Android 2+
  • RIM OS6 web browser
  • Other browsers with -webkit- prefix

Website: http://cssload.net/

Create Mobile Web Apps Super Fast With Touchy Boilerplate

creating-mobile-apps

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
Requirements: jQuery or Zepto.js
Compatibility: iOS, Android & Modern Web Browsers
Website: http://labs.doat.com/
Download: https://github.com/doat/TouchyBP

Flextendable jQuery Tooltip Plugin: mTip

flextendable-jquery-tooltip-plugin

Tooltips are a “common graphical user interface element, that are used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a small box appears with extra information regarding the item being hovered over” (via Wikipedia). To give your tooltip extra functionality and vesatilty the best and simplest solution is using Javascript, especially jQuery.

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

Requirement: jQuery
Demo: http://dev.mauvm.nl/mTip#examples
Download: http://dev.mauvm.nl/mTip/download/v1.0.1.zip
Website: http://dev.mauvm.nl/mTip

A Small Framework To Build Forms: Ideal Forms

small-framework-to-build-forms

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

The framework is unobtrusive and degrades gracefully with JavaScript disabled.

Requirements: jQuery
Compatibility: IE 7+, Firefox 3+, Chrome 3+, Safari 3.1+ and Opera 11+
Website: http://www.jqidealforms.com/
Download: http://code.google.com/p/idealforms/downloads/list

New jQuery Plugins Sticky, Badger, Formly & Apprise From ThrivingKings

web-development-jquery-plugins

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.

Browser compatibility

iPhone/iPad
Chrome 8.0+
Firefox 3.0+
Safari 4.0+
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.

Download Apprise jQuery Plugin
Requirements: jQuery
Compatibility: All Major Browsers
Website: http://thrivingkings.com/plugins

jQuery Date-Time Picker For Mobile: Mobiscroll

jquery-date-time-picker

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.

Requirements: jQuery
Compatibility: All Modern Browsers
Website: http://mobiscroll.com/
Download: https://github.com/acidb/mobiscroll

HTML5 WYSIWYG Editor: Mercury

html5-wysiwyg-editor-jquery

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.

Core features

  • Previewing
    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.
  • Snippets
    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.

Requirements: jQuery
Compatibility: Chrome 10+, Safari 5+, Firefox 4+
Website: http://jejacks0n.github.com/mercury/
Download: https://github.com/jejacks0n/mercury

Customizable Loading Indicator Without Image: Spin.Js

css-loading-indicator-without-image

Spin.js is a JavaScript library that enables us to generate customizable loading indicators without images.

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.

Features

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

Requirements: No Requirements
Compatibility: All Major Browsers
Website: http://fgnass.github.com/spin.js/
Download: https://github.com/fgnass/spin.js

Video Embeds jQuery Plugin Lightweight Easy-to-Use: FitVids.js

video-embeds-jquery-plugin

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.

Requirements: jQuery
Compatibility: All Major Browsers
Website: http://fitvidsjs.com/
Download: https://github.com/davatron5000/FitVids.js

jQuery Auto-Complete Input Field With jQuery Combogrid Plugin

jquery-combogrid-plugin

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.

Requirements: jQuery
Compatibility: All Major Browsers
Website: http://combogrid.javaedintorni.it/
Demo: http://combogrid.javaedintorni.it/default.php
Download: http://combogrid.javaedintorni.it/download.php

jQuery Color Picker Plugin: ExColor

jquery-color-picker-plugin

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.

Requirements: jQuery
Compatibility: All Major Browsers
Website:http://modcoder.org/?ptab=jquery&item=excolor

jQuery Flexible Font Size Plguin: FitText

fittext-jquery-plugin
FitText makes flexible font-sizes jQuery plugin for making sure a text fits into a defined element. Use this plugin on your fluid or responsive layout to achieve scalable headlinesthat fill the width of a parent element. It was made for headlines only, you shouldn’t use it on paragraph text.

It auto-updates the font-size in accordance with the width of an element wrapping it and guarantees a non-broken layout (because of the font size) even if the page is displayed from a mobile or desktop browser.

And, there are some options provided for a fine-tune including the ability to set “level of scaling” and mentioning min-max sizes.

Requirements: jQuery
Compatibility: All Major Browsers

Demo Download

Website Font Resize jQuery Plugin: jFontSize

jfontsize-jquery-plugin

jFontSize is a jQuery plugin for integrating the popular ”A+ and A- buttons with the functionality of resizing text” into web pages.

This jQuery plugin  is also used to increase the accessibility of sites, helping people who have visual problems to see better content.

The buttons are actually inserted with standard HTML-CSS (so any type of buttons can be used) and the plugin controls the resize part.

It is possible to target a specific element (or the <body> for the whole page) and the resizing will be applied only to the contents of that element.

Also, various options can be configured like the “max-min number of resizes” and “how many pixels each command will resize”.

Requirements: jQuery
Compatibility: All Major Browsers

Demo Download

CSS3 Transitions jQuery Image Slider: Flux Slider

css3-jquery-image-slider

CSS3 Transitions jQuery image slider “Flux Slider is an image slider using CSS3 transitions for creating smooth and  good looking 2D or 3D transitions slides.

It requires jQuery or Zepto.js, inspired from the transitions of Nivo Slider jQuery plugin and mimics them without using traditional JavaScript-timer-based animations.

Currently, there are 10+ transitions including Bars-Bars3D, Blinds-Blinds3D, Cube, Zip and more.

It can display a pagination and/or prev-next controls for browsing through the items.

Also, there are functions provided for auto-playing the slides and displaying captions with each.

jQuery image slider “Flux Slider”  can be controlled with custom events with its API as well.

Requirements: jQuery or Zepto.js
Compatibility: All Modern Browsers
Website: http://www.joelambert.co.uk/flux/transgallery.html

Demo Download

Free jQuery Content Slider: Diapo

jquery-content-slider

Diapo is a free jQuery plugin for creating content sliders with beautiful and custom transition effects (like curtain and mosaic).

It can display images, videos or any other HTML and can be browsed manually (with prev-next buttons or pagination links that can also display thumbnails) or the auto-slideshow functionality.

Diapo jquery content slider is an open source project. You can suggest changes or improvements if you want. You can download it and use for free, you can also include it in your projects and sell it as part of a bigger work.

The plugin is mobile-ready and has options to enable-disable features for mobile usage.

Transitions can also be customized by defining sliced rows-columns, the transition period and more.

Requirements: jQuery, jQuery Mobile, Easing & HoverIntent plugins
Compatibility: All Modern Browsers

Demo Download

Awesome jQuery Content Slider: FlexSlider

flex-jquery-content-slider

FlexSlider is a lightweight (4kb minified) jQuery content slider plugin that is fully responsive, works great in any resolution and adapts itself nicely.

It uses unordered lists, any HTML content can be placed inside each <li>and they will be converted into slides.

Items can be browsed with the help of navigation buttons, keyboard or an auto-slideshow feature.

There are built-in animations offered for the transitions: fade and slide. And, it is possible to define the slide + duration speeds.

FlexSlider also has some options to improve usability like “pausing on action” or pausing on hover”.

jQuery FlexSlider Features:

  • imple, semantic markup
  • Supported in all major browsers
  • Slide and Fade animations
  • Highly customizable slider options
  • Directional, keyboard, and touch swipe navigation
  • Ultra Lightweight (4kb minified)
  • Use any html elements in the slides
  • Built for beginners and pros, alike
  • Free to use under the MIT license
Requirements: jQuery
Compatibility: All Major Browsers
Website: http://flex.madebymufffin.com/

Demo Download

jQuery Chop Slider: Animated jQuery Chop Slider, Zoom Slider, Bokeh Slider

jquery-html-content-slider

jQuery Chop Slider is the awesome animated jQuery slidertaht come with unlimited transition effects. Chop Slider uses full power of CSS3 animation. It has own CSS3 support detection and works a little bit different (but still awesome) in old (and Internet Explorer) browsers. It allows you to be fuly creative and create your own transition effects.

jQuery Chop Slider Features:

  • Uses full power of CSS3 animation
  • Has own CSS3 support detection and works a little bit different (but still awesome) in old (and Internet Explorer) browsers
  • Unlimited number of custom animated transitions. It allows you to be fuly creative and create your own transition effects
  • Lot of flexible settings to make your transition unique
  • Built in control navigation
  • Built in captions control
  • Autoplay feature
  • Ready to use with a HTML captions
  • Supports links for images (slides)
  • Lightweight. About 3Kb minified and gzipped
  • Easy to setup
  • Comes with some usefull functions for developers. They allow to make slider transitions a part of environment’s animation

Browsers Support:

Chop Slider has a lot of flexible settings to make your transition unique. It has built in control navigation and captions control. The file size is about 3Kb minified and gzipped. Chop Slider support for Internet Explorer v6+, Firefox v3+, Google Chrome v4+, Safari v4+ and Opera v10+.

Requirements: jQuery

Demo Download

Flux Slider With CSS3 Image Transactions

css3-image-transaction-jquery-slider

Flux slider with CSS3 image transition framework, inspired in part by the fantastic Nivo Slider jQuery plugin. Instead of the traditional Javascript timer based animations used by jQuery, Flux utilises the newer, more powerful CSS3 animation technology. Its in a fairly early/rough state at the moment but testing on the iPhone/iPad does appear to produce much smoother animations. Desktop performance (as with Nivo) is very smooth but the use of CSS3 enables us to produce some new effects that Nivo can’t, e.g. rotations.

The aim is to use hardware acceleration where possible to improve performace on less powerful devices, such as mobiles & tablets.Flux requires a browser which supports CSS3 transformations and has been built to use either jQuery or Zepto.js as they share the same API. For mobile deploymentZepto is recommended due to its <5k deployment footprint.

Requirements: CSS3 Transformations Enable Browser

Demo Download

jQuery Content Slider With Thumbnails, Captions & Tooltips :Awkward Showcase

jquery-content-slider-thumb-caption-tooltip

Awkward Showcase is a very flexible jQuery content slider plugin with thumbnails, captions and tooltip that can display any type of HTML content.

The plugin only controls the functionality and design is completely created on the HTML-CSS side.

Slider can have thumbnails that are positioned vertically or horizontally, captions can be displayed for each item and multiple tooltips can be positioned over slides (to provide detailed info about a specific part of the slide).

It can auto-arrange the height according to the content displayed, has multiple transition effects, the interval between each slide can be changed and much more.

Requirements: jQuery
Compatibility: All Major Browsers
Website: http://www.awkwardgroup.com/sandbox/awkward-showcase-a-jquery-plugin/

Demo Download

jQuery Color Picker Plugin: ExColor

jquery-color-picker-plugin

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.

Requirements: jQuery
Compatibility: All Major Browsers

Demo Download

jQuery DropDown Menus: DropKick

jquery-drop-down-menu
DropKick use to creating custom dropdown menus is usually a tedious process that requires a ton of extra setup time. Oftentimes lacking conveniences that native dropdowns have such as keyboard navigation.

DropKick works by transforming your existing, boring <select> lists into beautiful, customizable HTML dropdowns. The name attribute is the only one that is required. You should also set a tabindex attribute to enable navigation via tabbing. When an option is selected in a DropKick menu, the corresponding <select> value is updated. This means that your forms and AJAX requests should work the same without having to make any changes.

FEATURES

  • Keyboard Navigation
  • Themeing
  • Custom Callbacks

Opened DropKick menus on Internet Explorer 7 will be covered by other DropKick containers if they are vertically stacked and too close together.

Requirements: jQuery
Compatibility: All Modern Browsers

Demo Download

Flexible jQuery Plugin For Overlays: Simple Overlay

flexible-jquery-overlay-plugin

A jQuery Plugin for easily adding lightweight, flexible overlays to your projects.  Simple Overlay flexible jquery plugin use for custom effectscustomize using CSS hooks,fade effect, slide effect or no effect, define custom callbacks for further action, take advantage of CSS3 and more.

There are high-quality plugins for creating overlays but most of them come with Lightbox or modal dialog capabilities and sometimes all we need is only the overlay.

The overlay can also be customized more by setting its color, opacity level, whether it’ll be removed with onClick and more.

Thanks to custom callbacks, any functions can be fired after onShow andonHide events.

Requirements: jQuery
Compatibility: All Modern Browsers

Demo Download

jQuery HTML5 File Uploader Lightweight jQuery Plguin

html5-jquery-uploader

jQuery HTML5 Uploader is a lightweight jQuery plugin that lets you to quickly add an upload system a-la-Gmail into your web app. You only need to create a dropbox element(i.e. a div) and jQuery HTML5 Uploader will do the rest. Then you can drag & drop one or more files on the element and the files will be uploaded. It also works with the multiple input file element.

jQuery HTML5 upload function is divided into two asynchronous operations: client side, the file is loaded in the browser memory with a FileReader object. Useful if you want, for example, to show the image preview while uploading a picture. The server side operation consists in sending the binary file string to the postUrl.

It has been tested and works on Firefox and Chrome.

Requirements: jQuery

Demo Download

Tooltipsy: jQuery Tooltips Plugin For Control-Obsessed Designers

jquery-tooltip-plugin

Tooltipsy is a jQuery plugin that provides a flexible base for creating tooltips.

Tooltip plugins make it too difficult to control the CSS. So I created tooltipsy to simply provide extremely efficient tooltip functionality. Tooltipsy gives you complete control over theCSS, animation, and position.

It can be positioned however you wish, look and feel can be totally customized with CSS and any type of animations can be implemented.

There are also few settings like “the ability to aligning the tooltip according to the cursor or the element” and “its distance from them”.

Tooltipsy is very well-documented and a set of samples show the flexibility offered.

Requirements: jQuery
Compatibility: All Major Browsers
Website: http://tooltipsy.com/

Demo Download

OpenJS Grid – Easiest & Customizable jQuery Datagrid

customizable-jquery-datagrid

OpenJS Grid is the easiest & customizable jQuery Grid ever. With very little work you can have a data grid that can do everything from sorting and searching to complex database queries.

OpenJS Grid is a very easy-to-setup solution for displaying records as a user-friendly datagrid.

It comes as a plugin for jQuery with the PHP files for handling the Ajax requests and can be called with a simple/one-line function.

The data to be shown on the initial load can be limited to a desired number, rest of the records can be browsed with pagination and every column can be sorted.

And, there are many options like:

  • showing/hiding row numbers
  • inline editing
  • deletion of records
  • filtering records with date range

There are callbacks on every step (rowClick, loadComplete, saveFail, etc.) and the design of the grid can be totally changed with CSS3-powered theming support.

Requirements: jQuery
Compatibility: All Major Browsers

Demo Download

Image Gallery For iPhone, iPad, Android, Blackberry & Touch Devices: PhotoSwipe

image-gallery-iphone-ipad-touch-devices

PhotoSwipe is a free and full-featured image gallery for mobile and touch devices. It is built with HTML, CSS + JavaScript and doesn’t depend on any frameworks.

PhotoSwipe is a self contained JavaScript library that can be easily integrated into your mobile websites. It is heavily optimized for mobile webkit browsers. However, if you need wider desktop browser support or you are using jQuery Mobile, PhotoSwipe comes packaged with a jQuery implementation as well.

The interface is native-like and offers a similar experience with the ability of swiping items and support for orientation (also, resizes images automatically).

A “start” button can display the images as a slideshowand there are many options for customizing the gallery like the speed of fadeIn-fadeOut effects, enabling zoom, method of image scaling and much more.

PhotoSwipe works in iPhone, iPad, Android, Blackberry + desktop browsers and there is an optional jQuery implementation for the users of this framework.

Image Gallery For Mobile and Touch Devices

Requirements: No Requirements
Compatibility: All Major Mobile & Desktop Browsers

Demo Download

GMAP3 jQuery Plugin For Google Maps

jquery-plugin-for-google-map

GMAP3 is a jquery plugin which allows many manipulation of the google map API version 3. Inserting Google Maps into web pages is already easy with the simplicity Google offers in all of their products.

However, things can get easier with GMAP3 jQuery plugin if you are planning to use maps with advanced features (like overlays or callbacks).

There are simplified functions provided for the popular uses of Google Maps API that would normally require much more coding like:

  • getAddress – which returns a google.maps.GeocoderResult from agoogle.maps.LatLng
  • getRoute – which returns a google.maps.DirectionsResult from agoogle.maps.DirectionsRequest

It is also possible to use the native Google maps functions within the plugin for maximum flexibility.

Requirements: jQuery
Website: http://gmap3.net/

Demo Download

MotionCAPTCHA – Draw Shapes Captcha With jQuery

draw-shape-captcha-jquery-plugin

MotionCAPTCHA, a jQuery plugin, based on the HTML5 Canvas Harmony procedural drawing tool offers a different type of captcha byasking the users to  draw shape they see in the canvas in order to submit a form. It is not only different but also fun and can even be easier to-use for touch devices.

The project is currently a proof-of-concept considering the captcha is only verified on the client-side and can be manipulated. However, the next version is planned to have server-side and better browser support. Looking forward to it!

Compatibility: jQuery

Demo Download

Mosaiqy: jQuery plugin For Viewing and Zooming Photos

jquery-image-viewing-zooming-plugin

Mosaiqy is a jQuery plugin for viewing and zooming photos and images in a Mosaic-like grid interface.

The images are displayed inside randomly moving columns and rows where CSS3 transitions are used for the animations.

Once a thumbnail is clicked, the original version is loaded inside the gridwith a nice slideIn/Out effect.

retrieves images from a JSON/JSONP data source which makes integrating with image hosting services pretty easy and there are already demos for Flickr, Instagram and Panoramio.

Mosaiqy has multiple configuration options like the speed of transitions, delay between each, number of columns/rows, looping on/off and more.

Requirements: jQuery
Compatibility: All Modern Browsers

Demo Download

jQuery Tooltips Plugin Bubble-Shaped Tooltips With :Grumble.js

jquery-bubble-shape-tooltip-plugin

Grumble.js, a jQuery tooltip plugin by the developers of Huddle.com, enables us to create tooltips as bubble-shaped. 

The positioning  can be rotated around a given element at any angle, all 360 degrees. Any distance can be specified. Any CSS style can be applied. There’s auto-magic size adjustment for use with localised text. FX queues for animating multiple grumbles. And it works in IE6+, and modern browsers.

Bubbles come from a sprite image and the plugin decides which image to use according to the size of the text.

Tooltips are displayed with a fadeIn/fadeOut effect, can be set to auto-disappear or stay visible until they are closed.

There are also callbacks on every levelonShowonBeginHide andonHide.

What is this magic?

grumble.js uses buzzwords like CSS3 and ‘maths’ to position itself exactly where you want it. Modern browsers use CSS3 transforms with IE6+ using non-standard Matrix filters. Image spriting is used for actual bubble image, you can change this as you want – it’s just CSS.

Demo Download

File Browser With PHP & jQuery: SFBrowser

jquery-file-browser-php-plugin

SFBrowser is an open source application, built with PHP and jQuery, for managing files online with an Ajaxed interface.

It returns a list of objects with containing the names and additional information of the selected files. You can use it, like any open-file-dialog, to select one or more files. Most inherent functionalities are also there like: file upload, file preview, creating folders and renaming or deleting files and folders.

The functionality can be extended with plugins. There are few ready-to-use ones like filetree and image-resize.

For a faster usage, there is a context menu and support for keyboard shortcuts.

It is a multilanguage application, new languages can be added by creating new localization files (English, Dutch or Spanish are already included).

And, SFBrowser comes with a JavaScript API to interact with many of its features.

P.S. It is also available as a WordPress plugin.

Requirements: PHP
Compatibility: All Major Browsers

Demo Download

jQuery Auto-Complete Input Field With jQuery Combogrid Plugin

jquery-auto-complete-inputfield-plugin

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.

Requirements: jQuery
Compatibility: All Major Browsers
Website: http://combogrid.javaedintorni.it/

Demo Download

Kendo UI: Modern Framework for HTML5 UI

jquery-modern-framework-html5-UI

Kendo UI is a modern framework for HTML UI with the latest HTML5, CSS3, and JavaScript standards, it delivers everything needed for client-side, jQuery-powered development in one integrated, compact package.

Modern framework rich, client UI widgets built on jQuery and designed to work across browsers and touchscreen devices. Everything you need for HTML5 UI in a single, compact package.

Framework Features:

  • Complete Framework for HTML5 apps
  • Ready for Touch & Mobile Devices
  • No more slow JavaScript
  • Rich UI built on jQuery
  • Broad browser support (even the old ones)
  • Professional tools, Professional support
  • Evolving at the speed of the web

Mobile Device Compatibility

Kendo UI is built to work seamlessly across desktop browsers and mobile touchscreen devices. Kendo UI offers full support for touch interactions and is tested against the following mobile platform browsers:

  • Android 2.x+
  • iOS 3.x+
  • BlackBerry OS 6.x+
  • webOS X.x+

Supported browsers

  • Internet Explorer 6+
  • Firefox 3+
  • Safari 4+
  • Chrome
  • Opera 10+

Requirement: jQuery

Demo Download

Ninja UI: jQuery Plugin To Create Beautiful Web Objects

jquery-ninja-UI-web-objects

Ninja UI is a jQuery plugin enabling you to create beautiful web interface objects efficiently and unobtrusively.

jQuery has lots of plugins and jQuery UI to improve its functionality in many ways.

Ninja UI is a plugin for the framework that brings new alternatives to them in a single package.

It includes widgets like buttons, accordion, icons, tooltips/modal box, slider, rating, tabs, auto-suggest and canvas-powered loader icon.

They are unobtrusive and the icons used actually come as a separate plugin that is in the form of web fonts.

Download Ninja UI jQuery Plguin

Requirements: jQuery
Compatibility: All Major Browsers
Website: http://ninjaui.com/

Demo Download

FOR MORE INSPIRATION

25+ Latest jQuery Plugins

Post image of 25+ Latest jQuery Plugins

10 Useful jQuery Plugins For Designers

Post Thumbnail of 10 Useful jQuery Plugins For Designers

20 jQuery Plugins You Have To Know

Post Thumbnail of 20 jQuery Plugins You Have To Know

Advertisements
 
 
Author:
I'm Muhammad Faisal founder of GDJ and co-founder of FPD. I love all things having to do with WordPress, PHP, CSS, AJAX or jQuery. You can catch me on Twitter, Facebook and Pinterest

Comments

Trackbacks to this post.
Leave a Comment

© 2010 - 2014 Free PSD Download.
Powered by Wordpress.